/* ==== PIPOS CANONICAL TOKENS v1 ==================================== The design-language source of truth for PIP the POD surfaces. Canonical copy: pip-website/assets/tokens/pipos-tokens.css The portal's copy is generated by scripts/sync-tokens.mjs — never edit it there. Bump the version comment on breaking renames. Register: classic Mac System 3–6 order, System 7 colour restraint. Grounds are SUPERCOLOR neutrals verbatim; accents are SUPERCOLOR channel bars rationed to three jobs (amber=selection, brick=live, channel hues=filing). Colour is light: it needs a nameable emitter, and objects occlude it. One lit field per view. =================================================================== */ :root { /* Paper is the ground. Declaring light-only stops auto-darkening heuristics (e.g. Chrome Android) from inverting the dither. */ color-scheme: light; /* -- grounds ------------------------------------------------------ */ --paper: #F6F2DC; /* the page and every raised surface */ --wash: #EBE8D3; /* recessed only: desktop, tracks, empty cells */ --ink: #121912; /* every glyph, every hairline. 1-bit. */ --ink3: #666A5A; /* dormant detail + large data only. never body */ /* 4.94:1 on paper, 4.51:1 on wash. The previous #6E7261 was 4.40 and 4.01 — under AA on BOTH grounds, and the only a11y failure on the site. Same hue, 7% darker. Do not lighten it back. */ --ink3-text: var(--ink3); /* the muted tone WHEN IT IS TYPE. */ /* Same value at rest, so nothing moves. It is a separate name because --ink3 does two jobs at once — it dresses dormant TEXT and it draws hairlines, rims and dividers — and the two have to go opposite ways in accessibility mode: muted text stops existing (it goes to ink), while a divider still has to be a divider. One token cannot do both, which is the same shape of problem as --ink3 vs --ink3-inv. Rule: `color:` takes --ink3-text. Borders, strokes, shadows and fills take --ink3. */ --ink3-inv: #A0A58D; /* the SAME job on an ink ground. */ /* One muted tone cannot serve both grounds: it has to move in opposite directions for each. --ink3 on ink is 3.22:1 and darkening it for paper makes ink worse. This is 7.04:1 on ink. Any surface with background:var(--ink) — the crash screen, a loud panel, a dialog title bar, the portal's recorder — uses this, not --ink3. */ /* -- accent jobs (three; there is no fourth) ---------------------- */ --amber: #ECB03E; /* selection: what you chose */ --brick: #D14226; /* live: happening now. one per screen. */ /* NON-TEXT. It is a dot, a lamp, a 5px spine. 3:1 is the bar it has to clear and it does (3.85:1 on paper). As type it is 4.13:1 and near-symmetric, so inverting does not save it. */ --brick-text: #922E1B; /* the same red, for alert COPY. */ /* 7.10:1 on paper, 6.47:1 on wash. Consumers reach for red on an alert whatever the doc says, so there is one that reads. On an ink ground it is 2.24:1 — use --amber there (9.24:1), never this. */ --ch-cyan: #1391B1; /* filing hues: spine + dot only */ --ch-lime: #93B52B; --ch-magenta: #F04383; --ch-orange: #F96324; /* -- voices ------------------------------------------------------- */ --type-bit: 'Silkscreen', 'Chicago', monospace; /* machine */ --type-doc: 'Newsreader', 'New York', Georgia, serif; /* human */ --type-mono: ui-monospace, Monaco, Menlo, 'Courier New', monospace; /* data */ /* -- tone: 1-bit dither on a fixed 4px grid ----------------------- */ --d25: conic-gradient(var(--ink) 25%, transparent 0); --d50: conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0); /* the same 50% checker in amber: a glow made of dots, not of blur */ --d50-amber: conic-gradient(var(--amber) 25%, transparent 0 50%, var(--amber) 0 75%, transparent 0); --dither-size: 4px 4px; /* desktop stipple: one 1px dot per 4px cell (6.25%) */ --stipple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23121912'/%3E%3C/svg%3E"); /* -- chrome scalars ----------------------------------------------- */ --hairline: 1px solid var(--ink); --shadow-hard: 2px 2px 0 var(--ink); /* zero blur, always */ --shadow-hard-lg: 3px 3px 0 var(--ink); /* dialogs only */ --titlebar-h: 21px; --winbox: 11px; /* close/zoom box size */ --radius-btn: 7px; /* buttons */ --radius-da: 12px; /* desk accessories */ /* -- motion: steps() only, nothing longer than 200ms -------------- */ --step-fast: 100ms; --step-slow: 200ms; /* -- THE SPATIAL CONTRACT ------------------------------------------ The 4px dot grid is not just texture — it is the spacing quantum. Every padding, gap and line-height is a multiple of 4. One column width governs the desk: every window is exactly --col wide; inner layouts subdivide it. Below 768px the desk becomes a stack of full-bleed sheets: same content, same order, hairlines instead of gaps, --pad-win drops one step. Nothing reorders, nothing hides except furniture that has no job on a small screen. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --col: 1080px; /* the one column; all desk windows this wide (the 11c sheet's composition width) */ --gap-desk: var(--s5);/* between windows on the desk */ --pad-win: var(--s6); /* window body padding (desktop) */ --pad-win-m: var(--s4); --measure: 62ch; /* document text measure */ --measure-lede: 54ch; /* type scale: Newsreader on a perfect fourth (×1.333) from 17px, line-heights snapped to the 4px grid. Machine voice is fixed. */ --fs-doc: 17px; --lh-doc: 28px; --fs-h3: 22px; --lh-h3: 28px; --fs-h2: 30px; --lh-h2: 36px; --fs-h1: 40px; --lh-h1: 44px; --fs-sys: 10px; /* chrome; never wraps, ellipsizes */ --fs-sys-sm: 9px; /* status strips */ --fs-data: 11px; /* mono data; never wraps */ } /* ==== END PIPOS CANONICAL TOKENS ==================================== */