{ "id": "v1-tm-2137", "long_id": "v1.terminal.app.s02.p01.t03.u07", "name": "Terminal, a full-screen text-mode program", "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": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is a web application built as a full-screen text-mode program, a form that came back between 2015 and 2026 with terminal user interfaces and the libraries that copy them in the browser. The screen is a menu line, framed panes that sit one cell apart with their titles cut into the top line, and a row of numbered function keys at the foot; one monospace face sets everything and whatever is selected is shown in inverse video. It was used for mail readers, file managers, monitors and dashboards made by and for people who live in a terminal.", "url": "https://chrono.skin/s/v1-tm-2137", "preview_url": "https://chrono.skin/s/v1-tm-2137/specimen.html", "files": { "STYLE.md": "# Terminal, a full-screen text-mode program\n\n## Summary\n\nThis is a web application built as a full-screen text-mode program, a form that came back between 2015 and 2026 with terminal user interfaces and the libraries that copy them in the browser. The screen is a menu line, framed panes that sit one cell apart with their titles cut into the top line, and a row of numbered function keys at the foot; one monospace face sets everything and whatever is selected is shown in inverse video. It was used for mail readers, file managers, monitors and dashboards made by and for people who live in a terminal.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch: `.ds-screen` is the whole screen, at most `--size-page` (1280px) wide and at least as tall as the window, a column of `.ds-nav`, `.ds-main` and `.ds-footer` on `--color-canvas`. Nothing is centred and there are no margins beyond one cell.\n- `.ds-nav` is the menu line on `--fill-bar`, as wide as the screen: the `.ds-brand`, then `.ds-nav__list` whose `.ds-nav__link` items carry their hot letter underlined (`.ds-nav__hot`), and `.ds-nav__status` at the right. The open menu is a hole in the bar: `--color-canvas` with `--color-heading`.\n- `.ds-main` holds the views with one cell of padding. Panes are laid out by `.ds-panes`, a grid one cell (`1ch`, `--space-2`) apart whose panes stretch to one height: `--top` is 3 to 2, `--work` is a `--size-side` (230px) column beside the rest, `--wide` is 2 to 1, `--even` two halves. A `.ds-pane` is a frame with `.ds-pane__title` cut into its top line, a `.ds-pane__body` (`--flush` when a table fills it) and an optional `.ds-pane__foot`, a ruled line of key hints and pagination. `.ds-stack` piles panes in a column.\n- The home view (the inbox) is three rows of panes: the message of the day (`.ds-hero`) beside the status figures; the folders (`.ds-sidebar`, always at the left) beside the message table; the preview panel beside the accounts.\n- Inner pages have no hero. They open with the `.ds-breadcrumb`, then `.ds-page-header`, then panes: `--wide` with the work at the left and a stack of narrow panes at the right (message, compose), or tabs across the screen with the grid in `.ds-tabs__body` and two even panes under it (help).\n- Views. The specimen is one small program with four views, one showing at a time; menu line and key bar are written once around them. `inbox` is the home view. `message` is one message: badges, its text, links, key hints and pagination in the pane foot, beside the thread list and the table of attached files. `compose` is the two notices, the form with bracketed fields, its error and its four buttons, beside the discard dialog and a pane of keys. `help` is the tabs, the grid of four key groups, the empty state of the filters and a pane about the program. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, tight as a text screen: `--space-1` 3px is the vertical padding of menu items, buttons, inputs and tabs and the padding above the text in a pane; `--space-2` 8px the gap between panes, between notices and under the text of a pane; `--space-3` 16px the gap between paragraphs, under a page header and at the foot of the screen; `--space-4` 24px and `--space-5` 40px are kept for larger breaks. Table rows have no vertical padding: one text line a row.\n- Fixed sizes: `--size-label` 110px the label column of a form, `--size-field` 620px a field, `--size-date` 90px the date column of the list, `--size-dialog` 400px a dialog.\n- Below 900px every `.ds-panes` is one column, in source order (folders above the list). The status of the menu line is left out, the key bar becomes two rows of four, form labels sit above their fields, the grid is one cell across 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, each `.ds-nav__link` an equal centred cell without side padding. 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 (\"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace). Weights are `--weight-body` 400, bold and `--weight-ui` 700, and `--weight-display` 800 for the hero title. The stack starts with SF Mono and Cascadia Code, the faces terminal programs ship with. 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` 14px with `--line-body` 1.45 is all running text, `--text-ui` 13px navigation, buttons, inputs, tabs and pagination, `--text-small` 12px meta lines, hints, badges, code blocks and the status line, `--text-large` 16px the hero's lead and the brand name. Headings are told apart by weight and colour more than by size: `--text-display` 32px is the hero title only, `--text-h1` 20px a page title and the first heading of running text, `--text-h2` 16px section rules and second headings, `--text-h3` 14px frame titles, grid titles and third headings. `--heading-transform` is none, `--ui-transform` is none.\n- A modern sixteen-colour scheme on blue-grey, with each colour given a role: cyan for links, blue for quiet links, bars and heavy rules, magenta for the primary button, the prompt path, frame titles and tags, yellow for the accent, focus and warnings, green and red for status.\n- The screen: `--color-page` #181825 is the window, `--color-canvas` #1e1e2e the sheet the text stands on, `--color-surface` #24253a the inside of frames and table rows, `--color-surface-alt` #2a2b40 alternate rows, code blocks and the install line, `--color-surface-strong` #45475a group rows and inline code. `--color-text` #bac2de is running text, `--color-text-muted` #9399b2 dates, counts, hints and the brackets of fields, `--color-heading` #cdd6f4 headings, typed commands and figures, `--color-heading-alt` #cba6f7 frame titles, third headings and tags.\n- Links: `--color-link` #89dceb, `--color-link-quiet` #89b4fa for navigation, breadcrumb, tabs and sidebar links, `--color-link-visited` #b4befe, `--color-link-hover` #f5c2e7, `--color-link-active` #f9e2af. `--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` #89b4fa with `--color-bar-text` #11111b 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` #313244 with `--color-bar-alt-text` #cdd6f4 is the status line at the foot. `--color-inverse` #cdd6f4 with `--color-inverse-text` #1e1e2e is inverse video: the current navigation link, tab, page number and sidebar link, the selected table row, a text selection.\n- Lines: `--color-border` #585b70 at `--border-width` 2px `--border-style` solid draws every frame and rule; `--color-border-strong` #89b4fa at `--border-width-strong` 4px is the rule under a page header, the left edge of a notice and the frame of a dialog; `--color-border-muted` #3b3d54 parts rows inside a frame and boxes the empty state.\n- Accents: `--color-accent` #f9e2af with `--color-accent-text` #1e1e2e is the count badge; `--color-accent-alt` #cba6f7 is the prompt sign and flag letters. `--color-fill-1` to `--color-fill-4` (#1e2a3a, #2a2238, #2e2a24, #1f2e2a) are the four grid cells. Status words are text in brackets: `--color-success` #a6e3a1, `--color-warning` #f9e2af, `--color-danger` #f38ba8; meters use the first two.\n- Controls: the primary button is `--color-button` #cba6f7 with `--color-button-text` #11111b; the secondary button is `--fill-button-secondary` with `--color-button-secondary-text` #cdd6f4 and a frame in `--color-border`; fields are `--fill-input` with `--color-input-text` #cdd6f4 and a line in `--color-input-border` #585b70; disabled is `--color-disabled` #313244 with `--color-disabled-text` #6c7086. The notice is `--color-notice` #1e2a3a with `--color-notice-text` #b4d8f0, the error notice `--color-danger-surface` #302030 with `--color-danger`. `--color-overlay` #313244 is the block a dialog stands on; `--color-focus` #f9e2af is the focus outline.\n- Surface: Lines are 2px and solid, the heavy rule 4px. `--fill-panel` is `--color-surface`; `--fill-button-secondary` and `--fill-input` are their own colours; `--fill-button-hover` lightens the button (60% of it over white). Shadows are hard lines and blocks only: `--shadow-control-hover` is a 2px ring in `--color-focus`, `--shadow-control-pressed` a 2px inner line in `--color-shadow`, and `--shadow-dialog` drops a block of `--color-shadow` 8px down and right, the way a text-mode dialog throws its shadow one cell away; `--shadow-panel`, `--shadow-control` and `--shadow-text` are none. All four radii are 0 and `--backdrop-blur` is 0px. `--focus-ring` is 2px 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-screen` is the screen; `.ds-main` holds the views; `.ds-panes` (`--top`, `--work`, `--wide`, `--even`) lay out `.ds-pane` frames; `.ds-stack` piles them. `.ds-keys` is a two-column list of keys (`dt`) and what they do (`dd`).\n- `.ds-nav`: the menu line. `.ds-nav__list` holds `.ds-nav__link` items, each with its hot letter in `.ds-nav__hot`; `.ds-nav__status` is the text at the right. 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 message of the day, a `.ds-pane` like the others: `.ds-hero__title` (`--text-display`), `.ds-hero__lead` and a `.ds-buttons` row with the main action.\n- `.ds-footer`: the key bar on `--fill-bar-alt`: a `.ds-footer__note` line, then eight `.ds-footer__key` links in a row, each a `.ds-footer__num` and a `.ds-footer__label` on `--fill-bar`.\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
\n

Discard draft?

\n
\n

The draft \"Re: Release planning, week 12\" will be removed from Drafts. This cannot be undone.

\n
\n \n \n
\n
\n
\n
\n
\n

while writing

\n
\n
\n
Ctrl-X
send
\n
Ctrl-O
save the draft
\n
Ctrl-T
pick from the address book
\n
Ctrl-C
cancel, after asking
\n
\n
\n
\n
\n \n\n\n\n
\n
    \n
  1. Inbox
    2. \n
  2. /
    3. \n
  3. help
    4. \n
\n
\n
\n

Help

\n

Every key, by what you are doing when you press it.

\n
\n
Close help
\n
\n \n
\n
\n
\n

Moving

\n
\n
j, k
next, previous message
\n
Tab
the other pane
\n
c
change folder
\n
/
search this folder
\n
\n
\n
\n

Reading

\n
\n
Enter
open the message
\n
Space
one screen down
\n
v
list what is attached
\n
q
back to the list
\n
\n
\n
\n

Writing

\n
\n
m
new message
\n
r, R
reply, reply to all
\n
f
forward
\n
Ctrl-X
send
\n
\n
\n
\n

Filing

\n
\n
s
save to a folder
\n
d, u
delete, undelete
\n
!
flag as important
\n
$
write changes to disk
\n
\n
\n
\n
\n
\n
\n

filters

\n
\n
\n

No filters yet. Mail stays in the inbox until you move it.

\n Add a filter\n
\n
\n
\n
\n

about

\n
\n

chronoskin mail 4.1.3 reads and writes plain mail folders and speaks to two kinds of server. It keeps no copy of your password; it asks the system keyring.

\n

The manual is one text file: read it here or with any pager.

\n
\n
\n Where is my mail kept?\n
\n

In plain folders under your home directory, one file per message.

\n
\n
\n
\n Which servers does it speak to?\n
\n

The two common kinds, both over an encrypted line only.

\n
\n
\n
\n How do I leave?\n
\n

Press q. Changes are written to disk first.

\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.app.s02.p01.t03.u07\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"app\",\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-2137\",\n \"short\": \"v1-tm-2137\"\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: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-heading: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-ui: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --font-mono: \"SF Mono\", \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 32px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 14px;\n --line-body: 1.45;\n --line-heading: 1.3;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 800;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\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: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 6px 5px 0 var(--color-shadow);\n --shadow-control: 3px 3px 0 var(--color-shadow);\n --shadow-control-hover: 3px 3px 0 var(--color-shadow);\n --shadow-control-pressed: 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 16px 12px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-conic-gradient(color-mix(in srgb, var(--color-page) 70%, black) 0% 25%, var(--color-page) 0% 50%) 0 0 / 4px 4px;\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: 3px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }