{ "id": "v1-tm-7124", "long_id": "v1.terminal.app.s07.p01.t02.u04", "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-7124", "preview_url": "https://chrono.skin/s/v1-tm-7124/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 (\"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-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.p01.t02.u04\",\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-7124\",\n \"short\": \"v1-tm-7124\"\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: \"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 --figure-shift: 0em;\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: 2px;\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: 4px 4px 0 var(--color-shadow);\n --shadow-control: 2px 2px 0 var(--color-shadow);\n --shadow-control-hover: 4px 4px 0 var(--color-shadow);\n --shadow-control-pressed: inset 2px 2px 0 var(--color-shadow);\n --shadow-dialog: 12px 12px 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-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 85%, white);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: transparent;\n --focus-ring: 2px dotted var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }