{ "id": "v1-tm-6432", "long_id": "v1.terminal.forum.s06.p04.t03.u02", "name": "Terminal, a bulletin board in amber", "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": "forum", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "This is a dial-up bulletin board as its revivals of 2015 to 2026 put it on the web: a forum that lives in one terminal window. One monospace face sets everything, amber text glows on a dark brown screen, boxes are drawn with double lines whose titles are cut into the top edge, and every choice has a letter. It was the look of retro-computing communities, telnet boards with a web front, and the text-mode forums of people who missed the modem.", "url": "https://chrono.skin/s/v1-tm-6432", "preview_url": "https://chrono.skin/s/v1-tm-6432/specimen.html", "files": { "STYLE.md": "# Terminal, a bulletin board in amber\n\n## Summary\n\nThis is a dial-up bulletin board as its revivals of 2015 to 2026 put it on the web: a forum that lives in one terminal window. One monospace face sets everything, amber text glows on a dark brown screen, boxes are drawn with double lines whose titles are cut into the top edge, and every choice has a letter. It was the look of retro-computing communities, telnet boards with a web front, and the text-mode forums of people who missed the modem.\n\n## Layout\n\n- The page is designed for a 1280px window; the content is narrow and fixed. `.ds-window` is one terminal window of `--size-page` (940px, about ninety columns) in the middle of `--fill-page`, `--space-4` from the top: a frame of `--border-width` in `--color-border-strong` on `--color-canvas` with `--shadow-dialog`. It holds, top to bottom, `.ds-window__title` (a small line on `--fill-bar-alt`: what was dialled, the node, the size of the screen), the menu line `.ds-nav`, `.ds-main` (the views, padded `--space-3` and `3ch`) and the status line `.ds-footer`.\n- `.ds-nav` is one line on `--fill-bar`: the `.ds-brand` at the left and `.ds-nav__list` at the right, whose `.ds-nav__link` items each open with their letter in parentheses (`.ds-nav__hot`); the current one is a hole in the bar (`--color-canvas` with `--color-heading`).\n- The home view is one column, top to bottom: `.ds-hero`, the banner after login, centred between two `.ds-hero__shade` rules of typed shade characters; then `.ds-section` blocks `--space-4` (33px) apart: the `.ds-stats` line, the main menu as a `.ds-grid` two by two, the table of boards with its group rows, and `.ds-cols--even`: the newest messages as a list beside the sysop's panel.\n- Inner pages have no hero. They open with the `.ds-breadcrumb` as a path, then `.ds-page-header`, then one column of work: tabs over a list, or notices over messages. `.ds-cols` puts a `--size-side` (230px) sidebar at the right of the messages of a topic; `--form` is 3 to 2 (the form beside a dialog and a panel); `--even` is two equal columns. `.ds-col` is a column that may shrink, `.ds-stack` piles frames `--space-3` apart.\n- Views. The specimen is one small site with four views, one showing at a time; title line, menu line and status line are written once around them. `home` is the main menu. `board` is one board: tabs, the list of topics, pagination and the empty state of the caller's own topics. `thread` is a topic: two notices, its messages as `.ds-post` frames (the first with running text, the last with a quote and links), and a sidebar with the writers and the legend of badges. `post` is the form for writing a message with its four buttons, the confirmation dialog and a panel. A view is `
`; links between views are plain `href=\"#id\"`.\n- Spacing scale, in parts of one 22px text line: `--space-1` 4px is the vertical padding of buttons, inputs, table cells, tabs and the three lines of the window; `--space-2` 11px the padding above the text in a frame, the gap between a rule and what follows and between list rows; `--space-3` 22px the gap between paragraphs, between messages, under a page header and around the banner's title; `--space-4` 33px the gap between sections and above the window; `--space-5` 55px the space below the window. Horizontal steps are character cells written in `ch`.\n- Fixed sizes: `--size-label` 120px the label column of a form, `--size-field` 400px a text input, `--size-date` 110px the date column of the list, `--size-dialog` 360px a dialog.\n- Below 900px the window fills the screen and loses its frame, its title line keeps only the first item, columns stack with the sidebar last, the menu grid becomes one column, form labels sit above their fields, list dates sit above their entries, 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 with its `.ds-nav__link` items evenly spread, the current one still a hole in the bar, and the footer stacks with `.ds-footer__keys` as one spread row. 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-window` is the framed window with its `.ds-window__title` line, `.ds-main` the padded area the views sit in; `.ds-cols` (`--even`, `--form`) are column pairs, `.ds-col` a column that may shrink, `.ds-stack` a pile of frames, `.ds-section` a block of the page.\n- `.ds-nav`: the menu line, 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`: the banner of the home view, centred: a `.ds-hero__shade` rule (shade characters, light to full to light, in `--color-border`), `.ds-hero__title` (`--text-display`, tracked), `.ds-hero__lead`, a `.ds-buttons` row, a small muted `.ds-hero__note` (the last call), and a second shade rule.\n- `.ds-footer`: the status line on `--fill-bar-alt`: `.ds-footer__keys`, a list of `.ds-key` hints each holding a `.ds-footer__link`, and a `.ds-footer__text` at the right (node, time left, clock).\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` 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          
throw it away?
\n          
\n            
Three lines of your reply are not saved as a draft.
\n            
\n              \n              \n            
\n          
\n        
\n      
\n      
\n        
house rules
\n        
\n          
Say which machine. Quote two lines, not twenty. Files go in the file area, not in a message.
\n          
\n          
\n          How long may a message be?\n          
\n          
As long as it needs, in lines of 72 columns.
\n          
\n          
\n          
\n          Where do files go?\n          
\n          
In the file area. A message only names them.
\n          
\n          
\n          
\n        
\n      
\n    
\n  \n
\n\n\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.terminal.forum.s06.p04.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"terminal\",\n \"years\": [\n 2015,\n 2026\n ]\n },\n \"archetype\": \"forum\",\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-6432\",\n \"short\": \"v1-tm-6432\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #e8e8e8;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f3f3f3;\n --color-surface-strong: #dedede;\n --color-bar: #000000;\n --color-bar-text: #ffffff;\n --color-bar-alt: #dedede;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #1c1c1c;\n --color-text-muted: #636363;\n --color-heading: #000000;\n --color-heading-alt: #a3001b;\n --color-link: #0037a6;\n --color-link-quiet: #1c1c1c;\n --color-link-visited: #6a2c91;\n --color-link-hover: #000000;\n --color-link-active: #a3001b;\n --color-border: #000000;\n --color-border-strong: #000000;\n --color-border-muted: #c4c4c4;\n --color-accent: #ffe14d;\n --color-accent-text: #000000;\n --color-accent-alt: #006f80;\n --color-fill-1: #ffffff;\n --color-fill-2: #f3f3f3;\n --color-fill-3: #e8e8e8;\n --color-fill-4: #f3f3f3;\n --color-button: #000000;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffe14d;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #000000;\n --color-disabled: #e8e8e8;\n --color-disabled-text: #8a8a8a;\n --color-danger: #a3001b;\n --color-danger-surface: #fbe9ec;\n --color-success: #1a7a1a;\n --color-warning: #8a5a00;\n --color-notice: #f3f3f3;\n --color-notice-text: #1c1c1c;\n --color-focus: #0037a6;\n --color-shadow: #000000;\n --color-overlay: #c4c4c4;\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: 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" } }