{ "id": "v1-tm-2222", "long_id": "v1.terminal.app.s02.p02.t02.u02", "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": "pure", "viewport": { "width": 1280, "fluid": false }, "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-2222", "preview_url": "https://chrono.skin/s/v1-tm-2222/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 720px 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.\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 (\"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-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
\n
\n\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.app.s02.p02.t02.u02\",\n \"library\": \"2026.10.07-2111\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"pure\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-tm-2222\",\n \"short\": \"v1-tm-2222\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #efe6c8;\n --color-canvas: #fbf5dc;\n --color-surface: #fbf5dc;\n --color-surface-alt: #f1e9c9;\n --color-surface-strong: #e4d9b0;\n --color-bar: #3b2a1a;\n --color-bar-text: #fbf5dc;\n --color-bar-alt: #e4d9b0;\n --color-bar-alt-text: #3b2a1a;\n --color-inverse: #3b2a1a;\n --color-inverse-text: #fbf5dc;\n --color-text: #3b2a1a;\n --color-text-muted: #7a6748;\n --color-heading: #1f140a;\n --color-heading-alt: #9a4a00;\n --color-link: #a64b00;\n --color-link-quiet: #3b2a1a;\n --color-link-visited: #6b4a6e;\n --color-link-hover: #1f140a;\n --color-link-active: #c2410c;\n --color-border: #8c7a58;\n --color-border-strong: #3b2a1a;\n --color-border-muted: #cfc39c;\n --color-accent: #c2410c;\n --color-accent-text: #fffbdc;\n --color-accent-alt: #1a6fb0;\n --color-fill-1: #fbf5dc;\n --color-fill-2: #f1e9c9;\n --color-fill-3: #e4d9b0;\n --color-fill-4: #f1e9c9;\n --color-button: #3b2a1a;\n --color-button-text: #fbf5dc;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #f1e9c9;\n --color-button-secondary-text: #3b2a1a;\n --color-input: #fffdf0;\n --color-input-text: #1f140a;\n --color-input-border: #8c7a58;\n --color-disabled: #e4d9b0;\n --color-disabled-text: #9c8c6a;\n --color-danger: #b3123f;\n --color-danger-surface: #f8e1d4;\n --color-success: #3d7a1c;\n --color-warning: #a86400;\n --color-notice: #f1e9c9;\n --color-notice-text: #3b2a1a;\n --color-focus: #c2410c;\n --color-shadow: #8c7a58;\n --color-overlay: #e4d9b0;\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 --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: 1px;\n --border-width-strong: 3px;\n --border-style: dashed;\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 2px 0 var(--color-border-strong);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-border-strong);\n --shadow-dialog: none;\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: transparent;\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 80%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }