Decisions2 of 4
Decision tables
Each decision as a row: what the apps do today, what version 2 does, and whether TJ has decided it.
Decided TJ has said so
Recommended from the audit
Open TJ's choice
Color
| Decision | Today | Version 2 | Status |
|---|---|---|---|
| Neutrals | Body text in #000, #3c3c43, slate #0f172a, #111, light on near-black, or the browser default. | Margin's inks, from TJ's books: text, a second and a third gray, two rules, a sunk ground, white paper. The third gray is a step darker than the books' (#6b726f, not #8a918e) so small text passes contrast. Dark is the same ramp at night. | Decided |
| Accent | Black on most apps; VitePress indigo on the toolkit; two blues. | None: ink is the only interface accent, for primary buttons, selected states, focus and the mark. | Decided |
| State | 14 reds, 6 greens, 4 ambers. | One each for success, warning and danger, light and dark, always with a word. | Recommended |
| Focus | At least 6 styles. | 2 px solid ink, 2 px offset, everywhere, inputs included. | Recommended |
| Data | Viridis and red → green, rainbows, a 20-color cluster palette in three copies. | A separate data layer, the only place color is free: viridis for ordered values, with a gray scale of the same lightness step for step; one color-blind-safe set for categories. | Recommended |
Type
| Decision | Today | Version 2 | Status |
|---|---|---|---|
| Families | Seven stacks. | Archivo for structure, IBM Plex Sans for the interface and text, IBM Plex Mono for what the model produced. | Decided |
| Workstation scale | Every app its own. | 13 label and small · 12 caption · 14 control · 16 body · 20 lede and h3 · 28 h2 · 48 h1. | Recommended |
| Slideshow scale | Only one walkthrough has a scale. | Three sizes, as the Reposar Method asks: headline 56, body 28, caption 20. | Decided |
| Case | Uppercase at many trackings, buttons in both cases. | Sentence case everywhere: headings, buttons, menus and labels. | Decided |
Space and shape
| Decision | Today | Version 2 | Status |
|---|---|---|---|
| Spacing | Ad hoc values in most apps. | 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 px. | Recommended |
| Corners | From 0 to pills. | By what you can do: square to read, a small radius to act, the switch to flip. Corners C for now: tags and chips 3 px, controls 5 px, panels 8 px. It will evolve; a change is a few lines in tokens.css. | Decided |
| Elevation | Mostly flat; soft shadows and blur in one app. | A flat page; one shadow for things that float. No blur. | Recommended |
| Breakpoints | Every app its own set. | 640 · 960 (the rail appears) · 1280 ("On this page" appears). | Recommended |
Theme, mark and names
| Decision | Today | Version 2 | Status |
|---|---|---|---|
| Light and dark | Many pages light only; six storage keys. | Every reading and tool page has both, switched by one icon button: a moon in light, a sun in dark (v2/theme.js). Exhibit opens dark. data-theme on <html>, kept as ds.theme, else the system's. | Recommended |
| The mark | Five marks. | A Rough Idea's square A in every top bar, 24 px, inline SVG colored from roles so it follows the theme. An app keeps its own mark as its icon and favicon. The full lockup only for big moments. | Decided |
| Names and titles | Several names per app; many title patterns. | One name per app; titles "Page | App". | Recommended |
Frames and components
| Decision | Today | Version 2 | Status |
|---|---|---|---|
| Workstation | Many headers, rails and navs. | One top bar (the mark, the app, the page, then sections and actions); a rail of 3 columns; content in 9. | Recommended |
| Slideshow | Presentation modes and walkthrough bars. | No top bar; a bar with previous, the caption, n of N, next, full screen and Exit; slides fit without scrolling. | Decided |
| Buttons | Square, rounded, pills and gradients. | 40 px tall (44 on phones), the act radius; the main action ink-filled, the next outlined, a ghost for the rest. | Recommended |
| Fields | Heights from 28 to 40 px; radii 0 to 16. | 40 px tall, a 1 px border, the act radius, the standard focus ring, a caret on menus. | Recommended |
| Panels | Gray fills, glass, 10 to 22 px corners. | A hairline on the page's ground, the panel radius. | Recommended |