{ "id": "v1-w9-2188", "long_id": "v1.windows-9x.landing.s02.p01.t08.u08", "name": "Desktop grey company home page, 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": "landing", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "A software company's site laid out as a desktop of the late 1990s: several small windows with title bars and caption buttons standing on a coloured desktop beside a column of icons, with a taskbar across the foot of the screen for navigation. This pack shows it in a high-colour scheme of the kind people chose for themselves: cream windows with a forest green title bar on a slate blue dithered desktop, chunky single-step bevels inside a dark line, serif headings over a 12px wide sans. Company home pages, product sites and CD-ROM menus used the desktop metaphor from 1995 to 2001 to make a site feel like the product it sold.", "url": "https://chrono.skin/s/v1-w9-2188", "preview_url": "https://chrono.skin/s/v1-w9-2188/specimen.html", "files": { "STYLE.md": "# Desktop grey company home page, 1998\n\n## Summary\n\nA software company's site laid out as a desktop of the late 1990s: several small windows with title bars and caption buttons standing on a coloured desktop beside a column of icons, with a taskbar across the foot of the screen for navigation. This pack shows it in a high-colour scheme of the kind people chose for themselves: cream windows with a forest green title bar on a slate blue dithered desktop, chunky single-step bevels inside a dark line, serif headings over a 12px wide sans. Company home pages, product sites and CD-ROM menus used the desktop metaphor from 1995 to 2001 to make a site feel like the product it sold.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 772px, the width of the desktop area (`.ds-page__desk`) centred on an 800px screen. The taskbar (`.ds-nav`) spans the whole screen under it and sticks to the foot of the window when the page is taller than the screen.\n- The specimen is one example site, a software company, of four views. The `.ds-footer` (small print written on the desktop) and the `.ds-nav` taskbar are written once, after the views; each view is a `.ds-view` and one shows at a time.\n- Home view: `.ds-page__columns`, three columns `--space-5` apart and top-aligned: the `.ds-grid` of desktop icons (`--size-icons`, 80px), `.ds-page__main` with the welcome window (the `.ds-hero`) over a window of `.ds-stat` read-outs and a download meter, and `.ds-page__side` (`--size-side`, 238px) with the news window (a `.ds-panel` holding the `.ds-list`) over a second small window whose title bar is inactive.\n- Inner pages keep the taskbar and the small print and drop the desktop icons and the welcome window. A page is one wide window across the whole desktop area, or (`.ds-page__pair`) a narrow column of windows (`--size-topics`, 204px) beside it. Inside the wide window `.ds-page__inner` stacks, `--space-4` apart: the `.ds-breadcrumb` path field, the `.ds-page-header` (large icon, title in the heading face, one line, the action at the right, closed by a thin rule), then the tabs with their sheet or the working components.\n- Views: `home` is the desktop. `products` is the catalogue: tabs over a sheet holding the list view of programs with a selected row and a total row, the key of status labels and the pagination keys, then two group boxes. `support` is a column with the `.ds-sidebar` topics window and a small window holding the empty state, beside the knowledge base window: notices, a search row and an article in a well. `order` is the order form: a group box with the basket list view and the confirmation dialog beside a group box with the form, an etched rule and the row of keys. The taskbar key of the view that is showing stays pressed and bold; the Welcome 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-keys` 150px column of keys in the welcome window; `--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` 120px form label column; `--size-field` 230px text field; `--size-dialog` 340px; `--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- `--font-body` and `--font-ui` are the narrow sans at `--text-base` and `--text-ui` (13px); keys are `--weight-ui`. `--font-heading` is the heavy condensed face, set in capitals by `--heading-transform` with `--heading-tracking`: the title of the large display (`--text-display`, 32px, `--display-tracking`), page titles (`--text-h1`, 22px), panel and section titles (`--text-h2`, 16px) and the brand name. `--font-mono` is the lettering of displays: both lines of the deck display, the small line of the large display, counters, key numbers and chart positions. `--text-small` (11px) is for artists, weeks, counts and the breadcrumb. Bold is `--weight-bold`; nothing is lighter than `--weight-body`.\n- Links in text are `--color-link`, underlined by `--link-decoration`, and lose the line under the pointer (`--link-decoration-hover`); quiet links and the rows of the list box use `--link-decoration-quiet`.\n- Which text sits on which fill, the same in every layout of the era:\n - The window face is `--color-canvas` (`--fill-panel` for windows, cases and dialogs) and carries `--color-text`, `--color-text-muted`, `--color-heading`, `--color-heading-alt` and the link colours.\n - A sunken well (panels, the list box, list views, the basket read-out, the review, the empty state) is `--color-surface` and carries the same text and link tokens. `--color-surface-alt` is the alternate row, a preset key held down, inline code and the position field of the chart; `--color-surface-strong` is a total row and a lamp that is off. They carry `--color-text`.\n - A display (the deck display, the large display, the figure of a counter) is `--fill-inverse` with `--color-inverse-text` and nothing else: no heading, muted or link colour is used on it.\n - The title bar is `--fill-bar` with `--color-bar-text`. The deck, the page header band and column heads are `--fill-bar-alt` with `--color-bar-alt-text`.\n - The selection (the current band key, the open shelf, a selected row, a lit lamp, 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` (`--fill-button-hover` and `--color-button-hover-text` under the pointer); the lesser key and the band keys are `--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 are `--fill-input` with `--color-input-text`; `--color-input-border` outlines the check box and the radio button.\n - `--color-fill-1` to `--color-fill-4` are the sleeves and carry `--color-text` (the drawing on them).\n - Prices are `--color-heading-alt`, bold. 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`.\n - Icons are inline SVG painted with `currentColor`: `--color-heading-alt` by default, the surrounding text colour on keys, sleeves and selections.\n- Edges. 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` frames the window, `--shadow-dialog` a dialog. Both also throw a hard shadow.\n - `--shadow-control` is every raised part: buttons, preset keys, band keys, caption buttons, the page header band, column heads, the cases of the discs, pagination keys, the brand tile. `--shadow-control-hover` replaces it under the pointer.\n - `--shadow-control-pressed` is everything sunken: displays, counters, fields, wells, panels, the list box, status cells, the check box, the progress bar, a key held down, the current band key and pagination key.\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: the line under a panel title, the frame of a lamp and of a chart position, group boxes, the etched rule (over `--color-border-muted`); a sleeve is framed in `--color-border-strong`; table row lines are `--color-surface-alt`.\n\n## Components\n\n- `.ds-page`: on ``; the desktop. `.ds-page__desk` is the 772px desktop area; `.ds-page__columns` the three columns of the home view; `.ds-page__main` and `.ds-page__side` are columns of windows `--space-5` apart; `.ds-page__pair` is a narrow column beside a wide window; `.ds-page__inner` stacks the content of a wide window.\n- `.ds-nav`: the taskbar, written once after the views: a raised bar across the screen holding the `.ds-brand` key, `.ds-nav__links` (one `.ds-nav__item` and `.ds-nav__link` key per view, each with a small icon, sharing the width) and `.ds-nav__tray`, a sunken cell with the clock. The key of the current view (`is-current`, or one selector per view) is pressed and bold.\n- `.ds-brand`: the first key of the taskbar: a raised key holding `.ds-brand__mark`, a small tile dressed like the default button (`--fill-button`, `--color-button-text`, a line of `--color-border-strong`, `--radius-control`, `--shadow-control`) with the mark as inline SVG (3 unit stroke, square caps), and `.ds-brand__name`, the name in bold `--font-heading` at `--text-ui`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the body of the welcome window, the era's page introduction: `.ds-hero__text` with `.ds-hero__title` (`--text-display`; `.ds-hero__name` puts the name in `--color-heading-alt`), `.ds-hero__lead` and `.ds-hero__tip` (the tip of the day in the notice colours inside a sunken frame), beside `.ds-hero__action`, a column of keys with the default button first, over `.ds-hero__foot`, a thin rule and one check box.\n- `.ds-page-header`: the head of an inner page, inside its window: a large icon, `.ds-page-header__text` with `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__lead`, `.ds-page-header__action` at the right, closed by a thin rule.\n- `.ds-grid`: icons standing on the desktop, one column. Each `.ds-grid__cell` is a link with a `.ds-grid__icon` tile (a 32px icon on one of the four block colours inside a dark line: `--2`, `--3`, `--4` on the cell) and a `.ds-grid__title` label in `--color-bar-text`; the selected icon (`is-current`) has its label in the selection colours inside the focus ring.\n- `.ds-panel`: a small window: used together with `.ds-window`, its `.ds-panel__title` together with `.ds-window__title`. `.ds-panel__body` pads the content, `.ds-panel__text` is a paragraph in it. `.ds-meter` is a line with a progress bar.\n- `.ds-list`: a list box of dated items: a sunken well whose `.ds-list__item` rows carry a `.ds-list__meta` date over a link (`.ds-list__text` for a line of text).\n- `.ds-sidebar`: the narrow window of topics, used together with `.ds-window`: `.ds-sidebar__title` headings in `--color-heading-alt`, each over a `.ds-sidebar__list`, a sunken well of `.ds-sidebar__item` rows (small icon, link, count).\n- `.ds-footer`: small print written on the desktop in `--color-bar-text`: `.ds-footer__links` of `.ds-footer__link` and `.ds-footer__legal`.\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 \n \n Cancel\n \n \n \n \n\n\n\n\n\n
\n \n \n chronoskin\n \n \n 4:52 PM\n
\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.landing.s02.p01.t08.u08\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-2188\",\n \"short\": \"v1-w9-2188\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #008080;\n --color-canvas: #c0c0c0;\n --color-surface: #ffffff;\n --color-surface-alt: #e8e8e8;\n --color-surface-strong: #d0d0d0;\n --color-bar: #000080;\n --color-bar-text: #ffffff;\n --color-bar-alt: #c0c0c0;\n --color-bar-alt-text: #000000;\n --color-inverse: #808080;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #505050;\n --color-heading: #000000;\n --color-heading-alt: #000080;\n --color-link: #000080;\n --color-link-quiet: #000000;\n --color-link-visited: #800080;\n --color-link-hover: #0000f0;\n --color-link-active: #d00000;\n --color-border: #808080;\n --color-border-strong: #000000;\n --color-border-muted: #dfdfdf;\n --color-accent: #000080;\n --color-accent-text: #ffffff;\n --color-accent-alt: #d00000;\n --color-fill-1: #ffffd0;\n --color-fill-2: #98d0d0;\n --color-fill-3: #98d0ff;\n --color-fill-4: #ffd098;\n --color-button: #c0c0c0;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #c0c0c0;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #808080;\n --color-disabled: #c0c0c0;\n --color-disabled-text: #808080;\n --color-danger: #a00000;\n --color-danger-surface: #fff8e8;\n --color-success: #006830;\n --color-warning: #986800;\n --color-notice: #ffffd0;\n --color-notice-text: #000000;\n --color-focus: #000000;\n --color-shadow: #000000;\n --color-overlay: rgba(0, 0, 0, 0.4);\n}\n\n/* @part type */\n:root {\n --font-body: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n --font-heading: Impact, Haettenschweiler, \"Arial Narrow Bold\", sans-serif;\n --font-ui: \"Arial Narrow\", \"Helvetica Neue Condensed\", \"Nimbus Sans Narrow\", Arial, sans-serif;\n --font-mono: \"OCR A Std\", \"Lucida Console\", \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 15px;\n --text-display: 32px;\n --text-h1: 22px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: uppercase;\n --heading-tracking: 0.5px;\n --display-tracking: 1px;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: none;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 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 1px var(--color-border-strong), inset 0 2px 0 0 color-mix(in srgb, var(--color-border-muted) 70%, white), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent), 4px 4px 0 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-control: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 0 0 color-mix(in srgb, var(--color-border-muted) 70%, white), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --shadow-control-hover: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 0 0 var(--color-accent), inset 0 -3px 0 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong), inset 0 3px 0 0 color-mix(in srgb, var(--color-shadow) 35%, transparent), inset 0 -2px 0 0 color-mix(in srgb, var(--color-border-muted) 45%, transparent);\n --shadow-dialog: inset 0 0 0 1px var(--color-border-strong), inset 0 0 0 3px var(--color-accent), 6px 6px 0 0 color-mix(in srgb, var(--color-shadow) 50%, transparent);\n --shadow-text: none;\n --fill-page: linear-gradient(color-mix(in srgb, var(--color-page), white 10%) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, color-mix(in srgb, var(--color-page), white 10%) 1px, transparent 1px) 0 0 / 16px 16px, var(--color-page);\n --fill-bar: linear-gradient(180deg, color-mix(in srgb, var(--color-bar), white 32%), var(--color-bar) 48%, color-mix(in srgb, var(--color-bar), black 28%));\n --fill-bar-alt: linear-gradient(180deg, color-mix(in srgb, var(--color-bar-alt), white 12%), color-mix(in srgb, var(--color-bar-alt), black 12%));\n --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse), black 7%) 2px 3px);\n --fill-accent: linear-gradient(180deg, color-mix(in srgb, var(--color-accent), white 35%), var(--color-accent) 60%);\n --fill-panel: var(--color-canvas);\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 18%), var(--color-button) 50%, color-mix(in srgb, var(--color-button), black 16%));\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button), white 32%), color-mix(in srgb, var(--color-button), white 8%));\n --fill-button-secondary: linear-gradient(180deg, color-mix(in srgb, var(--color-button-secondary), white 18%), var(--color-button-secondary) 50%, color-mix(in srgb, var(--color-button-secondary), black 16%));\n --fill-input: var(--color-input);\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }