{ "id": "v1-w9-3433-dr", "long_id": "v1.windows-9x.docs.s03.p04.t03.u03.dr", "name": "Desktop grey help viewer, high contrast, 1999", "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": "docs", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "density": "roomy", "summary": "An online manual dressed as the help viewer of a late 1990s desktop: one window with a toolbar of large picture keys, a navigation pane of tabs over a contents tree at the left and the topic as a document in a well at the right. This pack shows it in the desktop's high contrast scheme: black windows inside thick white edges, white text, yellow headings, links and selection, cyan second headings and a purple title bar, set in a larger bold-keyed Arial. Help files, product manuals and support sites kept this two-pane form from 1995 to 2001, and the high contrast scheme was the one dark look the desktop offered.", "url": "https://chrono.skin/s/v1-w9-3433-dr", "preview_url": "https://chrono.skin/s/v1-w9-3433-dr/specimen.html", "files": { "STYLE.md": "# Desktop grey help viewer, high contrast, 1999\n\n## Summary\n\nAn online manual dressed as the help viewer of a late 1990s desktop: one window with a toolbar of large picture keys, a navigation pane of tabs over a contents tree at the left and the topic as a document in a well at the right. This pack shows it in the desktop's high contrast scheme: black windows inside thick white edges, white text, yellow headings, links and selection, cyan second headings and a purple title bar, set in a larger bold-keyed Arial. Help files, product manuals and support sites kept this two-pane form from 1995 to 2001, and the high contrast scheme was the one dark look the desktop offered.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 736px, 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.\n- The specimen is one example site, the help file of a suite of programs, of four views. `.ds-nav` (title bar and toolbar) and `.ds-footer` (one small line) are written once, inside the window and outside the views; each view is a `.ds-view` and one shows at a time.\n- Home view: `.ds-page__columns`, two panes `--space-2` apart and stretched to the same height. At the left the `.ds-sidebar` (`--size-tree`, 232px): the `.ds-tabs` Contents, Index and Search over a sheet that holds one line of instruction and the contents `.ds-tree` in a well. At the right `.ds-page__main` with `.ds-page__topic`, the document well, whose blocks are `--space-5` apart: the `.ds-hero` banner, the `.ds-stat` row, the `.ds-grid` of four book tiles, the `.ds-list` of topics and a `.ds-panel` tip.\n- Inner pages keep the title bar, toolbar and footer line and drop the hero, the read-outs and the book tiles. The two panes remain: the navigation pane shows the tab that is in use (the contents tree with the open topic selected, or the index field and its list box), and the right pane opens with the `.ds-breadcrumb` path field above the document well, in which the `.ds-page-header` (topic title, one line, an action at the right, closed by a 3px rule) comes first, then the text and its components. The Options page drops the panes: `.ds-page__inner` is one column with the path field, tabs over a sheet (the page header is the first thing on the sheet) and a row of keys.\n- Views: `home` is the contents page. `topic` is one topic: page header, text with steps, notices, a list view of paper sizes, the glossary pop-up as the dialog, a panel of related links and the pagination keys. `index` is the index: a field and a list box with a selected entry in the navigation pane; the topics found as a list view with a selected row, and the empty state of the marked topics. `options` is a property sheet: the feedback form beside two group boxes, and the keys. The toolbar key of the view that is showing is pressed; the Contents key is marked when the address names no view.\n- Spacing scale: `--space-0` 1px is the hairline step (tick inset, row padding in trees and list boxes); `--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 and the gap between windows; `--space-6` 16px the margin of the desktop round a window and the gutter of two-column sheets.\n- Fixed sizes: `--size-tool` 62px 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` 110px form label column; `--size-field` 200px text field; `--size-dialog` 330px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- One family and a code face: `--font-body`, `--font-heading` and `--font-ui` are Arial (then Helvetica), the commonest face of the references; `--font-mono` is Courier New. Keys, tabs, column heads and the toolbar are bold (`--weight-ui` 700), as the high contrast scheme set them.\n- Sizes are a step larger than the standard scheme: `--text-base`, `--text-ui` and `--text-h3` 13px; `--text-small` 11px; `--text-large` and `--text-h2` 16px; `--text-h1` 20px; `--text-display` 26px. Line height 1.3 in text, 1.25 in headings and keys. All links are underlined.\n- Colour: black windows and wells (`--color-canvas`, `--color-surface`) on a near-black desktop; white text; yellow headings, links and selection (`--color-accent` with black `--color-accent-text`); cyan second headings and icons; a purple title bar with white text; the inactive bar is the true inverse, white with black text. Visited links are pink, hovered green, active orange. Block colours are four dark tints (navy, teal, plum, olive) that carry white text and yellow links. Notices are white on navy; the error notice is light red on a dark red ground. Status colours are bright green, amber and light red on black.\n- Surface: there is no bevel. Every edge is a flat line of `--color-border-strong` (white): 3px round a window, 2px round a raised key, 1px round anything sunken, so a pressed key is told from a raised one by its thinner edge. Under the pointer a key gains a third, grey line. Thin lines are 2px (`--border-width`), and `--border-width-strong` is 3px. A dialog stands inside one more 2px line of `--color-shadow`. All fills are flat; the focus ring is a 2px solid line in `--color-focus`.\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\nSpacing is roomy: every `--space-*` token of the layout was multiplied by 1.25. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on ``; the desktop. `.ds-page__window` is the one window at `--size-page`; `.ds-page__columns` the two panes; `.ds-page__main` the right pane; `.ds-page__topic` the document well in it; `.ds-page__inner` the single column of a page without panes.\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 toolbar `.ds-nav__links`: each `.ds-nav__link` is a large key with a 24px picture over its word, flat until the pointer is on it. `.ds-nav__item--gap` starts a second group behind a thin line. The key of the current view (`is-current`, or one selector per view) is pressed, on `--color-surface-alt` with `--color-text`.\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 bold `--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-hero`: the banner that opens the first topic, the era's page introduction: a band of `--fill-bar` with `--color-bar-text` holding a large icon, `.ds-hero__text` (`.ds-hero__title` at `--text-display`, `.ds-hero__lead`) and `.ds-hero__action` with the default button. One band, never taller than its text.\n- `.ds-page-header`: the head of a topic: `.ds-page-header__text` with `.ds-page-header__title` (`--text-h1`, `--color-heading-alt`) and `.ds-page-header__lead`, `.ds-page-header__action` at the right, closed by a rule `--border-width-strong` thick.\n- `.ds-sidebar`: the navigation pane: `.ds-tabs` over a `.ds-sheet` that is also `.ds-sidebar__body`; in it `.ds-sidebar__title` is a line of instruction (or the label of the index field) and `.ds-sidebar__well` the sunken well that holds the `.ds-tree` or a `.ds-listbox`. `.ds-listbox__item` is a row of a list box (`--sub` indented, `is-current` in the selection colours inside the focus ring).\n- `.ds-grid`: the books of the help file, two columns of raised tiles. Each `.ds-grid__cell` is a link on one of the four block colours (`--2`, `--3`, `--4`) with a large icon and a `.ds-grid__body` holding `.ds-grid__title` (bold, in the link colour) and `.ds-grid__text`.\n- `.ds-list`: topics, one to a dotted line: a small icon, `.ds-list__text` with the link, and a right-aligned `.ds-list__meta` (book and length). `.ds-list__item` is the row.\n- `.ds-panel`: a raised note inside the topic (`--fill-panel`, `--shadow-control`): `.ds-panel__title` (small icon and a bold word in `--color-heading-alt`) over `.ds-panel__body`.\n- `.ds-term`: a glossary word in running text: `--color-success` with a dotted line under it; it opens the glossary pop-up, which is the `.ds-dialog`.\n- `.ds-footer`: one small line under the panes behind a thin rule: `.ds-footer__legal` at the left, `.ds-footer__links` of quiet links at the right.\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 or on a sheet.\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 Cancel\n \n \n \n \n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.docs.s03.p04.t03.u03.dr\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"docs\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-3433-dr\",\n \"short\": \"v1-w9-3433-dr\",\n \"density\": \"roomy\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #2f3e4e;\n --color-canvas: #bcc6d0;\n --color-surface: #ffffff;\n --color-surface-alt: #e6ebf0;\n --color-surface-strong: #cdd5dd;\n --color-bar: #3f5b78;\n --color-bar-text: #ffffff;\n --color-bar-alt: #bcc6d0;\n --color-bar-alt-text: #10181f;\n --color-inverse: #6f7d8a;\n --color-inverse-text: #ffffff;\n --color-text: #10181f;\n --color-text-muted: #45525e;\n --color-heading: #1f3347;\n --color-heading-alt: #2f5078;\n --color-link: #0a3a8c;\n --color-link-quiet: #10181f;\n --color-link-visited: #5a3a7a;\n --color-link-hover: #0060d0;\n --color-link-active: #b02020;\n --color-border: #7b8894;\n --color-border-strong: #18222c;\n --color-border-muted: #dfe6ec;\n --color-accent: #3f5b78;\n --color-accent-text: #ffffff;\n --color-accent-alt: #b03a20;\n --color-fill-1: #dfe8f0;\n --color-fill-2: #c8dcd8;\n --color-fill-3: #d8d4e8;\n --color-fill-4: #f0e8c8;\n --color-button: #bcc6d0;\n --color-button-text: #10181f;\n --color-button-hover-text: #0a3a8c;\n --color-button-secondary: #cdd5dd;\n --color-button-secondary-text: #10181f;\n --color-input: #ffffff;\n --color-input-text: #10181f;\n --color-input-border: #7b8894;\n --color-disabled: #bcc6d0;\n --color-disabled-text: #7b8894;\n --color-danger: #9a1c1c;\n --color-danger-surface: #f6e6e2;\n --color-success: #1f6a4a;\n --color-warning: #8a5c00;\n --color-notice: #f4f0cc;\n --color-notice-text: #10181f;\n --color-focus: #18222c;\n --color-shadow: #18222c;\n --color-overlay: rgba(16, 24, 31, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 26px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.25;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset 0 0 0 3px var(--color-border-strong);\n --shadow-control: inset 0 0 0 2px var(--color-border-strong);\n --shadow-control-hover: inset 0 0 0 2px var(--color-border-strong), inset 0 0 0 3px var(--color-border);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: inset 0 0 0 3px var(--color-border-strong), 0 0 0 2px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }