{ "id": "v1-w9-4324", "long_id": "v1.windows-9x.app.s04.p03.t02.u04", "name": "Desktop grey mail and news reader, rainy day, 1998", "era": { "slug": "windows-9x", "code": "w9", "name": "Desktop grey", "years": [ 1995, 2001 ], "description": "Web pages dressed as the desktop of 1995 to 2001: silver-grey windows with a navy title bar, raised and sunken bevels on every button and field, a small pixel-sized sans, and dialogs, tabs and tree lists borrowed from the operating system." }, "archetype": "app", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A mail and news reader in the browser, dressed as the three-pane program of a late 1990s desktop: a title bar and menu bar, a bar of flat picture keys, a dark banner naming the open folder, then a rail of shortcut icons, a folder tree, the message list with raised column heads and the open message in a white well. This pack shows it in a rainy day scheme: blue-grey windows with a slate title bar that fades in from near black, white fields, flat keys drawn with one hairline and a pale inner edge, dotted thin lines, a wide humanist sans at 11px and heavy black-weight headings. Web mail, intranet tools and news readers took this form between 1996 and 2001, when a page that worked like the program on the desktop needed no explaining.", "url": "https://chrono.skin/s/v1-w9-4324", "preview_url": "https://chrono.skin/s/v1-w9-4324/specimen.html", "files": { "STYLE.md": "# Desktop grey mail and news reader, rainy day, 1998\n\n## Summary\n\nA mail and news reader in the browser, dressed as the three-pane program of a late 1990s desktop: a title bar and menu bar, a bar of flat picture keys, a dark banner naming the open folder, then a rail of shortcut icons, a folder tree, the message list with raised column heads and the open message in a white well. This pack shows it in a rainy day scheme: blue-grey windows with a slate title bar that fades in from near black, white fields, flat keys drawn with one hairline and a pale inner edge, dotted thin lines, a wide humanist sans at 11px and heavy black-weight headings. Web mail, intranet tools and news readers took this form between 1996 and 2001, when a page that worked like the program on the desktop needed no explaining.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 776px, one window (`.ds-page__window`, also a `.ds-window`) centred on the desktop of an 800px screen with a `--space-6` margin above and below. Nothing is wider than the window and nothing reflows.\n- The specimen is one example site, a mail and news reader, of four views. `.ds-nav` (title bar and menu bar) and `.ds-footer` (status bar) are written once, inside the window and outside the views. Each view is a `.ds-view` and opens with its own `.ds-toolbar`, because the keys of a mail program change with what is open.\n- Home view, from the top: the toolbar, then `.ds-page__body` whose blocks are `--space-1` apart: the `.ds-hero` folder banner, then `.ds-page__columns`, three columns `--space-1` apart and stretched to the same height: the rail (`--size-rail`, 78px), a `.ds-pane` whose well is the `.ds-grid` of shortcut icons; the `.ds-sidebar` folder tree (`--size-tree`, 170px); and `.ds-page__main` with the message list (`.ds-table`) over the open message (`.ds-panel`, a raised head over a white well of `.ds-prose`). The `.ds-stat` row of four read-outs closes the view above the status bar.\n- Inner pages keep the title bar, menu bar, their own toolbar and the status bar, and drop the banner, the rail and the read-outs. Directly under the toolbar the `.ds-breadcrumb` is a thin band in the banner's colours; then `.ds-page__inner`, one column `--space-4` apart that opens with the `.ds-page-header` (large icon, title, one line, the action at the right, closed by a thin line) and continues with the working components. Two-column pages use `.ds-split--side` (a working column beside a `--size-side`, 214px, column of group boxes) or `.ds-split--tree` (a `--size-tree` pane beside a list view). Tabs sit directly under the page header with their `.ds-sheet`.\n- Views: `home` is the Inbox. `compose` is a new message: notices and the form beside two group boxes (recent recipients, attachments), then the row of keys. `addresses` is the address book: a tree of groups beside a search row with the status labels, the list view of people with a selected row and a total row, and the pagination keys; below, the empty state of an empty group beside the confirmation dialog. `options` is a property sheet of six tabs holding group boxes, property rows and a note, with OK, Cancel and Apply. The menu entry of the view that is showing is drawn in the selection colours; the Inbox entry is marked when the address names no view.\n- Fixed sizes: `--size-tool` 58px least width of a toolbar key and `--size-icon-tool` 24px its picture; `--size-ctl` 16px caption button and `--size-glyph` 8px glyph; `--size-icon` 32px and `--size-icon-small` 16px icons; `--size-check` 13px check box; `--size-label` 84px form label column; `--size-field` 220px text field; `--size-dialog` 330px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n- Spacing scale: `--space-0` 1px is the hairline step (tick inset, row padding in trees); `--space-1` 2px the gap between keys and the padding of bars; `--space-2` 4px the padding of keys, the gap between an icon and its word and between panes; `--space-3` 6px cell and field padding and the gap between keys in a row; `--space-4` 8px the gap between blocks inside a window and the padding of group boxes; `--space-5` 12px the padding of sheets and dialogs; `--space-6` 16px the margin of the desktop round the window and the gutter of two-column sheets.\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 and a code face. `--font-body` and `--font-ui` are a wide screen sans (Verdana, then Geneva, Arial), the face of the software company pages among the references; `--font-heading` is Times New Roman, bold for headings and regular (`--weight-display` 400) for the 28px welcome title; `--font-mono` is Lucida Console.\n- Sizes: `--text-base` and `--text-ui` 12px; `--text-small` 11px; `--text-large` 14px; `--text-h3` 14px, `--text-h2` 17px, `--text-h1` 21px; `--text-display` 28px. Line height 1.4 in text, 1.15 in headings and keys. Links in text are underlined; quiet links, labels of desktop icons and titles are not (`--link-decoration-quiet` is `none`).\n- Colour: cream windows (`--color-canvas`) and ivory wells on a slate blue desktop; forest green title bar and selection; headings forest green, second headings and icons rust; links blue with plum visited. Block colours are straw, sage, rose and pale blue. The lesser key (`--color-button-secondary`) is a shade darker than the window.\n- Surface: edges are a dark 1px line with a 2px light edge at the top left and a 2px shadow at the bottom right, 3px in all (`--border-width-strong`). The title bar is flat. The desktop (`--fill-page`) is a 4px checker of the page colour and a darker mix of it, and the inactive title bar (`--fill-inverse`) and the secondary bar (`--fill-bar-alt`: taskbar, toolbars, column heads) a 2px checker, as a 256-colour screen dithered them. A window throws a hard 3px shadow in `--color-shadow` and a dialog a 4px one, with no blur. The focus ring is a 1px dashed line.\n- This layout keeps the conventions the first layout of the era (the file manager) set for which text token sits on which fill and which edge token dresses what. They are repeated here.\n- The era's rule for which text sits on which fill, the same in every layout of the era and to be kept by every token set:\n - The desktop (`--fill-page` over `--color-page`) is always dark enough to carry `--color-bar-text`. Text written straight on the desktop (icon labels, small print) uses `--color-bar-text`.\n - The window face is `--color-canvas`; raised parts inside a window (sheets, notes, dialogs) are `--fill-panel`. Both carry `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n - A sunken well (list view, tree, document, read-out, empty list) is `--color-surface` and carries the same text and link tokens as the window face, so every palette keeps text and links legible on both. `--color-surface-alt` is the alternate row and the fill of inline code and of a pressed toolbar key; `--color-surface-strong` is a group or total row. They carry `--color-text`.\n - A title bar is `--fill-bar` with `--color-bar-text`; the title bar of a window without the focus is `--fill-inverse` with `--color-inverse-text`.\n - Menu bar, toolbar and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n - The selection (current tree row, selected table row, open menu, selected list-box row, progress blocks, the plain badge) is `--fill-accent` with `--color-accent-text`. Links and icons inside a selection inherit that colour.\n - Keys are `--fill-button` with `--color-button-text` (`--color-button-hover-text` under the pointer); the lesser key is `--fill-button-secondary` with `--color-button-secondary-text`; a disabled key is `--color-disabled` with `--color-disabled-text`. The destructive key is `--fill-button` with a bold label in `--color-danger`.\n - Fields and the path field are `--fill-input` with `--color-input-text`; links inside the path field use the link tokens, so a palette keeps `--color-input` close to `--color-surface`. `--color-input-border` outlines the check box.\n - `--color-fill-1` to `--color-fill-4` carry `--color-text` (icons drawn on them) and, in the help layout, `--color-link`.\n - Notices are `--color-notice` with `--color-notice-text` inside a line of `--color-border-strong`; the error notice is `--color-danger` on `--color-danger-surface`.\n - Status labels print `--color-success`, `--color-warning` and `--color-danger` as text and frame on `--color-surface`, so each status colour must read on the well colour; none of them is used as a fill under text.\n - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, title bars, block colours and selections.\n- Edges, the same in every layout of the era. Nothing has a border of its own except thin lines; every raised or sunken edge is a `box-shadow` token drawn inside the box:\n - `--shadow-panel`: the raised frame of a window. `--shadow-dialog`: the frame of a dialog.\n - `--shadow-control`: every raised key: buttons, toolbar keys, caption buttons, column heads, tabs and their sheet, pagination keys, the brand tile.\n - `--shadow-control-pressed`: everything sunken: fields, the path field, wells, read-outs, status cells, the check box, the progress bar, a pressed key, the current pagination key. Note that fields take the pressed token, not `--shadow-control`.\n - `--border-width-strong` is the thickness of those edges: padding that must clear an edge is written `calc(var(--border-width-strong) + var(--space-N))`.\n - `--border-width`, `--border-style` and `--color-border` draw the thin lines: group boxes, the etched rule (`--color-border` over `--color-border-muted`), toolbar separators, table row lines (`--color-surface-alt`), the frame of notices, badges and the default button (`--color-border-strong`).\n - `--color-border`, `--color-border-strong` and `--color-border-muted` are the three shades the edge tokens are built from: the mid shadow, the darkest outer line and the light edge. A palette sets them as a bevel set for its window face.\n- Not expressible by a token and written literally in `components.css`: the `dotted` guide lines of the tree (and of topic lists), the `solid` strokes of the caption-button glyphs, and `clip-path` on the current tab, which cuts off its lower edge so that it joins the sheet.\n- All radii are 0 and are still applied through `--radius-control`, `--radius-panel`, `--radius-pill` and `--radius-page`. `--shadow-text` is applied to title bars and buttons. `--transition` is `none`; `--backdrop-blur` is `0px` and nothing is translucent.\n\n## Components\n\n- `.ds-page`: on ``; the desktop. `.ds-page__window` is the one window at `--size-page`; `.ds-page__body` stacks the blocks of a view under its toolbar; `.ds-page__columns` is the rail, the folder tree and `.ds-page__main`; `.ds-page__inner` is the single column of an inner page.\n- `.ds-nav`: the chrome of the window, written once: the title bar (a `.ds-window__title` holding the `.ds-brand`, the caption and the caption buttons) and the menu bar `.ds-nav__links` of `.ds-nav__link` entries, each with one underlined `.ds-nav__key` letter. The entry of the current view (`is-current`, or one selector per view) is drawn in the selection colours, as an open menu is.\n- `.ds-brand`: the site's mark and name at the left of the title bar. `.ds-brand__mark` is the window's icon: a small tile dressed like the default button (`--fill-button`, `--color-button-text`, a line of `--color-border-strong`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG with a 3 unit stroke and square caps. `.ds-brand__name` is the name in `--font-heading` at `--text-ui`, in the bar's text colour. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-toolbar`: the bar of picture keys at the top of every view, on `--fill-bar-alt`. `.ds-toolbar__grip` is the thin raised strip at its left end. A `.ds-toolbar__button` is flat, a 24px picture over one word, at least `--size-tool` wide; it rises (`--fill-button`, `--shadow-control`) under the pointer (`is-hover`), sinks when held or switched on (`is-pressed`) and greys when `is-disabled`. `.ds-toolbar__sep` is an etched separator.\n- `.ds-hero`: the banner of the open folder, the era's page introduction: a sunken band in `--fill-inverse` with a large icon, `.ds-hero__text` (the `.ds-hero__title` at `--text-display` and the `.ds-hero__lead` on one baseline, both in `--color-inverse-text`) and `.ds-hero__action` with the default button. Never taller than one line of display text.\n- `.ds-breadcrumb`: the path of an inner page, a thin sunken band in `--fill-inverse` directly under the toolbar; links inherit `--color-inverse-text`, a `>` stands between the `.ds-breadcrumb__item`s and the last is `is-current` and bold.\n- `.ds-page-header`: the head of an inner page: a large icon, `.ds-page-header__text` with `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__lead`, and `.ds-page-header__action` with one key at the right, closed by a thin line of `--color-border`. No fill of its own.\n- `.ds-grid`: the rail of shortcuts: one column of `.ds-grid__cell` links on a sunken band of `--fill-inverse`. Each has a `.ds-grid__icon` tile (a 32px icon in `--color-text` on one of the four block colours: `--2`, `--3`, `--4` on the cell), a `.ds-grid__title` and a small `.ds-grid__text` count, both in `--color-inverse-text`; the title of the `is-current` cell is in the selection colours.\n- `.ds-sidebar`: the folder pane: `.ds-sidebar__title`, a raised strip like a column head, over `.ds-sidebar__body`, a white well holding the `.ds-tree`; a `.ds-tree__link--unread` is bold and carries its count in brackets. `.ds-pane` with `.ds-pane__title` is the same strip over any other pane.\n- `.ds-panel`: the open message: `.ds-panel__head`, a raised strip with a large icon, `.ds-panel__text` (the `.ds-panel__title` subject at `--text-h2` and the muted `.ds-panel__meta` line of sender and date) and a secondary key, over `.ds-panel__body`, a white well for the text.\n- `.ds-list`: rows on the window face: a small icon, `.ds-list__text` (a link and one line) and a right-aligned `.ds-list__meta`. `.ds-list__item` is the row.\n- `.ds-footer`: the status bar of the window, a `.ds-status` row: one wide cell with the site line and quiet links, then short cells.\n- `.ds-window`: the raised frame of a window (`--fill-panel`, `--shadow-panel`). `.ds-window__title` is the title bar (`--fill-bar`, bold `--font-ui` in `--color-bar-text`), `.ds-window__title--inactive` the bar of a window without the focus, `.ds-window__caption` the title text, `.ds-window__controls` the group of caption buttons. `.ds-window__ctl` is one caption button, a small raised square with its glyph drawn in CSS: `--min`, `--max`, `--close`. `.ds-window__body` pads plain content.\n- `.ds-view`: one screen of the example site; only the one named in the address shows, and `.ds-view--home` when none is named. No box of its own.\n- `.ds-prose`: running text: styles `h1`, `h2`, `h3`, `p`, `ul`, `ol`, `li`, `strong` and `code`; `.ds-prose__lead` is the lead line at `--text-large`. Used inside a well.\n- `.ds-link`: every link in text, underlined. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` (`--color-link-quiet`, `--link-decoration-quiet`) for tool and footer links, `.ds-link--strong` for a bold link. `.ds-links` wraps a line of links.\n- `.ds-button`: a raised key at least `--size-button` wide, on a `\n \n \n Save as Draft\n Send\n Cancel\n \n\n \n \n \n\n
\n
\n \n New Contact\n New Group\n \n Properties\n Delete\n \n Find\n Print\n Send Mail\n Inbox\n
\n
\n
    \n
  1. chronoskin Mail
    2. \n
  2. Address Book
    3. \n
  3. Rowing Club
    4. \n
\n
\n\n
\n \n
\n

Address Book

\n

214 people in 6 groups. The group \"Rowing Club\" is open.

\n
\n
\n New Contact...\n
\n
\n\n
\n
\n

Groups

\n
\n \n
\n
\n
\n
\n \n \n \n 28 people Replied Waiting Returned\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 \n \n \n
NameE-mail addressLast messageSent
Halloran, Inesines.halloran@rowing.exampleReplied12
Okonjo, Brambram@okonjo.exampleWaiting3
Pettersen, Dovdov.pettersen@oldmail.exampleReturned5
Quartey, Lenalena.quartey@harbour.exampleReplied8
Sorley, Finnfsorley@school.exampleReturned1
Wren, Tobiastobias.wren@rowing.exampleReplied9
6 of 28 people shown38
\n
    \n
  1. Page 1 of 5:
    2. \n
  2. < Previous
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. 4
    7. \n
  7. 5
    8. \n
  8. Next >
    9. \n
\n
\n
\n\n
\n
\n

Contents of the group 'Suppliers'

\n
\n

There is nobody in this group yet.

\n

Drag people here from All Contacts, or add a new contact straight to the group.

\n New Contact...\n
\n
\n
\n

Confirm Delete

\n
\n \n

Remove Pettersen, Dov from the address book? The 5 messages you sent him stay in Sent Items.

\n
\n
\n Delete\n Keep\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n \n Inbox\n \n Accounts\n Connection\n Security\n \n Help\n
\n
\n
    \n
  1. chronoskin Mail
    2. \n
  2. Options
    3. \n
  3. Send
    4. \n
\n
\n\n
\n \n
\n

Options

\n

How messages are sent, checked and signed. Changes apply to both accounts.

\n
\n
\n Restore Defaults\n
\n
\n\n
\n \n
\n
\n
\n
\n When I send a message\n
\n \n \n \n \n
\n
\n
\n Check for new mail\n
\n \n \n minutes, using\n \n
\n
\n
\n
\n
\n Mail sending format\n
\n
Format:
\n
Plain text, lines wrapped at 76 characters
\n
Reply mark:
\n
> before each quoted line
\n
Outbox:
\n
2 messages waiting, 100 KB
\n
Mailbox:
\n
3.1 of 5 MB
\n
\n
\n

Note: messages wait in the Outbox until the next time you choose Send/Recv.

\n
\n
\n
\n
\n\n
\n \n OK\n Cancel\n \n
\n\n
\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.app.s04.p03.t02.u04\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-4324\",\n \"short\": \"v1-w9-4324\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #2a2a2a;\n --color-canvas: #000000;\n --color-surface: #000000;\n --color-surface-alt: #1c1c1c;\n --color-surface-strong: #383838;\n --color-bar: #800080;\n --color-bar-text: #ffffff;\n --color-bar-alt: #000000;\n --color-bar-alt-text: #ffffff;\n --color-inverse: #ffffff;\n --color-inverse-text: #000000;\n --color-text: #ffffff;\n --color-text-muted: #c0c0c0;\n --color-heading: #ffff00;\n --color-heading-alt: #00ffff;\n --color-link: #ffff00;\n --color-link-quiet: #ffffff;\n --color-link-visited: #ff80ff;\n --color-link-hover: #00ff00;\n --color-link-active: #ff8000;\n --color-border: #808080;\n --color-border-strong: #ffffff;\n --color-border-muted: #c0c0c0;\n --color-accent: #ffff00;\n --color-accent-text: #000000;\n --color-accent-alt: #00ff00;\n --color-fill-1: #000080;\n --color-fill-2: #004a4a;\n --color-fill-3: #4a004a;\n --color-fill-4: #4a3a00;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffff00;\n --color-button-secondary: #383838;\n --color-button-secondary-text: #ffffff;\n --color-input: #000000;\n --color-input-text: #ffffff;\n --color-input-border: #ffffff;\n --color-disabled: #1c1c1c;\n --color-disabled-text: #808080;\n --color-danger: #ff5050;\n --color-danger-surface: #2a0000;\n --color-success: #00ff00;\n --color-warning: #ffb000;\n --color-notice: #000080;\n --color-notice-text: #ffffff;\n --color-focus: #ffff00;\n --color-shadow: #808080;\n --color-overlay: rgba(255, 255, 255, 0.25);\n}\n\n/* @part type */\n:root {\n --font-body: Verdana, Geneva, Arial, sans-serif;\n --font-heading: \"Times New Roman\", Times, serif;\n --font-ui: Verdana, Geneva, Arial, sans-serif;\n --font-mono: \"Lucida Console\", Monaco, monospace;\n --text-base: 12px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 14px;\n --text-display: 28px;\n --text-h1: 21px;\n --text-h2: 17px;\n --text-h3: 14px;\n --line-body: 1.4;\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: 400;\n --weight-ui: 400;\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: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: dotted;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset 0 0 0 1px var(--color-border-strong), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-control: inset 0 0 0 1px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-control-hover: inset 0 0 0 1px var(--color-border-strong), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border) 35%, transparent);\n --shadow-dialog: inset 0 0 0 1px var(--color-border-strong), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white), 2px 2px 0 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(115deg, var(--color-page) 0 5px, color-mix(in srgb, var(--color-page), white 10%) 5px 6px);\n --fill-bar: linear-gradient(90deg, color-mix(in srgb, var(--color-bar), black 45%), var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: repeating-linear-gradient(115deg, var(--color-inverse) 0 5px, color-mix(in srgb, var(--color-inverse), black 10%) 5px 6px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), white 35%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dotted var(--color-accent);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }