{ "id": "v1-tm-1323", "long_id": "v1.terminal.landing.s01.p03.t02.u03", "name": "Terminal, a command-line tool's home page", "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": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is the home page of a command-line program as its authors built it between 2015 and 2026: the page dresses as the terminal the program runs in. One monospace face sets everything, bright text stands on a dark screen, boxes are drawn with one-cell lines whose titles are cut into the top edge, and the product is shown as a typed session with a prompt and a block cursor instead of a screenshot. It was the look of project pages for shell tools, terminal emulators and text-mode libraries, of text-only front ends, and of the personal sites of the people who wrote them.", "url": "https://chrono.skin/s/v1-tm-1323", "preview_url": "https://chrono.skin/s/v1-tm-1323/specimen.html", "files": { "STYLE.md": "# Terminal, a command-line tool's home page\n\n## Summary\n\nThis is the home page of a command-line program as its authors built it between 2015 and 2026: the page dresses as the terminal the program runs in. One monospace face sets everything, bright text stands on a dark screen, boxes are drawn with one-cell lines whose titles are cut into the top edge, and the product is shown as a typed session with a prompt and a block cursor instead of a screenshot. It was the look of project pages for shell tools, terminal emulators and text-mode libraries, of text-only front ends, and of the personal sites of the people who wrote them.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch: `.ds-wrap` is one centred column of at most `--size-page` (1080px) on `--color-canvas`, between two faint upright rules in `--color-border-muted`, with `3ch` of side padding. It holds the header, the views and the footer and is at least as tall as the window, so the footer rests at the foot.\n- `.ds-nav` is one line on the canvas with a rule below: the `.ds-brand` at the left and `.ds-nav__list` at the right, whose `.ds-nav__link` items are words in brackets; the current one is inverse video. `.ds-nav__version` is a muted last item. There is no sidebar on the home view.\n- The home view stacks, top to bottom: `.ds-hero`, two columns (5 to 6): the claim, a lead, the install line and two buttons at the left, and `.ds-term`, a framed terminal window with a typed session, at the right; then `.ds-section` blocks `--space-4` (40px) apart, each opened by a `.ds-section__title` rule: the framed `.ds-stats` row, the framed table of commands, the `.ds-grid` of four cells, and `.ds-cols` (3 to 2) with the news list beside a panel.\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`: `--side` puts a `--size-side` (240px) column of sidebar frames at the left of the text (the manual), the plain form is 3 to 2 (changelog, download), `--even` is two equal columns. `.ds-stack` piles frames `--space-3` apart in a column. Tabs sit directly above what they switch, inside the main column.\n- Views. The specimen is one small site with four views, one showing at a time; header and footer are written once around them. `home` is the landing page. `docs` is a page of the manual: contents at the left, notices, running text, tabs over an install listing, see-also links, pagination. `changelog` is the table of releases under tabs with its pagination, beside the legend of badges, the empty state of the unreleased part and a note on upgrading. `download` is the framed table of files, the release-mail form with its error and its four buttons, the confirmation dialog and build notes. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in quarters and multiples of one 20px text line: `--space-1` 5px 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, between list rows and between buttons that wrap; `--space-3` 20px the gap between paragraphs, between frames in a stack and under a page header; `--space-4` 40px the gap between sections and above the footer; `--space-5` 60px is kept for a break larger than a section. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 150px the label column of a form, `--size-field` 420px a text input, `--size-date` 100px the date column of the list, `--size-dialog` 440px a dialog.\n- Below 900px there is one column: the hero's terminal goes under its text and scrolls sideways inside itself, columns stack with the sidebar first, the stats row and the grid become two by two, form labels sit above their fields, list dates sit above their entries, and table cells marked `.ds-table__extra` are left out. The page never scrolls sideways. Below 600px `.ds-nav__list` takes a row of its own under the brand with its `.ds-nav__link` items spread to both edges, `.ds-nav__version` is pinned at the top right of the bar, table cells tighten to half a character of padding and `.ds-tabs__body` scrolls sideways inside itself. 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 (\"IBM Plex Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace). Weights are `--weight-body` 400, `--weight-ui` 500 and 600 for bold and headings. The stack starts with IBM Plex Mono and Courier Prime and falls back to Courier New: a typewriter face suits paper. Nothing is tracked: `--heading-tracking` and `--display-tracking` are 0.\n- Sizes stay close to one size, as on a screen of character cells: `--text-base` 16px with `--line-body` 1.5 is all running text, `--text-ui` 15px navigation, buttons, inputs, tabs and pagination, `--text-small` 14px meta lines, hints, badges, code blocks and the status line, `--text-large` 18px the hero's lead and the brand name. Headings are told apart by weight and colour more than by size: `--text-display` 38px is the hero title only, `--text-h1` 26px a page title and the first heading of running text, `--text-h2` 19px section rules and second headings, `--text-h3` 16px frame titles, grid titles and third headings. `--heading-transform` is none, `--ui-transform` is lowercase.\n- Dark brown ink on warm paper, the light scheme of the era: the bars and inverse video are the ink colour, links and frame titles a burnt orange, and one blue marks flags.\n- The screen: `--color-page` #efe6c8 is the window, `--color-canvas` #fbf5dc the sheet the text stands on, `--color-surface` #fbf5dc the inside of frames and table rows, `--color-surface-alt` #f1e9c9 alternate rows, code blocks and the install line, `--color-surface-strong` #e4d9b0 group rows and inline code. `--color-text` #3b2a1a is running text, `--color-text-muted` #7a6748 dates, counts, hints and the brackets of fields, `--color-heading` #1f140a headings, typed commands and figures, `--color-heading-alt` #9a4a00 frame titles, third headings and tags.\n- Links: `--color-link` #a64b00, `--color-link-quiet` #3b2a1a for navigation, breadcrumb, tabs and sidebar links, `--color-link-visited` #6b4a6e, `--color-link-hover` #1f140a, `--color-link-active` #c2410c. `--link-decoration` is none for links in text and titles, `--link-decoration-quiet` none for navigation, and every link takes `--link-decoration-hover` (underline) when hovered. A link may also be marked by brackets (`.ds-link--bracket`).\n- Bars: `--color-bar` #3b2a1a with `--color-bar-text` #fbf5dc is the head row of a table and, where a layout has one, the menu line and the labels of the key bar. `--color-bar-alt` #e4d9b0 with `--color-bar-alt-text` #3b2a1a is the status line at the foot. `--color-inverse` #3b2a1a with `--color-inverse-text` #fbf5dc is inverse video: the current navigation link, tab, page number and sidebar link, the selected table row, a text selection.\n- Lines: `--color-border` #8c7a58 at `--border-width` 1px `--border-style` dashed draws every frame and rule; `--color-border-strong` #3b2a1a at `--border-width-strong` 3px is the rule under a page header, the left edge of a notice and the frame of a dialog; `--color-border-muted` #cfc39c parts rows inside a frame and boxes the empty state.\n- Accents: `--color-accent` #c2410c with `--color-accent-text` #fffbdc is the count badge; `--color-accent-alt` #1a6fb0 is the prompt sign and flag letters. `--color-fill-1` to `--color-fill-4` (#fbf5dc, #f1e9c9, #e4d9b0, #f1e9c9) are the four grid cells. Status words are text in brackets: `--color-success` #3d7a1c, `--color-warning` #a86400, `--color-danger` #b3123f; meters use the first two.\n- Controls: the primary button is `--color-button` #3b2a1a with `--color-button-text` #fbf5dc; the secondary button is `--fill-button-secondary` with `--color-button-secondary-text` #3b2a1a and a frame in `--color-border`; fields are `--fill-input` with `--color-input-text` #1f140a and a line in `--color-input-border` #8c7a58; disabled is `--color-disabled` #e4d9b0 with `--color-disabled-text` #9c8c6a. The notice is `--color-notice` #f1e9c9 with `--color-notice-text` #3b2a1a, the error notice `--color-danger-surface` #f8e1d4 with `--color-danger`. `--color-overlay` #e4d9b0 is the block a dialog stands on; `--color-focus` #c2410c is the focus outline.\n- Surface: Lines are dashed, the way a frame is typed with hyphens, and the heavy rule is 3px. `--fill-panel` is transparent, so frames show the canvas; `--fill-button-secondary` and `--fill-input` are their own colours; `--fill-button-hover` darkens the button (80% of it over black). The only shadows are states drawn with hard lines: `--shadow-control-hover` is a 2px underline in `--color-border-strong`, `--shadow-control-pressed` a 1px inner line; `--shadow-panel`, `--shadow-control`, `--shadow-dialog` and `--shadow-text` are none. All four radii are 0 and `--backdrop-blur` is 0px. `--focus-ring` is 2px dashed var(--color-focus); `--transition` is none: states change at once. The only motion is the blinking `.ds-cursor`, and only under `prefers-reduced-motion: no-preference`.\n- The era's rule for which text stands on which fill (all three layouts keep 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. Where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`. Nothing but a button, 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 (`--text-base` times `--line-body`); horizontal paddings and column gaps are whole character cells (`1ch`, `2ch`, `3ch`, `4ch`); the checkbox is `2ch` square.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-wrap` is the centred column; `.ds-cols` (`--side`, `--even`) are its column pairs, `.ds-stack` a pile of frames, `.ds-main` a column that may shrink, `.ds-section` a block of the page.\n- `.ds-nav`: the header line. `.ds-nav__list` holds `.ds-nav__link` items in brackets and the muted `.ds-nav__version`. The stylesheet marks the 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__text` holds `.ds-hero__title` (`--text-display`), `.ds-hero__lead`, `.ds-hero__install` (the install command on `--color-surface-alt` in a frame, with a `[copy]` bracket link at its right), a `.ds-buttons` row and a small `.ds-hero__note`. Beside it `.ds-term` is the terminal window: a frame with `.ds-term__title` cut into its top line and `--shadow-dialog`, holding `.ds-term__screen`, a `
` at `--text-small` whose lines are marked `.ds-term__in` (typed, bold), `.ds-term__dim`, `.ds-term__ok`, `.ds-term__warn` and `.ds-term__head` (a head row on the bar fill), and which ends in the `.ds-cursor`.\n- `.ds-footer`: a status line on `--fill-bar-alt`: `.ds-footer__keys`, a list of `.ds-key` hints each holding a `.ds-footer__link`, and a `.ds-footer__text` at the right.\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` closes it.\n- `.ds-prose`: running text, at most 78 characters wide: h1, h2, h3, 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.\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 (`[copy]`, `[get]`). `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n          \n          \n          \n        \n      \n    \n    
\n      
\n        
\n          
unsubscribe?
\n          
\n            
dev@example.org will get no more release mail. Security fixes are announced on this page too.
\n            
\n              \n              \n            
\n          
\n        
\n      
\n      
\n        
build it yourself
\n        
\n
$ tar xf chronoskin-3.2.0.tar.gz\n$ cd chronoskin-3.2.0 && make\n$ ./chronoskin --version
\n          
A C compiler and make are all it takes. Build notes
\n          
\n          
\n          Which file do I need?\n          
\n          
The one named after your system. If in doubt, take the source.
\n          
\n          
\n          
\n          Are the files signed?\n          
\n          
Each release carries one checksum file, signed with the release key.
\n          
\n          
\n          
\n          Does it update itself?\n          
\n          
Only when you run chronoskin self-update.
\n          
\n          
\n          
\n        
\n      
\n    
\n  \n
\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.landing.s01.p03.t02.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"landing\",\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-1323\",\n \"short\": \"v1-tm-1323\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #181825;\n --color-canvas: #1e1e2e;\n --color-surface: #24253a;\n --color-surface-alt: #2a2b40;\n --color-surface-strong: #45475a;\n --color-bar: #89b4fa;\n --color-bar-text: #11111b;\n --color-bar-alt: #313244;\n --color-bar-alt-text: #cdd6f4;\n --color-inverse: #cdd6f4;\n --color-inverse-text: #1e1e2e;\n --color-text: #bac2de;\n --color-text-muted: #9399b2;\n --color-heading: #cdd6f4;\n --color-heading-alt: #cba6f7;\n --color-link: #89dceb;\n --color-link-quiet: #89b4fa;\n --color-link-visited: #b4befe;\n --color-link-hover: #f5c2e7;\n --color-link-active: #f9e2af;\n --color-border: #585b70;\n --color-border-strong: #89b4fa;\n --color-border-muted: #3b3d54;\n --color-accent: #f9e2af;\n --color-accent-text: #1e1e2e;\n --color-accent-alt: #cba6f7;\n --color-fill-1: #1e2a3a;\n --color-fill-2: #2a2238;\n --color-fill-3: #2e2a24;\n --color-fill-4: #1f2e2a;\n --color-button: #cba6f7;\n --color-button-text: #11111b;\n --color-button-hover-text: #11111b;\n --color-button-secondary: #313244;\n --color-button-secondary-text: #cdd6f4;\n --color-input: #11111b;\n --color-input-text: #cdd6f4;\n --color-input-border: #585b70;\n --color-disabled: #313244;\n --color-disabled-text: #6c7086;\n --color-danger: #f38ba8;\n --color-danger-surface: #302030;\n --color-success: #a6e3a1;\n --color-warning: #f9e2af;\n --color-notice: #1e2a3a;\n --color-notice-text: #b4d8f0;\n --color-focus: #f9e2af;\n --color-shadow: #11111b;\n --color-overlay: #313244;\n}\n\n/* @part type */\n:root {\n --font-body: \"IBM Plex Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace;\n --font-heading: \"IBM Plex Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace;\n --font-ui: \"IBM Plex Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace;\n --font-mono: \"IBM Plex Mono\", \"Courier Prime\", \"Courier New\", Courier, monospace;\n --text-base: 16px;\n --text-small: 14px;\n --text-ui: 15px;\n --text-large: 18px;\n --text-display: 38px;\n --text-h1: 26px;\n --text-h2: 19px;\n --text-h3: 16px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 600;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: lowercase;\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" } }