{ "id": "v1-tm-4153", "long_id": "v1.terminal.docs.s04.p01.t05.u03", "name": "Terminal, a manual on white paper", "era": { "slug": "terminal", "code": "tm", "name": "Terminal", "years": [ 2015, 2026 ], "description": "The text-terminal look of 2015 to 2026: a monospace face for everything, bright text on a dark screen, boxes and rules drawn with borders like character frames, prompts and cursors, status lines and key hints instead of buttons with chrome." }, "archetype": "docs", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is the documentation site of a command-line program as its authors built it between 2015 and 2026: the manual pages, shown in a browser the way a pager shows them. One monospace face sets everything in one size, ink stands on white paper, every box is drawn with a heavy black line and throws a hard block shadow, and the navigation is a tree of pages in a rail, drawn with line characters. It was the look of project manuals, plain-text handbooks and the monospace sites of people who write their pages by hand.", "url": "https://chrono.skin/s/v1-tm-4153", "preview_url": "https://chrono.skin/s/v1-tm-4153/specimen.html", "files": { "STYLE.md": "# Terminal, a manual on white paper\n\n## Summary\n\nThis is the documentation site of a command-line program as its authors built it between 2015 and 2026: the manual pages, shown in a browser the way a pager shows them. One monospace face sets everything in one size, ink stands on white paper, every box is drawn with a heavy black line and throws a hard block shadow, and the navigation is a tree of pages in a rail, drawn with line characters. It was the look of project manuals, plain-text handbooks and the monospace sites of people who write their pages by hand.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch: `.ds-book` is a centred sheet of at most `--size-page` (1240px) on `--color-canvas`, between two upright lines in `--color-border`, at least as tall as the window. It is two columns: the rail `.ds-nav`, `--size-side` (250px) wide on `--color-surface-alt` with a line at its right, and `.ds-body`, which holds `.ds-main` (the views, padded `--space-3` and `4ch`) and, at its foot, the `.ds-footer`.\n- There is no bar across the top. `.ds-nav` is the rail: the `.ds-brand`, a muted `.ds-nav__tag` line, then `.ds-nav__root` (a directory name in `--color-heading-alt`) over a `.ds-nav__list` whose items are drawn as a tree with line characters; `.ds-nav__link` items lead to the views and the current one is inverse video. A second root and list (`.ds-nav__root--sub`, `.ds-nav__list--sub`) hold `.ds-nav__sub` links with a muted `.ds-nav__count`; `.ds-nav__keys` is a list of `.ds-key` hints under a faint rule.\n- The home view stacks, top to bottom: `.ds-hero`, which opens with `.ds-hero__head`, the running head of a manual page (name, title, name) over a rule of `--border-width-strong`, then `.ds-hero__cols` (5 to 4): the title, lead and two buttons at the left, and `.ds-box`, a frame titled `synopsis` holding a `
`, at the right; then `.ds-section` blocks `--space-4` (30px) apart: the `.ds-stats` row, the `.ds-grid` of the four sections, and `.ds-cols` (5 to 2) with the framed table of pages beside a `.ds-stack` of two panels.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` as a path, then `.ds-page-header`; the work follows in `.ds-cols`: `--rail` puts a `--size-rail` (230px) column at the right of the text (the page's own contents, or panels beside search results), `--form` is 3 to 2 (a form beside a dialog and a panel). `.ds-col` is a column that may shrink, `.ds-stack` piles frames `--space-3` apart. Tabs sit directly above what they switch.\n- Views. The specimen is one small site with four views, one showing at a time; rail and footer are written once around them. `home` is the index of the manual. `page` is one manual page: two notices, the text set as a manual page, see-also links and pagination, with the page's contents, its status badges and its other versions in the right rail. `search` is a typed query, tabs by section, the list of results, the empty state of a section without results, and two panels. `feedback` is the form for reporting an error with its four buttons, the confirmation dialog and a panel. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in parts of one 20px text line: `--space-1` 4px is the vertical padding of buttons, inputs, table cells and tabs; `--space-2` 10px the padding above the text in a frame, the gap between a rule and what follows and between list rows; `--space-3` 20px the gap between paragraphs, between frames in a stack, under a page header and around the text of the rail; `--space-4` 30px the gap between sections; `--space-5` 50px is kept for a break larger than a section. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 140px the label column of a form, `--size-field` 460px a text input, `--size-date` 120px the first column of the list, `--size-dialog` 420px a dialog.\n- Below 1100px there is one column: the rail becomes a block above the page with only the brand and the first tree, the hero's synopsis goes under its text, columns stack, the stats row and the grid become two by two, form labels sit above their fields, the indent of a manual page halves, and table cells marked `.ds-table__extra` are left out. The page never scrolls sideways. The rail's sub-trees (`.ds-nav__list--sub`, `.ds-nav__root--sub`) and key hints (`.ds-nav__keys`) are left out; below 600px the `.ds-nav__tag` moves to the right of the first line and `.ds-nav__root` and `.ds-nav__list` each take a full-width line. A `.ds-tooltip__tip` opens under its line across the width of the window.\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 face for everything: `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same monospace stack (\"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace). Weights are `--weight-body` 400 and 700 for bold and headings; `--weight-display` and `--weight-ui` are 400. Nothing is tracked.\n- Small and dense: `--text-base` 13px with `--line-body` 1.35 is all running text, `--text-ui` 13px the window list, buttons, inputs, tabs and the status line, `--text-small` 12px meta lines, hints, badges, the log and code blocks, `--text-large` 15px the hero's lead. `--text-display` 24px is the hero title and the figures, `--text-h1` 18px a page title; `--text-h2` and `--text-h3` are 13px, told from text by weight and colour. `--heading-transform` is lowercase, `--ui-transform` none.\n- The sixteen colours of a terminal on black: grey text, white for what matters, and blue, cyan, yellow, green, amber and red each with one job.\n- The screen: `--color-page` #000000 is the window, `--color-canvas` #0b0b0b the screen and (as `--fill-panel`) the inside of tiles, `--color-surface` #121212 table rows, `--color-surface-alt` #1c1c1c alternate rows and code blocks, `--color-surface-strong` #303030 tile title lines and inline code. `--color-text` #bbbbbb is running text, `--color-text-muted` #8a8a8a times, counts and hints, `--color-heading` #ffffff headings and figures, `--color-heading-alt` #ffff00 tile titles, figure labels and tags.\n- Links: `--color-link` #87afff, `--color-link-quiet` #bbbbbb for breadcrumb, tabs and sidebar links, `--color-link-visited` #af87ff, `--color-link-hover` #ffffff, `--color-link-active` #ffff00. Links are not underlined (`--link-decoration` and `--link-decoration-quiet` none) until hovered (`--link-decoration-hover` underline).\n- Bars: `--color-bar` #87afff with `--color-bar-text` #000000 is the head row of a table and the session label of the status line. `--color-bar-alt` #303030 with `--color-bar-alt-text` #d0d0d0 is the window list and the status line. `--color-inverse` #bbbbbb with `--color-inverse-text` #000000 is inverse video: the current window, tab, page number and sidebar link, the row under the cursor.\n- Lines: `--color-border` #585858 at `--border-width` 1px solid draws every tile; `--border-width-strong` is also 1px, in `--color-border-strong` #bbbbbb, under a page header and around a notice and a dialog; `--color-border-muted` #303030 parts list rows and a tile's foot.\n- Accents: `--color-accent` #ffff00 with `--color-accent-text` #000000 is the count badge; `--color-accent-alt` #00d7d7 the names of meters and the prompt sign. `--color-fill-1` to `--color-fill-4` (#0f1b2d, #0f2414, #2b2410, #24122a: blue, green, yellow and magenta, darkened) tint the tiles of the grid by group. Status words and meters: `--color-success` #5fd700, `--color-warning` #ffaf00, `--color-danger` #ff5555.\n- Controls: the primary button is `--color-button` #00d7d7 with `--color-button-text` #000000; the secondary button is `--color-button-secondary` #303030 with #ffffff text; fields are `--color-input` #000000 with `--color-input-text` #ffffff and a line in `--color-input-border` #585858; disabled is `--color-disabled` #1c1c1c with `--color-disabled-text` #585858. The notice is `--color-notice` #0f1b2d with `--color-notice-text` #afd7ff, the error notice `--color-danger-surface` #2a0a0a with `--color-danger`. `--color-overlay` #1c1c1c is the block a dialog stands on; `--color-focus` #ffff00 the focus outline, `--focus-ring` 1px dashed.\n- Surface: flat and thin. `--fill-panel` is `--color-canvas`, so a tile is only its lines. `--shadow-panel` is a one-pixel edge in `--color-shadow` #3a3a3a at the right and foot of a deck; `--shadow-dialog` a hard 4px block; a hovered button gets a 2px underline in the focus colour (`--shadow-control-hover`), a pressed one an inset line; `--fill-button-hover` darkens the button. `--shadow-control` and `--shadow-text` are none, all four radii are 0, `--backdrop-blur` is 0px and `--transition` is none.\n- The era's rule for which text stands on which fill (every layout of the era keeps it, so any palette works with any layout): `--color-text`, `--color-text-muted`, the two heading colours, every link colour and the three status colours stand on `--fill-page`, `--color-canvas`, the three surfaces, `--fill-panel` and the four fills, and on nothing else. `--color-bar-text` only on `--fill-bar`; `--color-bar-alt-text` only on `--fill-bar-alt`; `--color-inverse-text` only on `--fill-inverse`; `--color-accent-text` only on `--fill-accent`; `--color-button-text` and `--color-button-hover-text` only on `--fill-button` and its hover; `--color-notice-text` only on `--color-notice`; `--color-danger` also on `--color-danger-surface`; `--color-disabled-text` on `--color-disabled`. Two tokens must read in two places, because a surface set may leave a control unfilled: `--color-button-secondary-text` on `--fill-button-secondary` and on the canvas and surfaces, `--color-input-text` on `--fill-input` and on the canvas and surfaces. Whatever is current or selected is inverse video (`--fill-inverse` with `--color-inverse-text`); where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`.\n- One-off sizes written with `calc()` or `ch`: tiles overlap by `--border-width` through negative margins written with `calc()`; a dialog's title is lifted by half of `--text-h3` times `--line-body` so that its top line runs through it; the brand tile is one text line square; horizontal paddings are whole character cells; the checkbox is `2ch` square.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-book` is the sheet of two columns, `.ds-body` its right column, `.ds-main` the padded area the views sit in; `.ds-cols` (`--rail`, `--form`) are column pairs, `.ds-col` a column that may shrink, `.ds-stack` a pile of frames, `.ds-section` a block of the page.\n- `.ds-nav`: the rail at the left, described under Layout. The stylesheet marks the `.ds-nav__link` whose `href` names the view that is showing (one selector per view, and the home link when the address names none); on a page of its own give the link `is-current`.\n- `.ds-hero`: the opening of the home view: `.ds-hero__head`, three spans set apart as a manual page's running head; `.ds-hero__cols` with `.ds-hero__text` (`.ds-hero__title` at `--text-display`, `.ds-hero__lead`, a `.ds-buttons` row) and `.ds-box`, a frame with `.ds-box__title` cut into its top line holding `.ds-box__screen`, a `
` at `--text-small` whose parts are marked `.ds-box__in` (bold), `.ds-box__arg` (a flag, in `--color-accent-alt`) and `.ds-box__dim`.\n- `.ds-footer`: the last line of a manual page on `--fill-bar-alt`: three `.ds-footer__text` items set apart (version, date and links, page name); `.ds-footer__link` is underlined.\n- `.ds-brand`: the site's mark and name, a link to the home view, first thing in the header. `.ds-brand__mark` is a tile one text line square, dressed like the primary button (`--fill-button`, `--color-button-text`, the button's frame, `--radius-control`, `--shadow-control`); `.ds-brand__name` is bold at `--text-large`. The name `chronoskin` and the mark are placeholders for the installing project's own name and logo.\n- `.ds-breadcrumb`: a path: `.ds-breadcrumb__link` items with `.ds-breadcrumb__sep` (`/`) between them, ending in a bold `.ds-breadcrumb__current`.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__main` with `.ds-page-header__title` (`--text-h1`) and one muted `.ds-page-header__text` line; `.ds-page-header__action` at the right holds one button. A rule of `--border-width-strong` in `--color-border-strong` closes it.\n- `.ds-prose`: running text, at most 78 characters wide: h1, h2, h3 (the third in `--color-heading-alt`), paragraphs, lists whose bullet is a typed dash, `code` on `--color-surface-strong`, `strong` in the heading colour. Anything typed literally goes in `.ds-code`, a `
` at `--text-small` on `--color-surface-alt` in a frame; it scrolls sideways inside itself. `.ds-prose--man` sets a manual page: second headings stand at the margin, their text and the third headings are set in by `4ch`, the paragraph under a third heading by `8ch`.\n- `.ds-link`: text link with `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for meta and tool links, `.ds-link--bracket` for a link written as a word in brackets (`[reply]`). `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n        \n        \n        \n      \n    \n    
\n      
\n        
\n          
discard this report?
\n          
\n            
What you wrote about chronoskin(1) is not saved anywhere else.
\n            
\n              \n              \n            
\n          
\n        
\n      
\n      
\n        
what happens next
\n        
\n          
A report becomes a ticket against the page. Corrections ship with the next release and appear here the same day.
\n        
\n      
\n    
\n  \n
\n\n\n\n\n\n\n\n\n",
    "style.json": "{\n  \"id\": \"v1.terminal.docs.s04.p01.t05.u03\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"terminal\",\n    \"years\": [\n      2015,\n      2026\n    ]\n  },\n  \"archetype\": \"docs\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1280,\n    \"fluid\": false,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-tm-4153\",\n  \"short\": \"v1-tm-4153\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #000000;\n  --color-canvas: #030a05;\n  --color-surface: #061208;\n  --color-surface-alt: #0a1a0d;\n  --color-surface-strong: #0f2614;\n  --color-bar: #38c85a;\n  --color-bar-text: #000000;\n  --color-bar-alt: #0f2614;\n  --color-bar-alt-text: #6fe38a;\n  --color-inverse: #9df5ae;\n  --color-inverse-text: #000000;\n  --color-text: #38c85a;\n  --color-text-muted: #2a8f44;\n  --color-heading: #9df5ae;\n  --color-heading-alt: #d7ff5f;\n  --color-link: #9df5ae;\n  --color-link-quiet: #38c85a;\n  --color-link-visited: #5fa87a;\n  --color-link-hover: #e8f0e8;\n  --color-link-active: #d7ff5f;\n  --color-border: #1f6b33;\n  --color-border-strong: #38c85a;\n  --color-border-muted: #12401f;\n  --color-accent: #d7ff5f;\n  --color-accent-text: #000000;\n  --color-accent-alt: #5fd7af;\n  --color-fill-1: #061208;\n  --color-fill-2: #0a1a0d;\n  --color-fill-3: #0f2614;\n  --color-fill-4: #0a1a0d;\n  --color-button: #38c85a;\n  --color-button-text: #000000;\n  --color-button-hover-text: #000000;\n  --color-button-secondary: #0a1a0d;\n  --color-button-secondary-text: #9df5ae;\n  --color-input: #000000;\n  --color-input-text: #9df5ae;\n  --color-input-border: #1f6b33;\n  --color-disabled: #0a1a0d;\n  --color-disabled-text: #1f6b33;\n  --color-danger: #ff5f5f;\n  --color-danger-surface: #1a0505;\n  --color-success: #5fff00;\n  --color-warning: #ffd75f;\n  --color-notice: #0a1a0d;\n  --color-notice-text: #9df5ae;\n  --color-focus: #d7ff5f;\n  --color-shadow: #000000;\n  --color-overlay: #0a1a0d;\n}\n\n/* @part type */\n:root {\n  --font-body: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n  --font-heading: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n  --font-ui: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n  --font-mono: \"Source Code Pro\", \"DejaVu Sans Mono\", \"Andale Mono\", \"Lucida Console\", monospace;\n  --text-base: 13px;\n  --text-small: 12px;\n  --text-ui: 13px;\n  --text-large: 15px;\n  --text-display: 24px;\n  --text-h1: 18px;\n  --text-h2: 13px;\n  --text-h3: 13px;\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: 400;\n  --weight-ui: 400;\n  --heading-transform: lowercase;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 2px;\n  --border-width-strong: 4px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: 0 0 0 2px var(--color-focus);\n  --shadow-control-pressed: inset 0 0 0 2px var(--color-shadow);\n  --shadow-dialog: 8px 8px 0 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-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 60%, white);\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"
  }
}