{ "id": "v1-w2-4355", "long_id": "v1.web-2-0-gloss.portal.s04.p03.t05.u05", "name": "Web 2.0 gloss member dashboard", "era": { "slug": "web-2-0-gloss", "code": "w2", "name": "Web 2.0 gloss", "years": [ 2005, 2009 ], "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1024, "fluid": false }, "summary": "The signed-in home of a Web 2.0 community site: a glossy header band with the brand, an account line and folder tabs standing on its lower edge, a getting-started box with three numbered steps and one big glossy button, then three columns with a member menu and tag cloud on the left, an activity stream in a tabbed box in the middle and invitation boxes on the right. It was common from about 2005 to 2009 on photo sharing, bookmarking and hosted-tool sites once a member had logged in. White rounded boxes sit on a pale tinted sheet, type is plain Helvetica at 13px, and gloss is kept for the header, the table head and the primary button.", "url": "https://chrono.skin/s/v1-w2-4355", "preview_url": "https://chrono.skin/s/v1-w2-4355/specimen.html", "files": { "STYLE.md": "# Web 2.0 gloss member dashboard\n\n## Summary\n\nThe signed-in home of a Web 2.0 community site: a glossy header band with the brand, an account line and folder tabs standing on its lower edge, a getting-started box with three numbered steps and one big glossy button, then three columns with a member menu and tag cloud on the left, an activity stream in a tabbed box in the middle and invitation boxes on the right. It was common from about 2005 to 2009 on photo sharing, bookmarking and hosted-tool sites once a member had logged in. White rounded boxes sit on a pale tinted sheet, type is plain Helvetica at 13px, and gloss is kept for the header, the table head and the primary button.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 960px, centred in a 1024px viewport, with `--size-pad` (20px) of padding at each side, so the working width is 920px. It does not stretch.\n- The header band (`.ds-nav__bar`) and the footer (`.ds-footer`) span the full viewport; their content sits in a centred `--size-page` box (`.ds-nav__inner`, `.ds-footer__inner`). Text never sits directly in a full-viewport strip.\n- Navigation is at the top only. The band holds two rows: brand, claim, account line and search field (`.ds-nav__top`), then the folder tabs (`.ds-nav__tabs`) whose current tab takes the canvas colour and joins the page under it. A line of section links (`.ds-nav__sub`) follows on the canvas, with a status sentence at its right end.\n- Everything else sits in `.ds-page__wrap` (960px, canvas colour). Home page, top to bottom: the hero box across the full 920px, then `.ds-page__columns`, three columns: `.ds-page__side` of `--size-side` (180px) on the left, `.ds-page__main` (480px) in the middle, `.ds-page__rail` of `--size-rail` (220px) on the right, with `--size-gutter` (20px) between them.\n- The left column holds the member card (`.ds-me`), the menu and the tag cloud. The middle column holds a `.ds-head`, the `.ds-tabs` and the `.ds-box` they own with the activity list in it, then the two by two `.ds-grid` of group modules. The right column holds `.ds-panel` boxes and a ranked list.\n- Spacing scale: `--space-1` 2px (between a title and its meta line, between tabs, between tags), `--space-2` 5px (control padding, gaps between buttons, tab padding, module head padding), `--space-3` 10px (list row padding, gaps between grid cells and stat tiles, gap under a head, between notices), `--space-4` 15px (box and panel padding, form actions, footer rule), `--space-5` 20px (hero padding, gap between sidebar blocks, gap above the columns and above a split row), `--space-6` 30px (gap between unrelated sections; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 24px tall, the hero button `--size-control-large` 38px, the search field `--size-search` 160px, step numerals `--size-step` 28px, stream initials `--size-avatar` 32px, the member card picture `--size-face` 48px, the dialog `--size-dialog` 380px.\n- Views: the specimen is one example site of five screens, each a `.ds-view` section inside `.ds-page__wrap`, with the header (band, tabs and the line of section links) and the footer written once around them. `home` is the member's home page (hero box with its steps, the three columns: member card, menu and labels; the activity list under its tabs and the group modules; panels and the ranked list). `album` is one album (stats, the tabs, a toolbar, the photo table with its count line, pagination and a key to the badges). `comments` is the album's comments tab (the empty state in the tab's box, then recent comments from other albums beside an invitation panel). `settings` is its settings tab (the form beside the help text in the tab's box, then the delete panel beside the confirming dialog). `upload` is the upload page (notices, the last batch as a table beside the form for the next). Links are plain `href=\"#name\"`; the album's tabs lead from one album view to the next. The folder tab and the section link of the showing view are marked by `.ds-page:has(#name:target)` rules, Home and Overview also when no view is named; `settings` keeps the Your photos tab.\n- Inner pages drop the hero and all three columns: an inner page is one full-width column. In `.ds-page__wrap`, top to bottom: `.ds-breadcrumb`, then `.ds-page-header` in the hero's place (a pale strip across the full 920px, title and one line on the left, buttons on the right), then `.ds-stats`, four separate figure tiles in one row 10px below, then 30px below (20px when no stats row comes between: `.ds-section--tight`) a `.ds-tabs` row with its `.ds-box` holding a `.ds-buttons--bar` toolbar, the table, a count line and the pagination; on another tab the same box holds an inset empty state, or a `.ds-page__split--inside` row with the form beside its help text. Notices sit directly under the page header. Further blocks sit in `.ds-page__split` rows of two equal columns 20px apart: a list box beside a panel, a table box beside a form box, the panel that asks for a deletion beside its dialog. Nothing on an inner page is wider than 920px and there is no sidebar.\n- List entries are rows inside a box, divided by 1px `--color-border-muted` rules; boxes, panels, tiles and modules are the cards.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family: `--font-body`, `--font-heading` and `--font-ui` are Trebuchet MS with Helvetica and Arial behind it. `--font-mono` (Consolas, Lucida Console) is for inline code only.\n- `--text-base` 13px at `--line-body` 1.45. `--text-small` 11px for meta lines, the strip, badges, hints and the footer. `--text-ui` 13px bold (`--weight-ui`) for buttons, tabs and table heads.\n- `--text-display` 30px bold: the hero title and the price in a plan box. `--text-h1` 24px: the brand name, page titles, section titles. `--text-h2` 18px: plan names, panel titles, section labels, stat numbers. `--text-h3` 15px: questions, sidebar titles, the hero list. `--text-large` 17px: the word links, the hero lead, field and button. Nothing is larger than 30px.\n- No tracking, no uppercase transform. Links in running text are underlined (`--link-decoration`) and lose the underline on hover (`--link-decoration-hover` is none); titles, navigation and sidebar links are not underlined (`--link-decoration-quiet`).\n- `--color-page` #ffe080 with `--fill-page`, vertical stripes 24px wide made by mixing the page colour with white: the field the sheet floats on. `--color-canvas` white is the sheet.\n- `--color-bar` #f08c00 orange with `--fill-bar` (one fade, light at the top) and white `--color-bar-text` carrying `--shadow-text`: the strip, the table head and the dialog title. `--color-bar-alt` #fff3c4 with `--fill-bar-alt`: the stats band and the footer; text on it is `--color-bar-alt-text`, links keep `--color-link`.\n- `--color-inverse` #304860 slate with `--fill-inverse` and `--color-inverse-text`: the hero band only. The box around the ticked list and the small note are `--color-inverse-text` mixed with `transparent`.\n- `--color-text` #444444 body; `--color-text-muted` #8c8372 meta and \"not in this plan\"; `--color-heading` #1f1f1f titles, prices, row labels; `--color-heading-alt` #c85a00 panel titles, section labels and prose h2.\n- `--color-link` #1a54ae, `--color-link-hover` #e06000, `--color-link-visited` #6a5a9c, `--color-link-active` #a03000, `--color-link-quiet` #6b6455 for lead lines and tags.\n- `--color-surface-alt` #fffbea: alternate rows, the page header strip, the form box, the empty state, the dialog's action strip. `--color-surface-strong` #ffefb8: group rows of the table and tags.\n- `--color-fill-1` to `--color-fill-4` (yellow, pale blue, pale green, peach): the head of each plan box. Block backgrounds only; text on them is `--color-heading` and `--color-text`.\n- `--color-accent` #ffb030 amber with `--fill-accent` and `--color-accent-text`: the pill badge, the current tab segment, the current page number, the ticks, the frame of the featured plan and the rule under the current word link. `--color-accent-alt` #f03840: the NEW marker only, with `--color-button-text`.\n- `--color-button` #4f9412 green with `--fill-button`, white bold text and `--shadow-text`: the primary button and the brand tile. `--color-button-secondary` #fff6d6 with `--fill-button-secondary` and `--color-button-secondary-text` in a `--color-border-strong` outline: every other button, the tabs control and page numbers.\n- Borders: 1px `--color-border` #e3d5a3 for boxes, `--color-border-muted` #f0e6c0 between rows, `--color-border-strong` #c9a23c for the sheet, secondary buttons and the dialog; `--border-width-strong` 2px for the featured plan, the dialog and the rule under a section label or sidebar title.\n- `--color-notice` with an accent border for notices and `mark`; `--color-danger` on `--color-danger-surface` for errors; `--color-danger` also fills the destructive button and the danger badge. `--color-success` and `--color-warning` are status badge fills, with `--color-button-text` and `--color-accent-text` on them.\n- Radii: `--radius-control` 6px (buttons, inputs, tabs control, page numbers), `--radius-panel` 8px (plan boxes, panels, table, list, notices, dialog), `--radius-pill` 9px (badges), `--radius-page` 10px (the sheet).\n- Shadows are hard edges, not blurs: `--shadow-panel` (2px under the sheet, plan boxes and panels), `--shadow-control` (1px under buttons and the tabs control), `--shadow-control-hover` 2px, `--shadow-control-pressed` inset. Only `--shadow-dialog` is soft. `--transition` is none.\n- One-off shades are `color-mix()` over tokens: the button outlines (`--color-button` or `--color-danger` mixed with `--color-shadow`), the fade of the destructive button (`--color-danger` mixed with `--color-surface`), and the translucent box in the hero.\n\n## Components\n\n- `.ds-page`: on ``. Sets the page fill, base font and colour. Content goes in `.ds-page__wrap`. `.ds-page__columns` holds `.ds-page__side`, `.ds-page__main` and `.ds-page__rail` (home page only); `.ds-page__split` holds two `.ds-page__half` columns (inner pages). `.ds-section` puts 30px above an unrelated block and `.ds-section__label` is its ruled title. `.ds-head` is a title line with `.ds-head__title` and a small right-aligned `.ds-head__more`. `.ds-section--tight` puts 20px above instead of 30px; `.ds-page__split--inside` is a split row inside a box. `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first); only the view named in the address shows.\n- `.ds-nav`: the site header. `.ds-nav__bar` is the glossy band with `.ds-nav__inner`; in it `.ds-nav__top` holds the `.ds-brand`, `.ds-nav__claim` and `.ds-nav__tools` (a bold `.ds-nav__who`, `.ds-nav__tool` links, `.ds-nav__search` with `.ds-nav__input` and a secondary button), and `.ds-nav__tabs` holds the `.ds-nav__tab` links (current: `is-current`, canvas coloured and a little taller). `.ds-nav__tabs-end` pushes one plain `.ds-nav__tab--action` link to the right end. `.ds-nav__sub` under the band holds `.ds-nav__topics` of `.ds-nav__topic-item` (first: `is-first`) with `.ds-nav__topic` links (current: `is-current`) and a `.ds-nav__status` sentence.\n- `.ds-brand`: the site's mark and name, at the left end of the header, linking home; one per page. `.ds-brand__mark` is a small square tile dressed like the primary button (`--fill-button` on `--color-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark drawn in `--color-button-text`; it is 1.25 times the size of the name, so it follows the type set. `.ds-brand__name` is the name in `--font-heading` at `--text-display` in `--weight-display`, coloured `--color-bar-text` for the header band it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-hero`: the getting-started box, home page only, one per page. `.ds-hero__top` holds `.ds-hero__main` (`.ds-hero__title`, `.ds-hero__lead`) and `.ds-hero__action` (one `.ds-button--large` and a small `.ds-hero__note`). `.ds-hero__steps` under a rule is three `.ds-hero__step` columns, each a round `.ds-hero__number` beside `.ds-hero__step-body` with `.ds-hero__step-title` and `.ds-hero__step-text`; `is-done` turns the numeral green and greys the title.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`: a pale rounded strip with `.ds-page-header__main` (`.ds-page-header__title`, the page's h1, and one `.ds-page-header__text` line) and `.ds-page-header__actions` on the right with one primary button and at most one secondary.\n- `.ds-stat`: one figure tile; four of them sit in a `.ds-stats` row. Each is a rounded box with a centred 28px `.ds-stat__number`, a small `.ds-stat__label` and an optional bold `.ds-stat__note`. For the totals of an album, a group or an account, under the page header.\n- `.ds-prose`: long text: h1, h2 (steel), h3, p, ul, ol, code, strong, mark and links inside it are styled. For help text beside a form and for about pages.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. Variants `.ds-link--title` (bold, for names and titles) and `.ds-link--quiet` (grey, for menu entries). `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action: black two-step gloss, white bold 12px, 24px tall, 5px corners. Variants `.ds-button--secondary` (pale grey; the usual button), `.ds-button--danger` (the gloss in `--color-danger`; only for an action that removes something, usually the confirming button of a dialog) and `.ds-button--large` (38px tall, 16px text, 10px corners; the hero action only). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row of them; `.ds-buttons--bar` is that row as the toolbar above a table in its box. One primary button per box, panel or dialog.\n- `.ds-form`: labels above their fields. `.ds-form__row` holds a bold `.ds-form__label` and a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea` at full width; `.ds-form__pair` puts two short fields side by side; `.ds-form__hint` and `.ds-form__error` sit under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule holds the primary button, a `.ds-form__or` word and a cancel link. A form sits in a `.ds-box--flush` with a `.ds-box__title`.\n- `.ds-table`: data table in a 1px frame inside a `.ds-box`: `.ds-table__head` cells form a glossy bar with white bold text; `.ds-table__row` with `is-alt` for alternate rows; `.ds-table__cell` with a hairline above; `is-numeric` right-aligns and bolds numbers. `.ds-table__foot` under it holds a `.ds-table__summary` line and the pagination. `.ds-table--first` drops the top margin under a box title.\n- `.ds-list`: the activity stream. Each `.ds-list__item` (first: `is-first`) is a `.ds-avatar` initial square (`--2` to `--4` for the other fills) beside `.ds-list__body`: a `.ds-list__title` sentence with a bold `.ds-link--title` name and a plain link to the object, an optional quoted `.ds-list__text` on a grey strip, and a `.ds-list__meta` line with the time, one link and `.ds-list__tags` pushed to the right.\n- `.ds-panel`: a box in the right column for an invitation or an offer: rounded frame, faint fade, steel `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text`, an optional `.ds-panel__field` and `.ds-panel__actions` (a button, then `.ds-panel__more` at the right).\n- `.ds-grid`: module boxes, two by two in the middle column (`.ds-grid--four` puts four in one row on a full-width page). Each `.ds-grid__cell` (`--2` to `--4` for the other fills) has a `.ds-grid__head` strip in a block fill with a `.ds-grid__title` and a `.ds-grid__count`, then `.ds-grid__body` with a small `.ds-grid__text` and a `.ds-grid__more` link.\n- `.ds-tabs`: folder tabs that own the `.ds-box` directly under them: `.ds-tabs__tab` with rounded top corners, slate when inactive, white and joined to the box when `is-current`; `.ds-tabs__count` for a regular-weight number. `.ds-box` is the white rounded frame itself; use it alone (`.ds-box--flush`, with a `.ds-box__title`) for a form.\n- `.ds-badge`: small bold label. Base is the orange pill. Variants: `.ds-badge--count` (slate, for totals), `.ds-badge--tag` (slate with grey text, a label link), `.ds-badge--new` (brown, the word NEW typed in capitals), and the status variants `.ds-badge--success` (green, white text), `.ds-badge--warning` (yellow, black text) and `.ds-badge--danger` (red, white text), one per table row. `.ds-badges` lays several out in a row; `.ds-badges--key` is that row as a small grey key under a table, above a rule, each badge followed by a few words.\n- `.ds-sidebar`: a block of the left or right column: a ruled steel `.ds-sidebar__title`, then a `.ds-sidebar__list` of `.ds-sidebar__item` rows, each a quiet link with a right-aligned `.ds-sidebar__count`; the current row is `is-current` (slate strip, bold, text in `.ds-sidebar__here`); `.ds-sidebar__more` is a small closing link. A sidebar block may instead hold `.ds-cloud`, a tag cloud of `.ds-cloud__tag` links in four sizes (`--2`, `--3`, `--4`), or `.ds-rank`, a numbered list of `.ds-rank__item` rows (first: `is-first`) with `.ds-rank__number`, `.ds-rank__body` and `.ds-rank__meta`. `.ds-me` above the menu is the member card: `.ds-me__face`, `.ds-me__name`, `.ds-me__text`.\n- `.ds-notice`: one-line message: pale yellow in a grey hairline with a bold `.ds-notice__title`. Variant `.ds-notice--error`: red on pale pink with a red border.\n- `.ds-pagination`: a row of small rounded boxes: `.ds-pagination__link`, current page `is-current` (orange), unavailable `is-disabled`, `.ds-pagination__gap` for an ellipsis. It sits at the right end of `.ds-table__foot`.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` (an arrow) and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a white box in a 3px grey frame with a slate `.ds-dialog__title` strip (holding `.ds-dialog__close`), `.ds-dialog__body` with `.ds-dialog__text`, and `.ds-dialog__actions` with the buttons right-aligned. Sits on `.ds-dialog__backdrop`, a translucent dim layer.\n- `.ds-empty`: a pale rounded box with a bold `.ds-empty__title`, a `.ds-empty__text` line and one button. `.ds-empty--inset` drops the border and fill when it sits inside a `.ds-box`.\n- `.ds-footer`: full viewport width, inverted: `.ds-footer__inner` holds `.ds-footer__cols`, four columns each with a `.ds-footer__title` and a `.ds-footer__list` of `.ds-footer__item` entries with `.ds-footer__link`, then a ruled `.ds-footer__legal` line.\n- `.ds-avatar`: the square that stands for a member who has no picture: `--size-avatar` 32px, one bold initial on a block fill (`.ds-avatar--2` to `--4` for the other fills), hairline border, 5px corners. It leads every `.ds-list__item` of the stream and of a comment list. Give a member the same fill wherever they appear.\n- `.ds-menu`: a drop-down under a tab of the header, for the albums and pages reached most from it. The `li` carries `.ds-menu`, its tab gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last row. A white hairline box with rounded lower corners and the dialog's short shadow, opening on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-tooltip`: a small round question mark (`.ds-tooltip__trigger`) that shows `.ds-tooltip__tip`, a pale speech bubble in the notice colours, above it on hover or focus. It follows a `.ds-sidebar__title` or a form label, for one sentence of explanation; never for an error or anything that must be read.\n- `.ds-progress`: how much of a quota is used: a `.ds-progress__label` line (the count in `.ds-progress__name`, the period on the right) over `progress.ds-progress__bar`, a pill-shaped track filled with the glossy button fill. Variants of the bar: `.ds-progress__bar--success`, `--warning` (nearly full), `--danger` (full). In a `.ds-panel` above its text, or under a file field while files travel.\n\n## Never\n\n- `row-gap <= 20px`: stream and table rows touch, divided by a rule.\n- `block-gap <= 30px`: sections are at most 30px apart.\n- `content-width <= 920px`: all text stays inside the 920px working width; the header band and footer may span the viewport but their text does not.\n- `palette-colours <= 28`: crimson in four steps, greys, ivory, plus the status green and amber; no blue.\n- `font-size <= 30px`: the hero title and the prices are the largest text.\n- `font-size >= 11px`: nothing is smaller than the meta size.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 2`: Trebuchet for everything, a monospace for inline code.\n- `line-height <= 1.45`: body text is set at 1.45.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 60%`: titles, navigation, tabs and sidebar links are not underlined.\n- `border-radius <= 10px`: corners are 6, 8, 9 or 10px.\n- `border-width <= 2px`: hairlines, and 2px for the featured plan, the dialog and heading rules.\n- `box-shadow-blur <= 8px`: shadows are hard edges; only the dialog has a short blur.\n- `gradient-fills <= 30%`: fades are kept to the page, strip, hero, buttons, table head, stats band, panels and badges.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything a member owns and counts is an entry in the left `.ds-sidebar` menu; anything that happened is a row of the `.ds-list` stream; anything that invites or sells is a `.ds-panel` in the right column; a collection with its own name and number is a `.ds-grid` module. On an inner page a new view of the object is a tab on the `.ds-box`, and a new block is a half of a `.ds-page__split` row. A new framed box takes `--color-surface`, a 1px `--color-border` and `--radius-panel`; a new strip takes `--color-surface-strong` with `--color-heading` text or one `--color-fill-*`. Keep gloss to the header band, the table head and the primary button. Keep text at `--text-base`, `--text-ui` or `--text-small`, and make any extra shade with `color-mix()` over existing colour tokens rather than adding a colour.\n", "components.css": ":root {\n --size-page: 960px;\n --size-pad: 20px;\n --size-side: 180px;\n --size-rail: 220px;\n --size-gutter: 20px;\n --size-control: 24px;\n --size-control-large: 38px;\n --size-search: 160px;\n --size-step: 28px;\n --size-avatar: 32px;\n --size-face: 48px;\n --size-textarea: 70px;\n --size-dialog: 380px;\n --space-1: 2px;\n --space-2: 5px;\n --space-3: 10px;\n --space-4: 15px;\n --space-5: 20px;\n --space-6: 30px;\n --size-drop: 190px;\n --size-tip: 170px;\n --size-meter: 12px;\n}\n\n/* shell: a full-width header band, then one sheet in the canvas colour */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-4) var(--size-pad) var(--space-6);\n background: var(--color-canvas);\n}\n.ds-page__columns {\n display: grid;\n grid-template-columns: var(--size-side) minmax(0, 1fr) var(--size-rail);\n align-items: start;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__side,\n.ds-page__main,\n.ds-page__rail { min-width: 0; }\n.ds-page__split {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: start;\n gap: var(--size-gutter);\n margin: var(--space-5) 0 0;\n}\n.ds-page__split--inside { margin-top: var(--space-3); }\n.ds-page__half { min-width: 0; }\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-5); }\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-section__label {\n margin: 0 0 var(--space-3);\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0 0 var(--space-3);\n}\n.ds-head__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-head__more {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* nav: glossy band, wordmark and account line on top, tabs standing on its lower edge */\n.ds-nav { margin: 0; }\n.ds-nav__bar {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n}\n.ds-nav__inner {\n width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--size-pad);\n}\n.ds-nav__top {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n padding: var(--space-4) 0 var(--space-3);\n}\n.ds-brand {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.25);\n height: calc(var(--text-display) * 1.25);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__claim {\n color: var(--color-bar-text);\n font-size: var(--text-small);\n opacity: 0.85;\n}\n.ds-nav__tools {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 0 auto;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__who { font-weight: var(--weight-bold); }\n.ds-nav__tool {\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__tool:hover,\n.ds-nav__tool.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n}\n.ds-nav__input {\n width: var(--size-search);\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-2);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 55%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__input::placeholder { color: var(--color-text-muted); opacity: 1; }\n.ds-nav__input:focus,\n.ds-nav__input.is-focus { outline: var(--focus-ring); }\n.ds-nav__tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__tab {\n display: block;\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: color-mix(in srgb, var(--color-bar-text) 20%, transparent);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-h3);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n}\n.ds-nav__tab:hover,\n.ds-nav__tab.is-hover { background: color-mix(in srgb, var(--color-bar-text) 34%, transparent); }\n.ds-nav__tab.is-current {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#album:target) .ds-nav__tab[href=\"#album\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#settings:target) .ds-nav__tab[href=\"#album\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#comments:target) .ds-nav__tab[href=\"#comments\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-page:has(#upload:target) .ds-nav__tab[href=\"#upload\"] {\n padding-top: calc(var(--space-2) + var(--space-1));\n background: var(--color-canvas);\n color: var(--color-heading);\n}\n.ds-nav__tab--action {\n margin-left: auto;\n background: transparent;\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration);\n}\n.ds-nav__tabs-end { margin-left: auto; }\n.ds-nav__sub {\n display: flex;\n align-items: center;\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-3) var(--size-pad) 0;\n background: var(--color-canvas);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-nav__topics {\n display: flex;\n align-items: center;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__topic-item {\n padding: 0 var(--space-3);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n line-height: 1;\n}\n.ds-nav__topic-item.is-first { padding-left: 0; border-left: 0; }\n.ds-nav__topic {\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__topic:hover,\n.ds-nav__topic.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-nav__topic.is-current {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__topic[href=\"#home\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#home:target) .ds-nav__topic[href=\"#home\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#album:target) .ds-nav__topic[href=\"#album\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#comments:target) .ds-nav__topic[href=\"#comments\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#settings:target) .ds-nav__topic[href=\"#settings\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-page:has(#upload:target) .ds-nav__topic[href=\"#upload\"] {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-nav__status { margin: 0 0 0 auto; }\n\n/* hero: the getting-started box. Title, lead and the big button, then three numbered steps */\n.ds-hero {\n margin: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n background: var(--color-fill-1);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__top {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-hero__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__action {\n flex: 0 0 auto;\n text-align: center;\n}\n.ds-hero__note {\n margin: var(--space-2) 0 0;\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-hero__steps {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n margin: 0;\n padding: var(--space-4) var(--space-5);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-hero__step {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n}\n.ds-hero__number {\n flex: 0 0 var(--size-step);\n width: var(--size-step);\n height: var(--size-step);\n border-radius: 50%;\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-step) - var(--figure-shift) * 2);\n text-align: center;\n font-family: var(--font-heading);\n padding-bottom: calc(var(--figure-shift) * 2);\n}\n.ds-hero__step-body { min-width: 0; }\n.ds-hero__step-title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__step-text {\n margin: var(--space-1) 0 0;\n font-size: var(--text-small);\n}\n.ds-hero__step.is-done .ds-hero__number {\n background: var(--color-success);\n color: var(--color-button-text);\n}\n.ds-hero__step.is-done .ds-hero__step-title { color: var(--color-text-muted); }\n\n/* page header: a pale strip with the title on the left and the actions on the right */\n.ds-page-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 0;\n padding: var(--space-4) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n}\n.ds-page-header__main {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-bar-alt-text);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text { margin: var(--space-1) 0 0; }\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: separate figure tiles in one row */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-stat {\n padding: var(--space-3) var(--space-3) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n text-align: center;\n}\n.ds-stat__number {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-stat__label {\n display: block;\n margin-top: var(--space-1);\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n}\n.ds-stat__note {\n display: block;\n color: var(--color-heading-alt);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n\n/* tabs: folder tabs that own the box under them */\n.ds-tabs {\n display: flex;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3);\n list-style: none;\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(0px - var(--border-width));\n padding: var(--space-2) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n opacity: 0.8;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { opacity: 1; }\n.ds-tabs__tab.is-current {\n position: relative;\n border-bottom-color: var(--color-surface);\n background: var(--color-surface);\n opacity: 1;\n}\n.ds-tabs__count { font-weight: var(--weight-body); }\n.ds-box {\n margin: 0;\n padding: var(--space-2) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n}\n.ds-box--flush { padding: var(--space-4); }\n.ds-box__title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-4) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-3);\n padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose mark {\n background: var(--color-notice);\n color: var(--color-notice-text);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title {\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link); }\n\n/* buttons */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-buttons--bar { margin: var(--space-2) 0 var(--space-3); }\n.ds-button {\n display: inline-block;\n height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n border-radius: var(--radius-control);\n background: var(--fill-button);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--color-button);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n height: var(--size-control-large);\n padding: 0 var(--space-5);\n border-radius: calc(var(--radius-control) + var(--radius-control));\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--secondary {\n border-color: var(--color-border-strong);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-link-quiet);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-shadow));\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 30%) 0, var(--color-danger) 55%, color-mix(in srgb, var(--color-danger), var(--color-shadow) 14%) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-button-text) 42%) 0, color-mix(in srgb, var(--color-danger), var(--color-button-text) 10%) 55%, var(--color-danger) 100%);\n color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n\n/* form: labels above their fields */\n.ds-form { margin: 0; }\n.ds-form__row { margin: 0 0 var(--space-3); }\n.ds-form__pair {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-form__label {\n display: block;\n margin: 0 0 var(--space-1);\n color: var(--color-text);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n display: block;\n width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n background: var(--fill-input);\n color: var(--color-input-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__select { padding: 0 var(--space-1); }\n.ds-form__textarea {\n height: var(--size-textarea);\n resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n outline: var(--focus-ring);\n border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n border-color: var(--color-border);\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n.ds-form__error {\n margin: var(--space-1) 0 0;\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__or {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* table */\n.ds-table {\n width: 100%;\n margin: var(--space-2) 0 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-collapse: collapse;\n border-spacing: 0;\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-table--first { margin-top: 0; }\n.ds-table__head {\n padding: var(--space-2) var(--space-3);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-align: left;\n text-transform: var(--ui-transform);\n}\n.ds-table__cell {\n padding: var(--space-2) var(--space-3);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface);\n color: var(--color-text);\n vertical-align: middle;\n}\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__foot {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-3) 0 0;\n}\n.ds-table__summary {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* list: the activity stream. A coloured initial square, one line of who did what, a quoted line, meta */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item.is-first { border-top: 0; }\n.ds-avatar {\n flex: 0 0 var(--size-avatar);\n width: var(--size-avatar);\n height: var(--size-avatar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-fill-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-avatar) - var(--border-width) - var(--border-width));\n text-align: center;\n}\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--3 { background: var(--color-fill-3); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-list__body {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-list__title {\n margin: 0;\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-list__text {\n margin: var(--space-2) 0 0;\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\n background: var(--color-surface-alt);\n}\n.ds-list__meta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-list__tags {\n display: flex;\n gap: var(--space-1);\n margin-left: auto;\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) + var(--space-2));\n text-decoration: none;\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--count {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-badge--tag {\n background: var(--color-surface-strong);\n color: var(--color-link-quiet);\n font-weight: var(--weight-body);\n}\n.ds-badge--tag:hover,\n.ds-badge--tag.is-hover { color: var(--color-link); }\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-button-text);\n}\n.ds-badge--success {\n background: var(--color-success);\n color: var(--color-button-text);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n color: var(--color-button-text);\n}\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n}\n.ds-badges--key {\n gap: var(--space-2) var(--space-4);\n margin: var(--space-3) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* grid: two by two module boxes, each with a coloured head strip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-3);\n margin: 0;\n}\n.ds-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n.ds-grid__cell {\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n overflow: hidden;\n}\n.ds-grid__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__head { background: var(--color-fill-2); }\n.ds-grid__cell--3 .ds-grid__head { background: var(--color-fill-3); }\n.ds-grid__cell--4 .ds-grid__head { background: var(--color-fill-4); }\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-grid__count {\n color: var(--color-link-quiet);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-grid__body { padding: var(--space-2) var(--space-3) var(--space-3); }\n.ds-grid__text {\n margin: 0 0 var(--space-2);\n font-size: var(--text-small);\n}\n.ds-grid__more {\n margin: 0;\n font-size: var(--text-small);\n}\n\n/* panel: the right rail box */\n.ds-panel {\n margin: 0 0 var(--space-5);\n padding: var(--space-3) var(--space-4) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__field { margin: 0 0 var(--space-2); }\n.ds-panel__actions {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-panel__more { margin-left: auto; font-size: var(--text-small); }\n\n/* sidebar: the left menu, the member card and the tag cloud */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n border-radius: var(--radius-control);\n}\n.ds-sidebar__item.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-sidebar__here { color: var(--color-heading); }\n.ds-sidebar__count {\n margin-left: auto;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n white-space: nowrap;\n}\n.ds-sidebar__item.is-current .ds-sidebar__count { color: var(--color-heading); }\n.ds-sidebar__more {\n margin: var(--space-2) 0 0;\n font-size: var(--text-small);\n}\n.ds-me {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n}\n.ds-me__face {\n flex: 0 0 var(--size-face);\n width: var(--size-face);\n height: var(--size-face);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-fill-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-bold);\n line-height: calc(var(--size-face) - var(--border-width) - var(--border-width));\n text-align: center;\n}\n.ds-me__body { min-width: 0; }\n.ds-me__name {\n margin: 0;\n color: var(--color-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-me__text {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-cloud {\n margin: var(--space-2) 0 0;\n padding: 0;\n line-height: 1.5;\n}\n.ds-cloud__tag {\n margin-right: var(--space-1);\n color: var(--color-link);\n font-size: var(--text-small);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-cloud__tag:hover,\n.ds-cloud__tag.is-hover { text-decoration: var(--link-decoration-hover); }\n.ds-cloud__tag--2 { font-size: var(--text-base); }\n.ds-cloud__tag--3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }\n.ds-cloud__tag--4 { font-size: var(--text-h2); font-weight: var(--weight-bold); }\n.ds-rank {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-rank__item {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-rank__item.is-first { border-top: 0; }\n.ds-rank__number {\n flex: 0 0 auto;\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-rank__body { min-width: 0; }\n.ds-rank__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notice {\n margin: var(--space-3) 0 0;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n border-color: var(--color-danger);\n background: var(--color-danger-surface);\n color: var(--color-danger);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-pagination__link {\n display: block;\n padding: var(--space-1) var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n background: var(--color-surface);\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link); }\n.ds-pagination__link.is-current {\n border-color: var(--color-border-strong);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-pagination__link.is-disabled {\n border-color: var(--color-border-muted);\n color: var(--color-disabled-text);\n font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a framed box with a grey title strip */\n.ds-dialog__backdrop {\n display: flex;\n justify-content: center;\n padding: var(--space-5);\n border-radius: var(--radius-panel);\n background: var(--color-overlay);\n}\n.ds-dialog {\n width: var(--size-dialog);\n max-width: 100%;\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-dialog__title {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-dialog__close {\n color: var(--color-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-decoration: var(--link-decoration);\n}\n.ds-dialog__body { padding: var(--space-3); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-2);\n padding: 0 var(--space-3) var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\n text-align: center;\n}\n.ds-empty--inset {\n margin: var(--space-2) 0 0;\n border: 0;\n background: transparent;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-link-quiet);\n font-size: var(--text-ui);\n}\n\n/* footer: an inverted band with four link columns and a line of small print */\n.ds-footer {\n margin: 0;\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-footer__inner {\n width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) var(--size-pad);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--size-gutter);\n}\n.ds-footer__title {\n margin: 0 0 var(--space-2);\n color: var(--color-inverse-text);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-footer__list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-footer__item { margin: 0 0 var(--space-1); }\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: var(--link-decoration-quiet);\n opacity: 0.85;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n opacity: 1;\n}\n.ds-footer__legal {\n margin: var(--space-4) 0 0;\n padding: var(--space-3) 0 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 25%, transparent);\n font-size: var(--text-small);\n opacity: 0.85;\n}\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n display: inline-block;\n width: calc(var(--text-small) * 0.6);\n height: calc(var(--text-small) * 0.36);\n background: currentColor;\n clip-path: polygon(0 0, 100% 0, 50% 100%);\n margin-left: var(--space-1);\n font-size: var(--text-small);\n vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n width: var(--size-drop);\n margin: 0;\n padding: var(--space-1) 0;\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface);\n box-shadow: var(--shadow-dialog);\n list-style: none;\n text-align: left;\n text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n margin-top: var(--space-1);\n padding-top: var(--space-1);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* tooltip: a question mark that shows a speech-bubble hint on hover or focus */\n.ds-tooltip {\n display: inline-block;\n position: relative;\n vertical-align: baseline;\n}\n.ds-tooltip__trigger {\n display: inline-block;\n width: calc(var(--text-small) * 1.5);\n height: calc(var(--text-small) * 1.5);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 50%;\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: calc(var(--text-small) * 1.5 - var(--border-width) - var(--border-width));\n text-align: center;\n text-decoration: none;\n text-shadow: none;\n cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus { outline: var(--focus-ring); }\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-3));\n left: calc(0px - var(--space-3));\n z-index: 30;\n width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n border-radius: var(--radius-control);\n background: var(--color-notice);\n box-shadow: var(--shadow-panel);\n color: var(--color-notice-text);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n text-shadow: none;\n white-space: normal;\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: calc(var(--space-3) + var(--text-small) * 0.75 - var(--space-2));\n width: calc(var(--space-2) * 2);\n height: calc(var(--space-2) * 2);\n margin-top: calc(0px - var(--space-2));\n border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n background: var(--color-notice);\n transform: rotate(45deg);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip { display: block; }\n\n/* progress: a glossy bar in a track, with a line saying what it measures */\n.ds-progress { margin: 0 0 var(--space-3); }\n.ds-progress__label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-progress__name { color: var(--color-text); }\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-meter);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n overflow: hidden;\n appearance: none;\n}\n.ds-progress__bar::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress__bar::-webkit-progress-value { background: var(--fill-button); }\n.ds-progress__bar::-moz-progress-bar { background: var(--fill-button); }\n.ds-progress__bar--success::-webkit-progress-value { background: var(--color-success); }\n.ds-progress__bar--success::-moz-progress-bar { background: var(--color-success); }\n.ds-progress__bar--warning::-moz-progress-bar { background: var(--color-warning); }\n.ds-progress__bar--danger::-moz-progress-bar { background: var(--color-danger); }\n\n/* where the added pieces sit in this layout */\n.ds-sidebar__title .ds-tooltip { margin-left: var(--space-1); }\n.ds-panel .ds-progress { margin-bottom: var(--space-3); }\n", "specimen.html": "\n\n\n\nchronoskin: Web 2.0 gloss member dashboard specimen\n\n\n\n\n\n
\n
\n
\n
\n chronoskin\n photo albums you keep with friends\n
\n Hello, maren_holt\n Album settings\n Sign out\n
\n \n \n
\n
\n
\n \n
\n
\n
\n \n

You have used 38 of 200 uploads this month.

\n
\n
\n\n
\n\n
\n\n
\n
\n
\n

Welcome back, Maren. Two steps left.

\n

Your first album is up. Invite the people who were there and they can add their own pictures.

\n
\n
\n Invite your friends\n

or hide this box

\n
\n
\n
    \n
  1. \n 1\n
    \n

    Upload some photos

    \n

    Done: 38 pictures in the album Harbour weekend.

    \n
    \n
    2. \n
  2. \n 2\n
    \n

    Invite your friends

    \n

    Send a link by mail. They need no account to look.

    \n
    \n
    3. \n
  3. \n 3\n
    \n

    Label what you see

    \n

    A few words on each picture and you will find it again.

    \n
    \n
    4. \n
\n
\n\n
\n\n
\n
\n M\n
\n

maren_holt

\n

member since May

\n
\n
\n\n
\n

Your things

\n \n
\n\n
\n

Your labels ?The more photos carry a label, the larger it is written.

\n

\n allotment\n autumn\n boats\n bridges\n coast\n dogs\n evening\n ferry\n fog\n harbour\n kites\n market\n night\n picnic\n rain\n rooftops\n sea\n signs\n snow\n trains\n windows\n

\n

All 64 labels

\n
\n\n
\n

Online now

\n \n
\n
\n\n
\n\n
\n

What your contacts have been doing

\n

feed

\n
\n\n \n
\n \n
\n\n
\n
\n

Your groups

\n

find more groups

\n
\n
\n
\n

Small boats

212 members
\n
\n

Dinghies, skiffs and anything that fits on a trailer. 9 new photos today.

\n

Open the pool

\n
\n
\n
\n

Fog and mist

1,480 members
\n
\n

Mornings when the far bank is missing. 31 new photos today.

\n

Open the pool

\n
\n
\n
\n

Allotment diaries

96 members
\n
\n

A year on one plot, a picture a week. 2 new photos today.

\n

Open the pool

\n
\n
\n
\n

Painted signs

540 members
\n
\n

Shop fronts, market stalls and chalk boards. 14 new photos today.

\n

Open the pool

\n
\n
\n
\n
\n\n
\n\n
\n
\n

Bring a friend

\n
\n

Albums are better with the other half of the pictures. Type an address and we send the link.

\n

\n
\n Send invite\n How it works\n
\n
\n
\n\n
\n

Most looked at this week

\n
    \n
  1. 1Ferry in the fogby you, 1,874 views
    2. \n
  2. 2The empty fairgroundby oskar.lind, 1,622 views
    3. \n
  3. 3Kites over the estuaryby ines_v, 1,151 views
    4. \n
  4. 4Rail yard at dawnby tobias_r, 1,047 views
    5. \n
\n
\n\n
\n

Room for more

\n
\n
\n

38 of 200 uploadsthis month

\n 38 of 200\n
\n

A paid account has no monthly limit and keeps the full-size files.

\n
\n See the plans\n
\n
\n
\n
\n\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Your photos
    4. \n
  4. →
    5. \n
  5. Harbour weekend
    6. \n
\n\n
\n
\n

Harbour weekend

\n

An album of 38 photos shared with 6 people, started on 4 October.

\n
\n
\n Share album\n Add photos\n
\n
\n\n \n\n
\n \n
\n
\n Add photos\n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PhotoLabelsAdded bySeen byCommentsViews
Ferry in the fog NEWferry, fog, seamaren_holtEveryone01,874
Rooftops after rainrooftops, rainmaren_holtEveryone0312
Net menders on the slipharbour, boatsoskar.lindContacts only0141
Harbour office, closedsigns, windowsines_vHidden083
\n
\n

Showing 1 to 4 of 38 photos

\n \n
\n

\n Everyone open to all\n Contacts only your 23 contacts\n Hidden just you\n NEW added today\n 38 in the album\n Pro member\n harbour fog labels\n

\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Harbour weekend
    4. \n
  4. →
    5. \n
  5. Comments
    6. \n
\n\n
\n
\n

Harbour weekend

\n

What the people in this album have written under its photos.

\n
\n
\n Back to the photos\n
\n
\n\n
\n \n
\n
\n

No comments yet

\n

Nobody has written under this album. Invite the people who were there.

\n Invite someone\n
\n
\n
\n\n
\n
\n
\n

Comments on your other albums

\n \n
\n
\n
\n
\n

Ask for the first one

\n
\n

People write more when they are asked. Send the album to someone who was there.

\n

\n
\n Send the album\n Who can comment?\n
\n
\n
\n
\n

People in this album

\n \n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Harbour weekend
    4. \n
  4. →
    5. \n
  5. Settings
    6. \n
\n\n
\n
\n

Harbour weekend

\n

The name, the date and who may see and add to this album.

\n
\n
\n Back to the photos\n
\n
\n\n
\n \n
\n
\n
\n

Album details

\n
\n
\n \n \n
\n
\n
\n \n \n

Write the date as 4 Oct 2007.

\n
\n
\n \n \n
\n
\n
\n \n \n

Shown under the album name. Plain text only.

\n
\n
\n \n
\n
\n \n or\n cancel\n
\n
\n
\n
\n
\n

Sharing an album

\n

Every album has one address. Anyone you send it to can look without signing up, and only people you invite can add to it. You can change this at any time on the photos tab.

\n

Who sees what

\n

A photo is as open as its album unless you say otherwise. Hidden photos stay in the count but show to nobody else.

\n

Three things to know

\n
    \n
  • Labels are shared: a word you add is a word everybody can search.
    • \n
  • Full-size files are kept for thirty days on a free account.
    • \n
  • An album feed lives at the album address with /feed on the end.
    • \n
\n
\n

\n The photos\n The comments\n Add photos\n Your home page\n

\n
\n
\n
\n
\n\n
\n
\n
\n

Delete this album

\n
\n

Deleting removes the album, its 38 photos and everything written under them. It cannot be taken back, so we ask once more before it happens.

\n
\n \n Hide photos instead\n
\n
\n
\n
\n
\n
\n
\n

Delete this album? close

\n
\n

All 38 photos and their comments go with it. Pictures your friends added stay in their own accounts.

\n
\n
\n Keep it\n \n
\n
\n
\n
\n
\n\n
\n\n
\n\n
    \n
  1. Home
    2. \n
  2. →
    3. \n
  3. Your photos
    4. \n
  4. →
    5. \n
  5. Upload photos
    6. \n
\n\n
\n
\n

Upload photos

\n

Pick the files, say where they go, and they are in the album a minute later.

\n
\n
\n Back to the album\n
\n
\n\n
\n

Uploaded. 12 photos were added to Harbour weekend and your contacts can see them now.

\n

Two files were skipped. They are larger than the 10 MB limit of a free account.

\n
\n\n
\n
\n
\n

The last batch

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FileResultSize
quay-morning-01.jpgAdded2.4 MB
quay-morning-02.jpgAdded3.1 MB
net-menders.jpgNeeds a label1.8 MB
harbour-panorama.tifToo large41.0 MB
ferry-full-size.tifToo large28.6 MB
\n
\n

Showing 5 of 14 files, 12 added and 2 skipped

\n See them in the album\n
\n
\n
\n\n
\n
\n

Send some more

\n
\n
\n \n \n

Up to 10 MB each. You have used 38 of 200 uploads this month.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n
\n
\n Upload 3 photos\n or\n cancel\n
\n
\n
\n
\n
\n\n
\n\n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.web-2-0-gloss.portal.s04.p03.t05.u05\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"web-2-0-gloss\",\n \"years\": [\n 2005,\n 2009\n ]\n },\n \"archetype\": \"portal\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w2-4355\",\n \"short\": \"v1-w2-4355\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #efefef;\n --color-surface-strong: #cccccc;\n --color-bar: #d01f3c;\n --color-bar-text: #ffffff;\n --color-bar-alt: #dddddd;\n --color-bar-alt-text: #545454;\n --color-inverse: #545454;\n --color-inverse-text: #ffffff;\n --color-text: #545454;\n --color-text-muted: #999999;\n --color-heading: #545454;\n --color-heading-alt: #7e1325;\n --color-link: #d01f3c;\n --color-link-quiet: #545454;\n --color-link-visited: #888888;\n --color-link-hover: #da546a;\n --color-link-active: #7e1325;\n --color-border: #bbbbbb;\n --color-border-strong: #a0a0a0;\n --color-border-muted: #dddddd;\n --color-accent: #f5b5b5;\n --color-accent-text: #7e1325;\n --color-accent-alt: #da546a;\n --color-fill-1: #efefef;\n --color-fill-2: #fffff5;\n --color-fill-3: #dddddd;\n --color-fill-4: #efefef;\n --color-button: #545454;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #efefef;\n --color-button-secondary-text: #545454;\n --color-input: #ffffff;\n --color-input-text: #545454;\n --color-input-border: #a0a0a0;\n --color-disabled: #efefef;\n --color-disabled-text: #999999;\n --color-danger: #b31231;\n --color-danger-surface: #f5b5b5;\n --color-success: #257f03;\n --color-warning: #ffa100;\n --color-notice: #fffff5;\n --color-notice-text: #545454;\n --color-focus: #869ab7;\n --color-shadow: #545454;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n --font-heading: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n --font-ui: \"Trebuchet MS\", Helvetica, Arial, sans-serif;\n --font-mono: Consolas, \"Lucida Console\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 30px;\n --text-h1: 24px;\n --text-h2: 18px;\n --text-h3: 15px;\n --line-body: 1.45;\n --line-heading: 1.15;\n --line-display: 1.05;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 6px;\n --radius-panel: 8px;\n --radius-pill: 9px;\n --radius-page: 10px;\n --shadow-panel: 0 2px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent);\n --shadow-control: 0 1px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --shadow-control-hover: 0 2px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --shadow-control-pressed: inset 0 1px 2px color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --shadow-dialog: 0 3px 8px color-mix(in srgb, var(--color-shadow) 40%, transparent);\n --shadow-text: 0 1px 0 color-mix(in srgb, var(--color-shadow) 45%, transparent);\n --fill-page: repeating-linear-gradient(to right, var(--color-page) 0, var(--color-page) 24px, color-mix(in srgb, var(--color-page), white 24%) 24px, color-mix(in srgb, var(--color-page), white 24%) 48px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 34%) 0, var(--color-bar) 65%, color-mix(in srgb, var(--color-bar), black 8%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, var(--color-bar-alt) 0, color-mix(in srgb, var(--color-bar-alt), white 60%) 100%);\n --fill-inverse: linear-gradient(to bottom, color-mix(in srgb, var(--color-inverse), white 10%) 0, var(--color-inverse) 30%, color-mix(in srgb, var(--color-inverse), black 18%) 100%);\n --fill-accent: linear-gradient(to bottom, color-mix(in srgb, var(--color-accent), white 50%) 0, var(--color-accent) 70%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface) 60%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 38%) 0, var(--color-button) 70%, color-mix(in srgb, var(--color-button), black 10%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 50%) 0, color-mix(in srgb, var(--color-button), white 12%) 70%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 85%) 0, var(--color-button-secondary) 70%, color-mix(in srgb, var(--color-button-secondary), black 5%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }