{ "id": "v1-tm-4183", "long_id": "v1.terminal.docs.s04.p01.t08.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-4183", "preview_url": "https://chrono.skin/s/v1-tm-4183/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 (\"Iosevka\", \"Victor Mono\", \"Roboto Mono\", Monaco, Menlo, monospace). Weights are `--weight-body` 400 and 700 for headings, names, prices and controls (`--weight-ui`); the hero title is large and light (`--weight-display` 400).\n- Sizes: `--text-base` 14px with `--line-body` 1.55 is all running text, `--text-ui` 13px the nav, buttons, inputs, tabs and pagination, `--text-small` 13px meta lines, gutter hints, badges and the footer, `--text-large` 16px the hero's lead and the brand name. `--text-display` 34px is the hero title only, `--text-h1` 22px a page title and a figure, `--text-h2` 16px second headings, `--text-h3` 14px row names, frame titles and grid titles.\n- Headings and controls are capitals: `--heading-transform` and `--ui-transform` are uppercase, headings are tracked by `--heading-tracking` 0.08em and the hero title by `--display-tracking` 0.04em. Running text is never tracked.\n- A magenta phosphor: `--color-page` #000000 is the window, `--color-canvas` #0a0010 the sheet, `--color-surface` #12001c the inside of frames and table rows, `--color-surface-alt` #1a0028 alternate rows and code, `--color-surface-strong` #2c0042 the gutter of a marked row, sum rows, inline code and avatar cells. `--color-text` #e667cf is running text, `--color-text-muted` #b455a6 hints, codes and counts, `--color-heading` #ffb8f8 headings, names, figures and sums, `--color-heading-alt` #5ff5ff row numbers, frame titles, typed pictures and tags.\n- Links: `--color-link` #7df9ff, `--color-link-quiet` #e667cf for breadcrumb, tabs, sidebar and pager links, `--color-link-visited` #b48cff, `--color-link-hover` #ffffff, `--color-link-active` #fff75f. `--link-decoration` is underline for links in text and titles and `--link-decoration-hover` none: a hovered link drops its line and turns white; `--link-decoration-quiet` is none.\n- Bars: `--color-bar` #ff2bd1 with `--color-bar-text` #000000 is the head row of a table and the footer strip. `--color-bar-alt` #2c0042 with `--color-bar-alt-text` #ffa6f6 is the nav. `--color-inverse` #ffa6f6 with `--color-inverse-text` #000000 is inverse video: the current tab, page number and sidebar link, the selected table row, the hovered menu item, the half of a switch that holds.\n- Lines: `--color-border` #8a2379 at `--border-width` 1px `--border-style` dotted draws every frame, the rules between rows and the upright rules of the nav and the gutter; `--color-border-strong` #ff2bd1 at `--border-width-strong` 2px closes the head row and edges a notice, the carousel and a dialog; `--color-border-muted` #45123f parts rows inside a frame and draws the leaders of a receipt.\n- Accents: `--color-accent` #5ff5ff with `--color-accent-text` #000000 is the count badge and the mark of the row the reader is on; `--color-accent-alt` #fff75f is the fold marks of the accordion and the prompt sign. `--color-fill-1` to `--color-fill-4` (#12001c, #1f0030, #001c26, #2a0020) are the four grid cells and two of the avatar cells. Status words are text in brackets: `--color-success` #5fff9a, `--color-warning` #fff75f, `--color-danger` #ff7043; progress bars use the same three.\n- Controls: the primary button is `--color-button` #ff2bd1 with `--color-button-text` #000000; the secondary button is `--color-button-secondary` #1a0028 with `--color-button-secondary-text` #ffb8f8 and a frame in `--color-border`; fields are `--color-input` #000000 with `--color-input-text` #ffb8f8 and a line in `--color-input-border` #8a2379; disabled is `--color-disabled` #1a0028 with `--color-disabled-text` #742c6a. The notice is `--color-notice` #1a0028 with `--color-notice-text` #ffb8f8, the error notice `--color-danger-surface` #260a00 with `--color-danger`. `--color-overlay` #1a0028 is the block a dialog stands on; `--color-focus` #5ff5ff is the focus outline; `--color-shadow` #8a2379 is the magenta of every shadow.\n- Surface: `--shadow-text` is a hard ghost, the letters once more 2px to the right in 60% of the accent colour, with no blur; it is used on the hero title, page titles, figures and the brand name only. Frames and controls have no shadow at rest (`--shadow-panel`, `--shadow-control` none); a hovered button gets a 3px bar inside its lower edge and a pressed one inside its upper edge; `--shadow-dialog` is a hard block 6px to the left and 6px down, on the carousel and a dialog. `--fill-button-hover` darkens the button (75% of it over black). All four radii are 0, `--backdrop-blur` is 0px, `--focus-ring` is 3px double var(--color-focus), `--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`. `--color-button-secondary-text` and `--color-input-text` must read on their own fills and on the canvas and surfaces, because a surface set may leave those controls unfilled. The current cell of the nav is a hole in the bar: `--color-canvas` with `--color-heading`. Nothing but a link in the bar's own text colour, a badge or a key label stands on a bar or an inverse block.\n- One-off sizes written with `calc()` or `ch`: a frame title is lifted by half of `--text-h3` times `--line-body` so that the frame's top line runs through it; the brand tile is one text line square; a typed picture is set at `--line-heading` so that its strokes meet; an avatar is at least `4ch` wide; a pulled-down menu is at least `28ch` and a tooltip at most `34ch` wide; the field of the restock line is at least `24ch`; horizontal paddings and gaps are whole character cells.\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.t08.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-4183\",\n  \"short\": \"v1-tm-4183\"\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: \"Iosevka\", \"Victor Mono\", \"Roboto Mono\", Monaco, Menlo, monospace;\n  --font-heading: \"Iosevka\", \"Victor Mono\", \"Roboto Mono\", Monaco, Menlo, monospace;\n  --font-ui: \"Iosevka\", \"Victor Mono\", \"Roboto Mono\", Monaco, Menlo, monospace;\n  --font-mono: \"Iosevka\", \"Victor Mono\", \"Roboto Mono\", Monaco, Menlo, monospace;\n  --text-base: 14px;\n  --text-small: 13px;\n  --text-ui: 13px;\n  --text-large: 16px;\n  --text-display: 34px;\n  --text-h1: 22px;\n  --text-h2: 16px;\n  --text-h3: 14px;\n  --line-body: 1.55;\n  --line-heading: 1.25;\n  --line-display: 1.15;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 400;\n  --weight-ui: 700;\n  --heading-transform: uppercase;\n  --heading-tracking: 0.08em;\n  --display-tracking: 0.04em;\n  --figure-shift: 0em;\n  --ui-transform: uppercase;\n  --link-decoration: underline;\n  --link-decoration-hover: none;\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"
  }
}