{ "id": "v1-tm-5262", "long_id": "v1.terminal.app.s05.p02.t06.u02", "name": "Terminal, a monitor in sixteen colours", "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 monitoring screen as terminal programs draw it and as web dashboards of 2015 to 2026 copied it: process viewers, multiplexers and status boards. One small monospace face sets everything, grey text stands on black with the sixteen terminal colours for states, and the screen is cut into tiles that share one thin line and name themselves on a grey title line. It was the look of server monitors, text-mode weather and status pages, and of admin tools that wanted to feel like the shell they sat beside.", "url": "https://chrono.skin/s/v1-tm-5262", "preview_url": "https://chrono.skin/s/v1-tm-5262/specimen.html", "files": { "STYLE.md": "# Terminal, a monitor in sixteen colours\n\n## Summary\n\nThis is a monitoring screen as terminal programs draw it and as web dashboards of 2015 to 2026 copied it: process viewers, multiplexers and status boards. One small monospace face sets everything, grey text stands on black with the sixteen terminal colours for states, and the screen is cut into tiles that share one thin line and name themselves on a grey title line. It was the look of server monitors, text-mode weather and status pages, and of admin tools that wanted to feel like the shell they sat beside.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch beyond it: `.ds-screen` is a column of `--size-page` (1280px) on `--color-canvas`, at least as tall as the window: the window list `.ds-nav`, then `.ds-main` (the views, padded `--space-3` and `2ch`), then the status line `.ds-footer` at the foot.\n- `.ds-nav` is one line on `--fill-bar-alt`: the `.ds-brand`, then `.ds-nav__list`, whose `.ds-nav__link` items are windows named by number (`.ds-nav__num`, bold, followed by a colon) and word; the current one is inverse video. `.ds-nav__status` is the refresh interval and clock at the right.\n- Tiles. A `.ds-deck` is one block of tiles with `--shadow-panel`. Inside it, rows are `.ds-tiles` grids: plain (one column), `--top` and `--even` (two equal columns) or `--work` (the work at the left, a rail of `--size-side` 320px at the right); `.ds-tiles__col` piles tiles in one column, the last one taking what height is left. A tile is a `.ds-tile`, `.ds-panel`, `.ds-sidebar__block`, `.ds-stat` or `.ds-grid__cell`: each has all four lines in `--color-border` and overlaps its neighbour by `--border-width`, so tiles share the line between them and there is never a gap. A tile opens with a title line on `--color-surface-strong` in `--color-heading-alt` (`.ds-tile__title`, with a muted `.ds-tile__aside` at its right end), then `.ds-tile__body` (`--flush` for a table) and an optional `.ds-tile__foot` (`--bare` when it is all the tile holds).\n- The home view is one deck: a `--top` row with the `.ds-hero` tile (title, lead, two buttons) beside a tile of `.ds-gauges`; the `.ds-stats` row of four figure tiles; and a `--work` row with the table of hosts at the left and, in the rail, the `.ds-sidebar` tile over the log `.ds-panel`.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` (where there is a level above) and `.ds-page-header`, then tabs or notices straight on the canvas, then one deck: hosts as a `.ds-grid` of tiles over a pagination tile and an `--even` row; alerts as an `--even` row of a list and a runbook; settings as a `--work` row of a form beside a dialog and a panel.\n- Views. The specimen is one small site with four views, one showing at a time; window list and status line are written once around them. `overview` is the home view. `hosts` is every host as a tile under tabs, with pagination, the empty state of the paused hosts and the legend of badges. `alerts` is two notices, the list of today's alerts and the runbook of one of them as running text with links. `settings` is the form of one host with its four buttons, the confirmation dialog and a panel. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale: rows are one text line and nothing is padded more than it must be. `--space-1` 2px is the padding of a tile's foot and of form controls; `--space-2` 6px the padding above the text in a tile, the height added to a window-list item, the gap between list rows and between notices; `--space-3` 12px the gap between blocks on the canvas, under a page header and below the text in a tile; `--space-4` 18px the foot of the main area; `--space-5` 36px is kept for a break larger than a block. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 130px the label column of a form, `--size-field` 440px a text input, `--size-date` 80px the time column of the list, `--size-dialog` 380px a dialog.\n- Below 900px every row of tiles is one column, the stats row is two by two, the grid is one column, the clock in the window list is left out, form labels sit above their fields, and table cells marked `.ds-table__extra` are left out. The page never scrolls sideways. The status at the right of the window list (`.ds-nav__status`) is left out; below 600px `.ds-nav__list` takes a row of its own under the brand with its windows spread to both edges, scrolling sideways if they do not fit, the current one still in inverse video. 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 (\"Fira Mono\", \"Ubuntu Mono\", \"PT Mono\", \"Courier New\", monospace). Headings are not bold: `--weight-heading` and `--weight-display` are 400, and a heading is told by capitals, tracking and a brighter amber. `--weight-bold` 700 is for titles of topics, figures and letters of the menu.\n- Large for a terminal, as a screen of ninety columns is: `--text-base` 17px with `--line-body` 1.3 is all running text, `--text-ui` 17px the menu line, buttons, inputs, tabs and pagination, `--text-small` 15px meta lines, hints, badges, code blocks and the window's title and status lines, `--text-large` 19px the banner's lead and the brand name. `--text-display` 36px is the banner title only, `--text-h1` 24px a page title and the letters of the menu, `--text-h2` 19px section rules, `--text-h3` 17px frame titles. `--heading-transform` is uppercase with `--heading-tracking` 0.08em; `--display-tracking` is 0.12em; `--ui-transform` is none.\n- An amber phosphor screen: every colour is a step of one amber on brown-black; only the status colours and the orange accent leave the family.\n- The screen: `--color-page` #070400 is the room, `--color-canvas` #120a00 the screen, `--color-surface` #1a0f00 table rows, `--color-surface-alt` #241500 alternate rows, the head of a message and code blocks, `--color-surface-strong` #382100 group rows and inline code. `--color-text` #e89b00 is running text, `--color-text-muted` #a86c00 dates, counts, hints and quotes, `--color-heading` #ffcf70 headings and figures, `--color-heading-alt` #fff1b8 frame titles, third headings and tags.\n- Links: `--color-link` #ffd98f, `--color-link-quiet` #e89b00 for breadcrumb, tabs and sidebar links, `--color-link-visited` #c98f52, `--color-link-hover` #fff7dd, `--color-link-active` #ffffff. Links are brighter than text, not underlined (`--link-decoration` and `--link-decoration-quiet` none) until hovered (`--link-decoration-hover` underline).\n- Bars: `--color-bar` #ffb000 with `--color-bar-text` #120a00 is the menu line and the head row of a table. `--color-bar-alt` #382100 with `--color-bar-alt-text` #ffc955 is the window's title line and status line. `--color-inverse` #ffcf70 with `--color-inverse-text` #120a00 is inverse video: the letters of the main menu, the current tab, page number and sidebar link.\n- Lines are double, as box characters draw them: `--border-style` double at `--border-width` 3px in `--color-border` #7d4c00 draws every frame, rule and table row; `--border-width-strong` 6px in `--color-border-strong` #e89b00 is the rule under a page header and the left edge of a notice, and the strong colour frames the window, a notice and a dialog; `--color-border-muted` #472b00 parts rows inside a frame.\n- Accents: `--color-accent` #fff1b8 with `--color-accent-text` #120a00 is the count badge; `--color-accent-alt` #ff7a1a the board numbers and the prompt sign. `--color-fill-1` to `--color-fill-4` (#1a0f00, #241500, #382100, #241500) are the four cells of the main menu. Status words: `--color-success` #b5e853, `--color-warning` #ffee58, `--color-danger` #ff5a36.\n- Controls: the primary button is `--color-button` #e89b00 with `--color-button-text` #120a00; the secondary button is unfilled (`--fill-button-secondary` transparent) with `--color-button-secondary-text` #ffcf70 in a frame of `--color-border`; fields are unfilled with `--color-input-text` #ffcf70 and a line in `--color-input-border` #7d4c00; disabled is `--color-disabled` #241500 with `--color-disabled-text` #7d4c00. The notice is `--color-notice` #241500 with `--color-notice-text` #ffcf70, the error notice `--color-danger-surface` #2a0800 with `--color-danger`. `--color-overlay` #382100 is the block a dialog stands on; `--color-focus` #fff1b8 the focus outline, `--focus-ring` 1px dotted.\n- Surface: `--fill-panel` is transparent, so frames are only their lines on the screen. `--shadow-text` is the phosphor glow, a 6px bloom of the heading colour at 45%, on the banner title, page titles, figures and the brand name. There is no box shadow at rest (`--shadow-panel`, `--shadow-control`, `--shadow-dialog` none); a hovered button gets a one-pixel ring of its own colour, a pressed one an inset line; `--fill-button-hover` lightens the button. All four radii are 0, `--backdrop-blur` is 0px and `--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`. 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. Whatever is current or selected is inverse video (`--fill-inverse` with `--color-inverse-text`); where the navigation stands on `--fill-bar`, its current item is a hole in the bar: `--color-canvas` with `--color-heading`.\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; horizontal paddings and column gaps are whole character cells; the banner's lead is at most `62ch` wide; the checkbox is `2ch` square. Inside a message the first two headings of running text are one step smaller (`--text-h2`, `--text-h3`).\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-screen` is the column of the whole screen, `.ds-main` the padded area the views sit in, `.ds-deck`, `.ds-tiles` (`--top`, `--even`, `--work`), `.ds-tiles__col` and `.ds-tile` the tiles described under Layout.\n- `.ds-nav`: the window list at the top, 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`: a tile like the others: its title line, then `.ds-hero__title` (`--text-display`), `.ds-hero__lead` and a `.ds-buttons` row. It states what the screen shows in one sentence.\n- `.ds-footer`: the status line on `--fill-bar-alt`: `.ds-footer__session` (the program's name on `--fill-bar`), `.ds-footer__keys`, a list of `.ds-key` hints each holding a `.ds-footer__link`, and `.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-base`, in `--color-bar-alt-text` because it stands on the window list. 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.\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
\n

confirm

\n
\n
\n

remove db-03?

\n
\n

Its 112 days of figures are deleted with it. Pausing keeps them.

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

what is kept

\n
\n

One line per answer for a day, one per minute for a month, one per hour after that.

\n
\n
\n
\n \n \n\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.app.s05.p02.t06.u02\",\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-5262\",\n \"short\": \"v1-tm-5262\"\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: \"Fira Mono\", \"Ubuntu Mono\", \"PT Mono\", \"Courier New\", monospace;\n --font-heading: \"Fira Mono\", \"Ubuntu Mono\", \"PT Mono\", \"Courier New\", monospace;\n --font-ui: \"Fira Mono\", \"Ubuntu Mono\", \"PT Mono\", \"Courier New\", monospace;\n --font-mono: \"Fira Mono\", \"Ubuntu Mono\", \"PT Mono\", \"Courier New\", monospace;\n --text-base: 17px;\n --text-small: 15px;\n --text-ui: 17px;\n --text-large: 19px;\n --text-display: 36px;\n --text-h1: 24px;\n --text-h2: 19px;\n --text-h3: 17px;\n --line-body: 1.3;\n --line-heading: 1.2;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: uppercase;\n --heading-tracking: 0.08em;\n --display-tracking: 0.12em;\n --figure-shift: 0em;\n --ui-transform: none;\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" } }