{ "id": "v1-w2-4231", "long_id": "v1.web-2-0-gloss.portal.s04.p02.t03.u01", "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-4231", "preview_url": "https://chrono.skin/s/v1-w2-4231/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- Two families: `--font-body` and `--font-ui` are Verdana, Geneva, sans-serif; `--font-heading` is Georgia, \"Times New Roman\", serif. `--font-mono` (\"Courier New\") for inline code only.\n- `--text-base` 12px at `--line-body` 1.4; `--text-small` 10px for meta lines, tools, tags and the footer; `--text-ui` 11px bold (`--weight-ui` 700) for buttons, the topic strip, tabs, table text and labels.\n- Headings are Georgia in regular weight (`--weight-heading` 400): `--text-h1` 20px, `--text-h2` 18px (list titles, panel and sidebar titles), `--text-h3` 14px, at `--line-heading` 1.2. Only the display size is bold: `--text-display` 28px with `--weight-display` 700 for the brand name and the hero title. `--text-large` 16px for the hero lead and the large button.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- Every link is underlined: `--link-decoration`, `--link-decoration-hover` and `--link-decoration-quiet` are all underline, so titles, navigation, tabs and sidebar entries carry the line too.\n- `--color-bar` #d01f3c (crimson) with white `--color-bar-text` fills the site bar, the table head and the dialog title; `--color-bar-alt` #dddddd (light grey) is the topic strip and the footer link strip, with `--color-bar-alt-text` #545454.\n- Everything neutral is a grey of one scale: `--color-text`, `--color-heading`, `--color-link-quiet` and `--color-inverse` are #545454, `--color-text-muted` #999999, `--color-surface-alt` #efefef (alternate rows, panel fade, empty state), `--color-surface-strong` #cccccc (title strips, tags). There is no black.\n- `--color-link` #d01f3c, the bar's crimson; hover #da546a, active #7e1325, visited #888888 (a visited link goes grey). `--color-heading-alt` #7e1325 (dark crimson) for panel titles, sidebar groups, prose h2 and the small counts.\n- `--color-button` #545454 with white text: primary button, current page number, square count badges. It is grey on purpose, so that crimson stays with the bar and the links. `--color-button-secondary` #efefef with #545454 text in a `--color-border-strong` #a0a0a0 outline.\n- `--color-accent` #f5b5b5 (pink) with `--color-accent-text` #7e1325: count blocks, the pill badge, the notice border. `--color-accent-alt` #da546a is the NEW marker only.\n- Borders: `--color-border` #bbbbbb for boxes and tabs, `--color-border-muted` #dddddd between rows, `--color-border-strong` and `--color-input-border` #a0a0a0.\n- Block fills are greys and one ivory: `--color-fill-1` #efefef (hero), `--color-fill-2` #fffff5 (also `--color-notice`), `--color-fill-3` #dddddd, `--color-fill-4` #efefef.\n- Status: `--color-danger` #b31231 (the darker crimson) on `--color-danger-surface` #f5b5b5; `--color-success` #257f03 and `--color-warning` #ffa100 are the era's green and amber, used only as badge fills. `--color-focus` #869ab7 (blue-grey); `--color-shadow` #545454.\n- Soft and rounded: `--radius-control` 4px (buttons, inputs, count blocks), `--radius-panel` 6px (panels, tabs, notices, dialog, stats box), `--radius-page` 8px (hero, grid cells), `--radius-pill` 10px (badges).\n- Gradients are smooth, with no hard gloss line: `--fill-bar` runs from the bar colour lightened 20% down to it darkened 15%; `--fill-button` from 28% lighter to the button colour; `--fill-button-secondary`, `--fill-accent` and `--fill-inverse` from a lighter top to the plain colour; `--fill-bar-alt` from the strip colour at the top to a lighter bottom; `--fill-panel` from `--color-surface` to `--color-surface-alt`.\n- A faint even glow instead of a drop shadow: `--shadow-panel` is 0 0 5px of `--color-shadow` at 20%, `--shadow-dialog` the same at 30%. Controls cast nothing (`--shadow-control*` none).\n- `--shadow-text` is 0 1px 1px of `--color-shadow` at 30%, on bar text only.\n- `--border-width` and `--border-width-strong` are 1px solid. `--focus-ring` is a 1px solid outline in `--color-focus`. `--transition` none.\n- In this layout: `--fill-bar` is the two-row header, the hero box (white `--color-bar-text` title and lead, a field and a secondary button on it), the table head and the dialog title. `--fill-bar-alt` is the `.ds-head` strip, with `--color-bar-alt-text` for its title and the current tab and `--color-link` for the other tabs. `--color-surface-strong` is the band across the sheet (text on it is `--color-heading`, `--color-link` and `--color-link-quiet`, never `--color-text-muted`) and the current menu entry. `--color-fill-1` to `--color-fill-4` are the picture areas of the tiles; a tile itself is `--fill-panel`. `--fill-accent` with `--color-accent-text` is the month strip of a calendar leaf and the pill badge. `--fill-inverse` with `--color-inverse-text` is the footer block. `--color-heading-alt` is the hero claim, tile meta lines, panel and menu titles. `--text-display` is the brand name and the hero title; `--text-large` the section words in the bar, the hero lead and field.\n- One-off shades are made with `color-mix()` over tokens: the bar's lower edge, the hero box outline and the current section word (`--color-bar` mixed with `--color-shadow`), the faint rules inside the bar and the footer (`--color-bar-text` or `--color-inverse-text` at 30%), the primary button outline, and the fade and outline of the destructive button (`--color-danger` mixed with `--color-surface` and `--color-inverse`).\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 <= 32`: one blue family, lime, yellow, orange, olive, dark red and warm greys; no further hues.\n- `font-size <= 28px`: the brand name and hero title are the largest text.\n- `font-size >= 10px`: meta text is 10px Verdana and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Verdana, Georgia and a monospace for inline code.\n- `line-height <= 1.4`: body text is 12px on 16.8px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links >= 85%`: every link carries an underline.\n- `border-radius <= 8px`: corners are 3, 5, 6 or 8px; tags, tables and strips are square.\n- `border-width <= 1px`: every border and rule is a 1px hairline.\n- `box-shadow = none`: no source casts a box shadow; depth comes from gloss and hairlines.\n- `gradient-fills <= 20%`: gradients are limited to the bar, table head, buttons, count blocks, tabs, panels, the stats box and the two pale strips; blocks, cells and rows are flat.\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.p02.t03.u01\",\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-4231\",\n \"short\": \"v1-w2-4231\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #faf9f7;\n --color-surface-strong: #deeaf7;\n --color-bar: #1b5790;\n --color-bar-text: #ffffff;\n --color-bar-alt: #ccdeaf;\n --color-bar-alt-text: #393733;\n --color-inverse: #393733;\n --color-inverse-text: #ffffff;\n --color-text: #393733;\n --color-text-muted: #999999;\n --color-heading: #393733;\n --color-heading-alt: #93883f;\n --color-link: #105cb6;\n --color-link-quiet: #666666;\n --color-link-visited: #578cca;\n --color-link-hover: #2e6ab1;\n --color-link-active: #a12a2a;\n --color-border: #cccccc;\n --color-border-strong: #9aafe5;\n --color-border-muted: #ddeaf6;\n --color-accent: #fff3aa;\n --color-accent-text: #393733;\n --color-accent-alt: #e45b00;\n --color-fill-1: #d5e5f5;\n --color-fill-2: #fff9d6;\n --color-fill-3: #ccdeaf;\n --color-fill-4: #f6f8fb;\n --color-button: #2e6ab1;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #105cb6;\n --color-input: #ffffff;\n --color-input-text: #393733;\n --color-input-border: #bbcdde;\n --color-disabled: #faf9f7;\n --color-disabled-text: #999999;\n --color-danger: #a12a2a;\n --color-danger-surface: #ffe8cd;\n --color-success: #325b0a;\n --color-warning: #ffa100;\n --color-notice: #fff9d6;\n --color-notice-text: #393733;\n --color-focus: #75abea;\n --color-shadow: #393733;\n --color-overlay: rgba(0, 0, 0, 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, sans-serif;\n --font-heading: Georgia, \"Times New Roman\", serif;\n --font-ui: Verdana, Geneva, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 12px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 16px;\n --text-display: 28px;\n --text-h1: 20px;\n --text-h2: 18px;\n --text-h3: 14px;\n --line-body: 1.4;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 1px;\n --border-style: solid;\n --radius-control: 3px;\n --radius-panel: 5px;\n --radius-pill: 8px;\n --radius-page: 6px;\n --shadow-panel: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: 0 -1px 0 color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 22%) 0, color-mix(in srgb, var(--color-bar), white 6%) 50%, var(--color-bar) 50%, color-mix(in srgb, var(--color-bar), black 22%) 100%);\n --fill-bar-alt: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar-alt), white 70%) 0, var(--color-bar-alt) 100%);\n --fill-inverse: var(--color-inverse);\n --fill-accent: linear-gradient(to bottom, var(--color-accent) 0, color-mix(in srgb, var(--color-accent), white 55%) 100%);\n --fill-panel: linear-gradient(to bottom, var(--color-surface) 0, var(--color-surface-alt) 100%);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 36%) 0, color-mix(in srgb, var(--color-button), white 14%) 50%, var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 12%) 100%);\n --fill-button-hover: linear-gradient(to bottom, color-mix(in srgb, var(--color-button), white 46%) 0, color-mix(in srgb, var(--color-button), white 24%) 50%, color-mix(in srgb, var(--color-button), white 10%) 50%, var(--color-button) 100%);\n --fill-button-secondary: linear-gradient(to bottom, color-mix(in srgb, var(--color-button-secondary), white 80%) 0, var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 9%) 100%);\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }