{ "id": "v1-w9-1111-dr", "long_id": "v1.windows-9x.app.s01.p01.t01.u01.dr", "name": "Desktop grey file manager, 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": "pure", "viewport": { "width": 800, "fluid": false }, "density": "roomy", "summary": "A shareware catalogue dressed as the file manager of a late 1990s desktop: one silver-grey window on a teal desktop, with a navy title bar, a menu bar with underlined access keys, a toolbar of raised keys, a tree of folders at the left and icon and list views at the right, closed by a status bar of sunken cells. Every edge is a two-step bevel, light at the top left and dark at the bottom right, text is an 11px pixel-sized sans, and nothing is rounded, blurred or animated. Software sites, download libraries and intranet tools borrowed this look from the operating system between 1995 and 2001, when a page that looked like a program felt trustworthy.", "url": "https://chrono.skin/s/v1-w9-1111-dr", "preview_url": "https://chrono.skin/s/v1-w9-1111-dr/specimen.html", "files": { "STYLE.md": "# Desktop grey file manager, 1998\n\n## Summary\n\nA shareware catalogue dressed as the file manager of a late 1990s desktop: one silver-grey window on a teal desktop, with a navy title bar, a menu bar with underlined access keys, a toolbar of raised keys, a tree of folders at the left and icon and list views at the right, closed by a status bar of sunken cells. Every edge is a two-step bevel, light at the top left and dark at the bottom right, text is an 11px pixel-sized sans, and nothing is rounded, blurred or animated. Software sites, download libraries and intranet tools borrowed this look from the operating system between 1995 and 2001, when a page that looked like a program felt trustworthy.\n\n## Layout\n\n- Fixed, not fluid: `--size-page` is 760px, 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 software library, of four views. `.ds-nav` (title bar, menu bar, toolbar) and `.ds-footer` (status bar) 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, from the top inside `.ds-page__body` (blocks `--space-4` apart): the `.ds-hero` banner in a white well, the `.ds-stat` row of four read-outs, then `.ds-page__columns`: the `.ds-sidebar` tree pane (`--size-tree`, 184px) at the left and `.ds-page__main` at the right, `--space-2` apart and stretched to the same height. The main column holds a `.ds-pane` with the `.ds-grid` large-icon view, a `.ds-panel` group box with the `.ds-list` of new arrivals, and a `.ds-table` of the most downloaded programs.\n- Inner pages keep the title bar, menu bar, toolbar and status bar and drop the hero, the read-outs and the tree. In their place: a `.ds-address` line with the `.ds-breadcrumb` path field directly under the toolbar, then `.ds-page__inner`, one full-width column that opens with the `.ds-page-header` (large icon, name and one line, the action at the right) and continues with the working components `--space-4` apart. Where a page has tabs they sit directly under the page header with their `.ds-sheet`.\n- Views: `home` is the catalogue. `program` is one program: page header, a property sheet of four tabs holding the property rows, the status labels, a group box, the list view of files and the download dialog, then the read-me document in a well. `search` is a find window: a group box with the search row, a tip, the result list view with a selected row, the pagination keys and the empty state of a second pane. `submit` is a wizard page: the picture band with the steps at the left (`.ds-wizard`, `--size-band` 132px), notices, the form, an etched rule and the row of keys. The menu entry of the view that is showing is drawn in the selection colours; the home entry 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-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` 116px form label column; `--size-field` 220px text field and `--size-search` 190px search field; `--size-dialog` 350px; `--size-button` 75px least key width; `--size-block` 8px progress block.\n\n## Typography and colour roles\n\n- One family: `--font-body`, `--font-heading` and `--font-ui` are the same pixel-sized system sans (MS Sans Serif, then Tahoma, Geneva, Verdana); `--font-mono` (Courier New) is for code. The references set their text in Arial and Verdana at 10px to 13px; the stack here is the desktop's own face, which the era's pages borrowed with the chrome.\n- Sizes: `--text-base` and `--text-ui` 11px for everything; `--text-small` 10px for captions, counts and dates; `--text-large` 13px for a lead line; `--text-h2` 13px and `--text-h3` 11px bold for headings; `--text-h1` 16px for a page title and a read-out; `--text-display` 22px for the hero title only. Line height 1.35 in text, 1.2 in keys and bars. Bold is 700; keys are regular weight. No transform and no tracking.\n- Colour: silver `--color-canvas` windows on a teal `--color-page`, white wells, navy title bar (the one gradient, navy to a lighter blue, in `--fill-bar`), navy selection, navy links with purple visited and red active, black text. Block colours are the pale yellow, teal, light blue and peach of the era's pages. Status colours are dark green, amber brown and dark red, all legible on white.\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__body` stacks the blocks of a view; `.ds-page__columns` is the tree pane beside `.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), the menu bar `.ds-nav__links` of `.ds-nav__link` entries, each with one underlined `.ds-nav__key` letter, and the `.ds-toolbar`. 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 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 of the open folder, the era's page introduction: a white well with a large icon, `.ds-hero__text` (`.ds-hero__title` at `--text-display` in `--color-heading-alt`, `.ds-hero__lead`), and `.ds-hero__action`, a labelled search field (`.ds-hero__row`, `.ds-hero__field`) with the default button. Never a tall banner.\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. No fill of its own; it stands on the window face.\n- `.ds-sidebar`: the tree pane: `.ds-sidebar__title`, a raised strip like a column head, over `.ds-sidebar__body`, a white well holding the `.ds-tree` of folder links. `.ds-pane` with `.ds-pane__title` is the same strip over any other pane.\n- `.ds-grid`: the large-icon view of a folder: a white well of four columns. Each `.ds-grid__cell` is a link with a `.ds-grid__icon` tile (a 32px icon on one of the four block colours: `--2`, `--3`, `--4` on the cell), a `.ds-grid__title` and a small `.ds-grid__text` count.\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` (size and date). `.ds-list__item` is the row.\n- `.ds-panel`: a group box, the same thing as `.ds-group`: a `
` with its `.ds-panel__title` legend cut into the frame and a `.ds-panel__body`.\n- `.ds-wizard`: a wizard page: `.ds-wizard__band`, the sunken picture band in the inverse colours listing each `.ds-wizard__step` (`is-current` bold and underlined), beside `.ds-wizard__main`.\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 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 < Back\n Next >\n \n Cancel\n \n \n \n\n \n \n \n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.windows-9x.app.s01.p01.t01.u01.dr\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"windows-9x\",\n \"years\": [\n 1995,\n 2001\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-w9-1111-dr\",\n \"short\": \"v1-w9-1111-dr\",\n \"density\": \"roomy\"\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: \"MS Sans Serif\", Tahoma, Geneva, Verdana, sans-serif;\n --font-heading: \"MS Sans Serif\", Tahoma, Geneva, Verdana, sans-serif;\n --font-ui: \"MS Sans Serif\", Tahoma, Geneva, Verdana, sans-serif;\n --font-mono: \"Courier New\", Courier, monospace;\n --text-base: 11px;\n --text-small: 10px;\n --text-ui: 11px;\n --text-large: 13px;\n --text-display: 22px;\n --text-h1: 16px;\n --text-h2: 13px;\n --text-h3: 11px;\n --line-body: 1.35;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\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: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-control: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n --shadow-control-hover: inset -1px -1px var(--color-border-strong), inset 1px 1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset -2px -2px var(--color-border), inset 2px 2px var(--color-border-muted);\n --shadow-control-pressed: inset 1px 1px var(--color-border), inset -1px -1px color-mix(in srgb, var(--color-border-muted) 25%, white), inset 2px 2px var(--color-border-strong), inset -2px -2px var(--color-border-muted);\n --shadow-dialog: inset -1px -1px var(--color-border-strong), inset 1px 1px var(--color-border-muted), inset -2px -2px var(--color-border), inset 2px 2px color-mix(in srgb, var(--color-border-muted) 25%, white);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: linear-gradient(90deg, var(--color-bar), color-mix(in srgb, var(--color-bar) 45%, white));\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: 1px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }