{ "id": "v1-tm-1111", "long_id": "v1.terminal.landing.s01.p01.t01.u01", "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": "pure", "viewport": { "width": 1280, "fluid": false }, "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-1111", "preview_url": "https://chrono.skin/s/v1-tm-1111/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 720px 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.\n\n## Typography and colour roles\n\n- One face for everything: `--font-body`, `--font-heading`, `--font-ui` and `--font-mono` are the same monospace stack (\"JetBrains Mono\", \"Fira Code\", \"DejaVu Sans Mono\", Menlo, Consolas, monospace). Weights are `--weight-body` 400 and bold 700 for headings, typed commands and the brand; the references used JetBrains Mono, Menlo and other system monospace faces. 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` 15px with `--line-body` 1.4 is all running text, `--text-ui` 15px navigation, buttons, inputs, tabs and pagination, `--text-small` 13px meta lines, hints, badges, code blocks and the status line, `--text-large` 17px the hero's lead and the brand name. Headings are told apart by weight and colour more than by size: `--text-display` 30px is the hero title only, `--text-h1` 22px a page title and the first heading of running text, `--text-h2` 15px section rules and second headings, `--text-h3` 15px frame titles, grid titles and third headings. `--heading-transform` is uppercase, `--ui-transform` is none.\n- A green phosphor screen: every colour is a step of one green, with a yellow-green for accents; only errors and warnings leave the family.\n- The screen: `--color-page` #000000 is the window, `--color-canvas` #030a05 the sheet the text stands on, `--color-surface` #061208 the inside of frames and table rows, `--color-surface-alt` #0a1a0d alternate rows, code blocks and the install line, `--color-surface-strong` #0f2614 group rows and inline code. `--color-text` #38c85a is running text, `--color-text-muted` #2a8f44 dates, counts, hints and the brackets of fields, `--color-heading` #9df5ae headings, typed commands and figures, `--color-heading-alt` #d7ff5f frame titles, third headings and tags.\n- Links: `--color-link` #9df5ae, `--color-link-quiet` #38c85a for navigation, breadcrumb, tabs and sidebar links, `--color-link-visited` #5fa87a, `--color-link-hover` #e8f0e8, `--color-link-active` #d7ff5f. `--link-decoration` is underline 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` #38c85a with `--color-bar-text` #000000 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` #0f2614 with `--color-bar-alt-text` #6fe38a is the status line at the foot. `--color-inverse` #9df5ae with `--color-inverse-text` #000000 is inverse video: the current navigation link, tab, page number and sidebar link, the selected table row, a text selection.\n- Lines: `--color-border` #1f6b33 at `--border-width` 1px `--border-style` solid draws every frame and rule; `--color-border-strong` #38c85a at `--border-width-strong` 2px is the rule under a page header, the left edge of a notice and the frame of a dialog; `--color-border-muted` #12401f parts rows inside a frame and boxes the empty state.\n- Accents: `--color-accent` #d7ff5f with `--color-accent-text` #000000 is the count badge; `--color-accent-alt` #5fd7af is the prompt sign and flag letters. `--color-fill-1` to `--color-fill-4` (#061208, #0a1a0d, #0f2614, #0a1a0d) are the four grid cells. Status words are text in brackets: `--color-success` #5fff00, `--color-warning` #ffd75f, `--color-danger` #ff5f5f; meters use the first two.\n- Controls: the primary button is `--color-button` #38c85a with `--color-button-text` #000000; the secondary button is `--fill-button-secondary` with `--color-button-secondary-text` #9df5ae and a frame in `--color-border`; fields are `--fill-input` with `--color-input-text` #9df5ae and a line in `--color-input-border` #1f6b33; disabled is `--color-disabled` #0a1a0d with `--color-disabled-text` #1f6b33. The notice is `--color-notice` #0a1a0d with `--color-notice-text` #9df5ae, the error notice `--color-danger-surface` #1a0505 with `--color-danger`. `--color-overlay` #0a1a0d is the block a dialog stands on; `--color-focus` #d7ff5f is the focus outline.\n- Surface: `--fill-button-secondary` and `--fill-input` are transparent, so secondary buttons and fields are drawn on whatever they stand on; `--fill-button-hover` lightens the button (70% of it over white); `--fill-panel` is `--color-surface`. There is no box shadow at all (`--shadow-panel`, `--shadow-control` and its hover and pressed forms and `--shadow-dialog` are none). `--shadow-text` is the phosphor glow, a 4px bloom of the accent colour at 30%, used on the hero title, page titles, figures, typed commands and the brand name; keep it this faint. All four radii are 0 and `--backdrop-blur` is 0px. `--focus-ring` is 1px solid 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    
\n  \n
\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.landing.s01.p01.t01.u01\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-tm-1111\",\n \"short\": \"v1-tm-1111\"\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: \"JetBrains Mono\", \"Fira Code\", \"DejaVu Sans Mono\", Menlo, Consolas, monospace;\n --font-heading: \"JetBrains Mono\", \"Fira Code\", \"DejaVu Sans Mono\", Menlo, Consolas, monospace;\n --font-ui: \"JetBrains Mono\", \"Fira Code\", \"DejaVu Sans Mono\", Menlo, Consolas, monospace;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", \"DejaVu Sans Mono\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 13px;\n --text-ui: 15px;\n --text-large: 17px;\n --text-display: 30px;\n --text-h1: 22px;\n --text-h2: 15px;\n --text-h3: 15px;\n --line-body: 1.4;\n --line-heading: 1.3;\n --line-display: 1.2;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 400;\n --heading-transform: uppercase;\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: none;\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: none;\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: none;\n --shadow-dialog: none;\n --shadow-text: 0 0 4px color-mix(in srgb, var(--color-accent) 30%, transparent);\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) 70%, white);\n --fill-button-secondary: transparent;\n --fill-input: transparent;\n --focus-ring: 1px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }