{ "id": "v1-tm-7675", "long_id": "v1.terminal.app.s07.p06.t07.u05", "name": "Terminal, a chat client in commander blue", "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 chat client of 2015 to 2026 that dresses as the text-mode programs people ran in a terminal for the same job: a topic line at the top, a log of timed lines beside a column of names, and at the foot a bar that lists the open windows above the line you type into. One monospace face sets everything, on the blue screen of the DOS file managers and editors with their cyan bars, grey key line, yellow titles and hard black shadows. It was the look of web front ends to chat networks, of community chats of software projects, and of the dashboards their people built for themselves.", "url": "https://chrono.skin/s/v1-tm-7675", "preview_url": "https://chrono.skin/s/v1-tm-7675/specimen.html", "files": { "STYLE.md": "# Terminal, a chat client in commander blue\n\n## Summary\n\nThis is a chat client of 2015 to 2026 that dresses as the text-mode programs people ran in a terminal for the same job: a topic line at the top, a log of timed lines beside a column of names, and at the foot a bar that lists the open windows above the line you type into. One monospace face sets everything, on the blue screen of the DOS file managers and editors with their cyan bars, grey key line, yellow titles and hard black shadows. It was the look of web front ends to chat networks, of community chats of software projects, and of the dashboards their people built for themselves.\n\n## Layout\n\n- The page is designed for a 1280px window and does not stretch beyond it: `.ds-client` is a column of `--size-page` (1280px) on `--color-canvas`, at least as tall as the window. Top to bottom it holds the topic line `.ds-topbar`, `.ds-main` (the views, padded `--space-3` and `2ch`), the `.ds-footer`, and the `.ds-dock`.\n- The navigation is at the foot, not at the top. `.ds-dock` sticks to the lower edge of the window and holds `.ds-nav`, the window list on `--fill-bar-alt` (a clock, the windows as numbered words in brackets, the count of unread lines at the right), and under it `.ds-dock__input`, the line the reader types into. The window that shows is a hole in the bar: `--color-canvas` with `--color-heading`.\n- `.ds-topbar` is one line on `--fill-bar`: the `.ds-brand`, the topic of the place in `.ds-topbar__topic`, and one pulled-down `.ds-menu` at the right.\n- Every view is `.ds-cols`: the work at the left and `.ds-side`, a column of `--size-side` (260px) at the right, parted from it by one upright line that runs the height of the view. `--form` is 3 to 2 without that line (settings, help). `.ds-col` is a column that may shrink; `.ds-stack` piles frames `--space-3` apart.\n- The home view (the lobby) stacks in its left column: `.ds-hero`, the message of the day as a box that stands off the screen with `--shadow-dialog`; the `.ds-stats` line; then `.ds-section` blocks `--space-4` (32px) apart, each opened by a `.ds-section__title` rule: the `.ds-grid` of four pinned channels and the table of channels. The side column holds the names that are on, a panel about the server with two `.ds-progress` bars, and a panel of lines that named the reader.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` as a path, then `.ds-page-header`, then `.ds-cols`. Notices sit directly above the log; tabs sit directly above the list they sort.\n- Views. The specimen is one small client with five views, one showing at a time; topic line, footer and dock are written once around them. `lobby` is the home view. `channel` is one channel: two notices, the `.ds-log` with a day rule, joins, a line that names the reader and a line of links, pagination to older lines, beside the names and the legend of badges. `logs` is a typed search, tabs, the list of hits, the empty state of shared files, beside the archive as a folding tree. `settings` is the account form with its error and four buttons, beside the switches and the question before a nick is dropped. `help` is the rules as running text beside the commands as a folding tree and a panel of keys. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in parts of one 16px step: `--space-1` 4px is the vertical padding of bar items, buttons, inputs, table cells, tabs and log lines; `--space-2` 8px the padding above the text in a frame, the gap between a rule and what follows, between list rows and between notices; `--space-3` 16px the gap between paragraphs, between frames in a stack, under a page header and around the text of the hero; `--space-4` 32px the gap between sections and under the hero, which leaves room for its shadow; `--space-5` 48px is kept for a break larger than a section. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 140px the label column of a form, `--size-field` 420px a text input, `--size-date` 100px the date column of the list, `--size-dialog` 400px a dialog.\n- Below 900px there is one column: the side column goes under the work with a rule above it, the topic is left out, the window list keeps its numbers and shows a name only for the window that is open (the clock and the word before the count are left out), a log line puts time and name on one row and the text under them, the stats line 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 dock stays stuck to the foot. The page never scrolls sideways.\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 (\"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace). Weights are `--weight-body` 400 and 700 for headings, names, bar items (`--weight-ui`) and the brand. Nothing is tracked and nothing is set in capitals: `--heading-transform` and `--ui-transform` are none.\n- Sizes are one size with two exceptions, as on a screen of 80 by 25 cells: `--text-base` 16px with `--line-body` 1.2 is all running text, `--text-ui` 16px bars, buttons, inputs, tabs and pagination, `--text-small` 15px meta lines, hints, badges, the footer and code blocks, `--text-large` 18px the hero's lead and the brand name. `--text-display` 26px is the hero title only, `--text-h1` 20px a page title, a figure and the first heading of running text; `--text-h2` and `--text-h3` are 16px and differ from text by weight and colour.\n- The DOS screen: `--color-page` #000070 is the desktop behind the program (`--fill-page` dithers it with a 4px check of a darker blue), `--color-canvas` #0000a8 the screen, `--color-surface` #0000a8 the inside of frames and table rows, `--color-surface-alt` #00008c alternate rows and code, `--color-surface-strong` #1818c4 group rows, inline code, the cell of an avatar and a line that names the reader. `--color-text` #c6c6c6 is running text, `--color-text-muted` #86a4dc times, counts and hints, `--color-heading` #ffffff headings, names and figures, `--color-heading-alt` #ffff54 frame titles, third headings and tags.\n- Links: `--color-link` #54ffff, `--color-link-quiet` #a8e0ff for breadcrumb, tabs, sidebar and footer links, `--color-link-visited` #dca8ff, `--color-link-hover` #ffffff, `--color-link-active` #ffff54. `--link-decoration` is none: a link is known by its colour, and takes `--link-decoration-hover` (underline) when hovered.\n- Bars: `--color-bar` #00a8a8 with `--color-bar-text` #000000 is the topic line and the head row of a table. `--color-bar-alt` #a8a8a8 with `--color-bar-alt-text` #000000 is the window list. `--color-inverse` #54ffff with `--color-inverse-text` #000000 is inverse video: the current tab, page number and sidebar link, the selected table row, the hovered menu item, the half of a switch that holds.\n- Lines: `--color-border` #a8a8a8 at `--border-width` 1px `--border-style` solid draws every frame and rule; `--color-border-strong` #ffffff at `--border-width-strong` 3px is the rule under a page header, the left edge of the hero, of a notice and of a mentioned line, and the frame of a dialog and a menu; `--color-border-muted` #3c3cd0 parts rows inside a frame.\n- Accents: `--color-accent` #ffff54 with `--color-accent-text` #000000 is the count badge and the mark of a mentioned line; `--color-accent-alt` #54ff54 is the prompt sign, the reader's own name at the input line and the fold marks of a tree. `--color-fill-1` to `--color-fill-4` (#0000a8, #00008c, #004c8c, #1818c4) are the four grid cells and two of the avatar cells. Status words are text in brackets: `--color-success` #54ff54, `--color-warning` #ffb454, `--color-danger` #ff8080; progress bars use the same three.\n- Controls: the primary button is `--color-button` #00a800 with `--color-button-text` #000000; the secondary button is `--color-button-secondary` #000070 with `--color-button-secondary-text` #54ffff and a frame in `--color-border`; fields are `--color-input` #000058 with `--color-input-text` #ffffff and a line in `--color-input-border` #00a8a8; disabled is `--color-disabled` #00008c with `--color-disabled-text` #6464e0. The notice is `--color-notice` #005c78 with `--color-notice-text` #ffffff, the error notice `--color-danger-surface` #400014 with `--color-danger`. `--color-overlay` #000058 is the block a dialog stands on; `--color-focus` #ffff54 is the focus outline.\n- Surface: everything is square and every shadow is a hard black block, as a text screen draws it: `--shadow-control` 3px 3px on buttons and fields (1px 1px when pressed), `--shadow-panel` 6px 5px on frames, `--shadow-dialog` 16px 12px on the hero, a dialog and a pulled-down menu, none of them blurred. `--shadow-text` is none. Buttons and fields are filled (`--fill-button-secondary`, `--fill-input`); `--fill-button-hover` lightens the button (60% of it over white). All four radii are 0, `--backdrop-blur` is 0px, `--focus-ring` is 3px solid var(--color-focus), `--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`. `--color-button-secondary-text` and `--color-input-text` must read on their own fills and on the canvas and surfaces, because a surface set may leave those controls unfilled. The current item of a bar is a hole in it: `--color-canvas` with `--color-heading`. Nothing but a link in the bar's own text colour, 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; the log's columns are `6ch` for the time and `17ch` for the name; an avatar is at least `4ch` wide; a pulled-down menu is at least `28ch` and a tooltip at most `34ch` wide; horizontal paddings and gaps are whole character cells.\n\n## Components\n\n- `.ds-page` on ``: page fill and base type, no margin. `.ds-client` is the screen; `.ds-main` holds the views; `.ds-cols` (`--form`) are the column pairs, `.ds-col` a column, `.ds-side` the column of names at the right, `.ds-stack` a pile of frames, `.ds-section` a block of the page.\n- `.ds-nav`: the window list in the dock at the foot. `.ds-nav__clock` is the time in brackets, `.ds-nav__list` holds `.ds-nav__link` items, each a `.ds-nav__num` and a `.ds-nav__name` in brackets, and `.ds-nav__act` at the right holds a `.ds-nav__word` and the count of unread lines as a `.ds-badge`. The stylesheet marks the link whose `href` names the view that is showing (one selector per view, and the first when the address names none); on a page of its own give the link `is-current`. `.ds-dock` is the sticky block around it; `.ds-dock__input` is the input line: `.ds-dock__who`, the reader's name in brackets, and a `.ds-form__input`.\n- `.ds-topbar`: the topic line at the top, on `--fill-bar`: the brand, `.ds-topbar__topic` (one line, cut with an ellipsis) and a `.ds-menu`.\n- `.ds-hero`: the message of the day on the home view: a box in `--color-border-strong` with a heavy left edge and `--shadow-dialog`. It holds `.ds-hero__motd` (a small line opened by `.ds-hero__sign`, the `-!-` of a server line), `.ds-hero__title` (`--text-display`), `.ds-hero__lead`, a `.ds-buttons` row and `.ds-hero__note`.\n- `.ds-footer`: one quiet line above the dock, with a faint rule: a `.ds-keys` list of `.ds-footer__link` items 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 topic line. `.ds-brand__mark` is a tile one text line square, dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`) with a line in the bar's text colour; `.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 (in a channel, its topic); `.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. `.ds-links` sets several in a wrapping line.\n- `.ds-button`: a `\n          \n          \n          \n        \n      \n    \n    
\n      
\n        
the client shows
\n        
\n          
\n          
\n          
\n          
\n        
\n      
\n      
\n        
\n          
drop the nick?
\n          
\n            
reader will be free for anyone to take after 30 days. Your lines stay in the logs.
\n            
\n              \n              Keep it\n            
\n          
\n        
\n      
\n    
\n  \n
\n\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. /
    3. \n
  3. help
    4. \n
\n
\n
\n

Help

\n

The rules of the place and the commands that get you around it.

\n
\n
Ask in #help
\n
\n
\n
\n
\n

Rules and first steps

\n

chronoskin chat is a small server for people who use and build chronoskin. It speaks a plain line protocol, so any client works; this page is one of them.

\n

Three rules

\n
    \n
  • Be kind. Disagree with the idea, not with the person.
    • \n
  • Paste text, not pictures of text. Long pastes go to a file.
    • \n
  • Ask your question at once; do not ask whether you may ask.
    • \n
\n

Getting around

\n

Everything is a command typed into the input line at the foot. A command starts with a slash: /join #help opens a channel, /part leaves it.

\n

Windows

\n

Each channel is a window with a number. The window list above the input line shows them, and the one you are reading is cut out of the bar.

\n

Mentions

\n

A line that names you is set on a stronger ground with a mark at its left edge, and its window gets a count.

\n
\n
\n
\n
\n

commands

\n
\n
\n
\n channels\n
\n

/join #name open a channel

\n

/part leave this one

\n

/topic text set the topic

\n
\n
\n
\n people\n

/msg nick text write to one person

\n
\n
\n yourself\n

/nick name take another name

\n
\n
\n the server\n

/list every public channel

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

keys

\n
\n
    \n
  • alt 1..9 window
    • \n
  • tab finish a nick
    • \n
  • pgup older lines
    • \n
  • ctrl l redraw
    • \n
\n
\n
\n
\n
\n
\n\n\n\n\n\n
\n \n \n
\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.app.s07.p06.t07.u05\",\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-7675\",\n \"short\": \"v1-tm-7675\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #070400;\n --color-canvas: #120a00;\n --color-surface: #1a0f00;\n --color-surface-alt: #241500;\n --color-surface-strong: #382100;\n --color-bar: #ffb000;\n --color-bar-text: #120a00;\n --color-bar-alt: #382100;\n --color-bar-alt-text: #ffc955;\n --color-inverse: #ffcf70;\n --color-inverse-text: #120a00;\n --color-text: #e89b00;\n --color-text-muted: #a86c00;\n --color-heading: #ffcf70;\n --color-heading-alt: #fff1b8;\n --color-link: #ffd98f;\n --color-link-quiet: #e89b00;\n --color-link-visited: #c98f52;\n --color-link-hover: #fff7dd;\n --color-link-active: #ffffff;\n --color-border: #7d4c00;\n --color-border-strong: #e89b00;\n --color-border-muted: #472b00;\n --color-accent: #fff1b8;\n --color-accent-text: #120a00;\n --color-accent-alt: #ff7a1a;\n --color-fill-1: #1a0f00;\n --color-fill-2: #241500;\n --color-fill-3: #382100;\n --color-fill-4: #241500;\n --color-button: #e89b00;\n --color-button-text: #120a00;\n --color-button-hover-text: #000000;\n --color-button-secondary: #241500;\n --color-button-secondary-text: #ffcf70;\n --color-input: #070400;\n --color-input-text: #ffcf70;\n --color-input-border: #7d4c00;\n --color-disabled: #241500;\n --color-disabled-text: #7d4c00;\n --color-danger: #ff5a36;\n --color-danger-surface: #2a0800;\n --color-success: #b5e853;\n --color-warning: #ffee58;\n --color-notice: #241500;\n --color-notice-text: #ffcf70;\n --color-focus: #fff1b8;\n --color-shadow: #000000;\n --color-overlay: #382100;\n}\n\n/* @part type */\n:root {\n --font-body: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-heading: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-ui: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --font-mono: \"Cascadia Mono\", Consolas, \"Lucida Console\", Menlo, \"Liberation Mono\", monospace;\n --text-base: 16px;\n --text-small: 15px;\n --text-ui: 16px;\n --text-large: 18px;\n --text-display: 26px;\n --text-h1: 20px;\n --text-h2: 16px;\n --text-h3: 16px;\n --line-body: 1.2;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 700;\n --weight-display: 700;\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: 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: 1px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 1px 1px 0 var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: inset 0 -2px 0 var(--color-focus);\n --shadow-control-pressed: inset 0 0 0 1px var(--color-shadow);\n --shadow-dialog: 4px 4px 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-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 75%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }