/* okidok.io - platform design tokens (source of truth) Neutral chrome, one accent, tonal module surfaces. Tenants override ONLY --tenant-* . */ :root{ /* Surfaces */ --paper:#F5F4F0; /* app background */ --paper-2:#ECEBE7; /* segmented-control track, rail hover, canvas behind rooms */ --paper-3:#FAFAF8; /* scoreboard / secondary panel */ --surface:#FFFFFF; /* cards, tiles */ --line:#E6E5E0; /* all 1px borders */ /* Ink */ --ink:#15171B; /* primary text, filled black buttons, "ok" mark */ --ink-2:#5C6068; /* secondary text */ --ink-3:#63666E; /* meta text, section labels */ --ink-4:#9A9EA6; /* decorative: dots, rules, disabled only */ /* Brand accent (okidok blue) */ --accent:#2F5BFF; --accent-ink:#1E3A8A; /* text on --tone-blue */ /* Semantic */ --pos:#1F9D63; --pos-bright:#7CF2B0; /* money up, live dot; bright = on dark */ --hot:#E5484D; --warm:#F0A020; --cold:#8B9BB4; /* Tonal module surfaces (Google-ish) + their ink */ --tone-blue:#E8EDFF; --tone-blue-ink:#1E3A8A; /* leads, funnel */ --tone-amber:#FFF1DC; --tone-amber-ink:#7A4A00; /* calls, calendar */ --tone-green:#E6F4EC; --tone-green-ink:#14532D; /* revenue, classroom, customer */ --tone-violet:#F3E8FF; --tone-violet-ink:#4C1D95; /* members, community */ --tone-coral:#FFE8E6; --tone-coral-ink:#9F1D1D; /* social / inbox */ --tone-dark:#15171B; --tone-dark-ink:#A0A4AC; /* money tile */ /* Tenant (overridable per tenant; shown as swatch + avatar only, never as chrome) */ --tenant:#21372A; --tenant-fg:#EFE6D3; /* Type */ --font:'Instrument Sans',system-ui,-apple-system,sans-serif; /* Radii */ --r-pill:999px; --r-tile:28px; --r-card:24px; --r-card-sm:18px; --r-control:14px; --r-chip:10px; --r-seg:9px; /* Shadows */ --shadow-float:0 20px 50px -20px rgba(21,23,27,.4); /* composer, floating pill */ --shadow-seg:0 1px 2px rgba(0,0,0,.08); /* selected segment */ --shadow-frame:0 30px 80px -30px rgba(21,23,27,.35); /* artboards only */ /* Layout */ --rail-w:72px; --topbar-h:73px; --scoreboard-w:320px; --page-x:36px; --thread-max:760px; --bubble-max:560px; /* Motion */ --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:120ms; --dur:220ms; --dur-view:280ms; } @keyframes okpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}} /* okidok.io platform token additions. The design source of truth is docs/handoff/design/tokens.css, which is an import from the design side and is never edited here. These four are named by the People handoff (docs/handoff-people/README.md, "Design tokens used" and SCREENS 1i) and are not in that file yet, so they live in this committed file and are concatenated onto the generated tokens.css by packages/ui/scripts/copy-tokens.mjs and apps/admin/scripts/copy-tokens.mjs (ruling R2-T). All four are DECORATIVE: none of them may ever be a text colour, which packages/ui/tests/contrast.test.ts enforces by reading every stylesheet in both trees. */ :root{ --line-2:#F0EFEA; /* table row dividers, field-row dividers */ /* Finding M2: nothing paints with --ink-5 yet, and the three uses this comment used to claim went to --ink-3 and --ink-4 for the contrast gate. It stays declared as the forward declaration for the drag handles standard 2 asks for on every ordered list (fields, options, stages, journeys); the day reordering ships, the handle is this grey. */ --ink-5:#C9C8C3; /* waiting on the reorder drag handles (standard 2) */ --line-strong:#D9D8D3; /* unchecked checkbox border, the phone sheet's grabber */ --scrim:rgba(21, 23, 27, .35); /* the phone sheet's scrim (SCREENS 1i) */ /* Codex round 3, finding 3: the shell's own chrome climbs as high as z-index 30 (apps/admin/ src/shell/shell.css: .shell-topbar 20 (the space menu lives inside it), .shell-tabbar 30, .shell-skip 40 while focused). The drawer's scrim and sheet must sit above every one of those, or the shell's tab bar stays tappable through a sheet that claims aria-modal. */ --z-sheet-scrim:40; --z-sheet:41; } /* okidok design contract, additive tokens (v1, 2026-09-13). Concatenated after docs/handoff/design/tokens.css by the same copy-tokens.mjs mechanism that already appends packages/ui/src/tokens-platform.css. Nothing here overrides a value in the design source of truth: every declaration is either a new name, or an alias that points at an existing token so screens stop spelling the raw one out. Rules for this file (contract 8.1): every token has a named use, no token is a literal colour that is not already in the source of truth, and no token is added without a test in TESTS.md. Decorative-only tokens say so; the contrast test in packages/ui refuses them as text colours. */ :root{ /* ---- Motion ------------------------------------------------------------ --ease, --dur-fast, --dur and --dur-view already exist upstream. These add the two curves and the three durations the grammar needs (MOTION.md). */ --ease-standard:var(--ease); /* alias, so MOTION.md reads as one set */ --ease-exit:cubic-bezier(.4,0,1,1); /* exits only: opacity out, no translate */ --ease-spring:cubic-bezier(.2,1.1,.3,1); /* reorder land, chip pop. Overshoot 10 percent */ --dur-micro:80ms; /* press */ --dur-slow:420ms; /* phone sheet, and the ask corner's arrival (UP-10) */ --stagger:24ms; /* per row, capped at 8 rows */ --dur-pass:560ms; /* move 8, pass: one chip's travel into the AI app (CC-M1) */ --stagger-pass:96ms; /* move 8, pass: between chips, at most 8 (CC-M1) */ --dwell-toast:6000ms; /* undo window on a receipt */ /* ---- Elevation --------------------------------------------------------- --shadow-float, --shadow-seg and --shadow-frame already exist. Rows needed two more: one for "this row can be opened" and one for "this row is in your hand". */ --shadow-raise:0 1px 2px rgba(21,23,27,.06), 0 2px 8px -4px rgba(21,23,27,.10); --shadow-lift:0 8px 24px -8px rgba(21,23,27,.22); --shadow-sheet:0 24px 64px -24px rgba(21,23,27,.38); /* ---- Focus ------------------------------------------------------------- One ring for the whole product. Button.css uses ink today, TableShell and SearchField use accent: accent wins, because it reads on --surface, --paper and --paper-3 alike. */ --focus-ring:2px; --focus-offset:2px; --focus-colour:var(--accent); --focus-inset:-2px; /* rows and cells, where an outset ring clips */ /* ---- Fields ------------------------------------------------------------ The five declarations settings.css, setup.css and drawer.css each write out by hand. */ --field-h:44px; --field-h-sm:36px; /* inside a dense row only, never on a phone */ --field-px:12px; --field-bg:var(--paper-3); --field-bg-focus:var(--surface); --field-border:var(--line); --field-border-focus:var(--accent); --field-border-error:var(--hot); --field-label:13px; --field-text:16px; /* 16 minimum: a smaller field zooms iOS */ /* ---- Rows and sections ------------------------------------------------- Row heights were 44, 52 and 56 across three files. Two densities, named. */ --row-h:56px; --row-h-dense:44px; --row-px:16px; --row-hover:var(--paper-3); --row-selected:var(--paper-2); /* decorative surface; neutral, so no state chip's wash vanishes on it (CC-7, contract 2.4, #300) */ --section-gap:24px; /* between section cards */ --stack-gap:12px; /* between fields in a form */ --inline-gap:10px; /* between controls on one line */ /* ---- Drag and drop ----------------------------------------------------- */ --grip-w:24px; --grip-ink:var(--ink-3); /* the grip glyph: a control graphic, 3:1 or better (DEVIATIONS) */ --dnd-placeholder:var(--paper-2); /* DECORATIVE */ --dnd-insert:var(--accent); /* 2px insertion line */ /* ---- Overlays ---------------------------------------------------------- */ --menu-w:240px; --combo-max-h:320px; --sheet-w:400px; /* desktop drawer column */ --toast-max:480px; --z-raised:1; /* above a card's own rows: a sticky save bar, a row's lead cell */ --z-menu:35; /* above shell chrome (30), below sheet (40) */ --z-toast:50; /* above the sheet: a receipt can report on it */ --z-ask:25; /* the ask corner and dock: over sticky headers (20), under shell chrome (30) */ --z-ask-label:26; /* the corner's hover label, one above the corner it names */ /* ---- Plan additions ---------------------------------------------------- docs/superpowers/plans/2026-09-14-design-contract-primitives.md and, from --new-w on, 2026-09-14-design-contract-screens.md. Contract 8.1: each has a named use and a test (packages/ui/tests/tokensContract.test.ts, motion.test.ts, reducedMotion.test.ts). */ --loop-shimmer:1400ms; /* RC-10: the skeleton shimmer, a loop, not a move */ --loop-pulse:1600ms; /* RC-10: the live dot pulse */ --motion-shift:1; /* RC-9: every travel multiplies by this; motion.css sets 0 */ --field-border-w:1px; /* plan Task 10: a control's border and an in-place value's, one width (inlineEditCss.test.ts) */ /* ---- The ask surface --------------------------------------------------- docs/superpowers/plans/2026-09-14-ask-surface.md, ruling RA-9. Each is painted by packages/ui/src/AskSurface/AskSurface.css or apps/admin/src/shell/shell.css and pinned by packages/ui/tests/askSurfaceCss.test.ts. */ --ask-corner:76px; /* the resting corner (AS-3) */ --ask-corner-hover:96px; /* the hovered corner (AS-4) */ --ask-corner-phone:64px; /* the corner on the phone, above the tab bar (AS-7) */ --tabbar-h:84px; /* the phone tab bar, which the corner rests on (RA-4) */ --tabbar-rule:1px; /* the tab bar's top hairline, part of the edge the corner rests on */ --loop-breathe-quiet:5s; /* the quiet corner's breath, a loop, not a move */ --loop-wobble:3s; /* the hovered corner's wobble, a loop */ --loop-dots:1s; /* the thinking dots, a loop */ --loop-dots-stagger:150ms; /* between the three dots */ /* Task 2b, the ambient readout (AS-20 to AS-23). The three lifts are decorative only, the arc on ink, never text (contrast.test.ts), exactly as --pos-bright is; pinned by askReadoutCss.test.ts. */ --accent-bright:#6E8CFF; /* the ideas arc: accent lifted for ink */ --warm-bright:#FFB84D; /* the today arc: warm lifted for ink */ --hot-bright:#FF7A7E; /* the overdue arc: hot lifted for ink */ --loop-breathe-ideas:4s; /* the corner's breath with updates waiting, a loop */ --loop-breathe-today:3.2s; /* the corner's breath with something due today, a loop */ --loop-breathe-overdue:2.4s; /* the overdue breath, and the overdue arc's pulse */ --loop-light-a:14s; /* the level's light drifting under the ink, a loop */ --loop-light-b:19s; /* the health light drifting under the ink, a loop */ --beat-dur:950ms; /* the heartbeat, once (AS-23); BEAT_MS in apps/admin/src/lib/askReadout.ts */ --new-w:96px; /* RD-5: the New button's one desktop width (contract 2.7) */ /* ---- UI polish --------------------------------------------------------- .superpowers/sdd/2026-09-15-ui-polish/plan.md, ruling UP-3 (contract 2.8). Painted by packages/ui/src/scroll.css and pinned by packages/ui/tests/scrollbarCss.test.ts. A scrollbar is a control graphic, never text. */ --scrollbar-thumb:color-mix(in srgb, var(--ink) 22%, transparent); /* the scrollbar thumb at rest */ --scrollbar-thumb-strong:color-mix(in srgb, var(--ink) 42%, transparent); /* the thumb while its scroller is hovered or holds focus */ --scrollbar-track:transparent; /* no painted track: the scroller's own ground shows */ /* ---- Loading states ---------------------------------------------------- .superpowers/sdd/2026-09-15-loading-states/plan.md, ruling LS-1 (contract 4.1 to 4.3, MOTION.md 3). Loops, not moves: each runs at its own tempo outside the motion budget, and each has its reduced-motion fallback named in packages/ui/src/motion.css. No new duration token: the check's draw and the mark's landing are two NAMED --dur-slow uses (MOTION.md Budget), and the 4 s and 12 s thresholds are not tokens at all, because no stylesheet reads them: they are WAIT_WORDS_MS and WAIT_RETRY_MS in packages/ui/src/waiting.ts, beside --dwell-toast's DWELL_TOAST_MS (preflight P3). */ --loop-breathe-boot:1600ms; /* the boot mark's breath (BootMark.css) */ --loop-dim:1800ms; /* ok-dim, the one reduced-motion fallback (motion.css) */ --loop-spin:900ms; /* the busy control's ring (Button.css, contract 4.2) */ --z-boot:60; /* the boot screen, over every layer: it is the app's first paint */ /* ---- The one sign-in screen -------------------------------------------- Issue #180, the sign-in handoff (forClaude/login-handover/handoff-login, README "Motion"). Painted by packages/ui/src/SignIn/SignIn.css and pinned by packages/ui/tests/signInCss.test.ts. --dur-signin is the seventh hand-off (MOTION.md 5) and a named exception to the Budget; the rest are loops, not moves. */ --dur-signin:620ms; /* the receipt bubble handing itself to the other half */ --loop-drift:9s; /* the scene's tiles drifting inside the bubble, a loop */ --loop-drift-slow:11s; /* the scene's clock drifting, a loop */ --loop-float:6s; /* the scene's chip and dot floating, a loop */ --loop-float-slow:7.5s; /* the scene's booking row floating, a loop */ --loop-rings:240s; /* the background rings, one turn, a loop */ /* ---- The member app shell ----------------------------------------------- Member area S1 (plan .superpowers/sdd/2026-09-17-member-area; forClaude/member-handover/handoff-member tokens.css, "Member app only"). Painted by apps/member/src/shell/shell.css and apps/member/src/classroom/classroom.css, which packages/ui/tests/cssScan.ts reads since S1; each is measured by apps/member/tests (handoff TESTS 1, 16, 41). */ --m-sidebar-w:240px; /* the member sidebar */ --m-topbar-h:56px; /* the content column's top bar, desktop and phone */ --m-tabbar-h:64px; /* the phone tab bar and the lesson bar in its place, before the safe area */ --m-outline-w:300px; /* the lesson's outline column */ --m-content-max:1040px; /* the content column's widest page */ --m-thread-w:360px; /* member area S2: the thread beside a channel (handoff TESTS 28) */ --m-conv-head-h:64px; /* the conversation's own head, two rows, fixed whatever it holds */ /* ---- Series (contract 3.12) --------------------------------------------- Goals slice 0 (.superpowers/sdd/2026-09-18-goals/plan.md; byClaude/goal-handover/handoff-goals goals.css .g-bars, .g-dots, .g-streak, .g-spark). The one chart geometry in the product: four surfaces draw a series (the settings list's row, the person card, the member card, a shared win's card) and they must agree, so the sizes they share are named here rather than written out four times. Painted by packages/ui/src/Series/Series.css and pinned by packages/ui/tests/seriesCss.test.ts. No colour token joins them: a series wears --pos, --tone-green-ink, --tone-amber-ink, --tenant and --paper-2, which already exist. */ --series-h:48px; /* a series at card scale: the bars' box */ --series-h-row:22px; /* the sparkline, the same series at row scale in a list */ --series-gap:4px; /* between two marks at card scale */ --series-r:3px; /* a mark's corner: a bar, a streak square */ --series-mark-min:2px; /* the floor a zero still draws, so a logged nothing is not a missing mark */ /* ---- The reference chip (contract 3.11, the fourth family) --------------- Threads and Tasks PR 1 (byClaude/threads-tasks-handover/handoff-thread-tasks README 8 and D4). One height, so the three chips a row can hold never read alike: the tag chip's --chip-h (22, from issue #300 step 2, contract 3.11 CC-1), the reference chip's 26, the receipt chip's 28. Painted by packages/ui/src/RefChip/RefChip.css, pinned by packages/ui/tests/chipCss.test.ts. The pack's layout tokens landed each with the surface that paints it: --plan-card-w (PR 3) and --board-col-min (PR 5) below, because 8.1 gives every token a named use and tokensContract.test.ts holds this file to it. --work-index-max-h (PR 2) retired with the Work card it sized (the assistant panel AP3, issue 457: the Work index is the chat list). */ --ref-chip-h:26px; /* a sent reference: the kind word and the label, a link */ /* ---- The plan card (Threads and Tasks PR 3, the pack's README 8 and 1.7) ---- The widest a plan card gets, so its step rows keep their trailing count on one line in the conversation column at 1180 (the pack's IMPORT_NOTES, measurement 3). Painted by apps/admin/src/home/thread.css (.thread-confirm with steps). */ --plan-card-w:560px; /* a plan card stops growing here */ /* ---- The Tasks columns (Threads and Tasks PR 5, the pack's README 8 and 4.2b) ---- One number, two uses: the width a column takes on the phone, where the three scroll sideways, and the floor a desktop column never goes under. Painted by apps/admin/src/tasks/tasks.css (.tasks-columns). */ --board-col-min:300px; /* a task column's phone width and desktop floor */ /* ---- Design review 2026-09-24 (issue #300, docs/handoff-review-2026-09-24) ---- The contract changes, step 1 of the issue's plan. Each token lands here with its clause and is painted by the fix step the issue names; until then it sits in PENDING in packages/ui/tests/tokensContract.test.ts, which fails the moment a pending token is painted with and not taken off the list (ruling RC-8's map, brought back for exactly these). */ --chip-h:22px; /* CC-1 (contract 3.11): every chip's minimum height; painted by Chip, TagChip and the + Tag control since step 2 (F14) */ --content-max:1200px; /* CC-3 (contract 2.9): bands 1 to 4 of a module page, one right edge; painted in step 3 (F9) */ /* ---- On ink (design review 2026-09-24, step 5, F24; standard 14, contract 8.1) ---- Words and controls ON an --ink band (the People bulk bar), which screens spelled as white rgba() literals. Each is --surface mixed with transparent, so no colour here is new; painted by apps/admin/src/people/people.css (.people-bulkbar), pinned by tokensContract.test.ts. */ --on-ink-fill:color-mix(in srgb, var(--surface) 12%, transparent); /* a control's fill on an ink band */ --on-ink-2:color-mix(in srgb, var(--surface) 70%, transparent); /* secondary words on an ink band, about 9:1 */ --on-ink-disabled:color-mix(in srgb, var(--surface) 50%, transparent); /* a disabled control's words on an ink band */ /* ---- Calendar (issue #57, K0; docs/handoff-calendar README 9.1, calendar.css B) ------------ Painted by the Calendar grid in slice K3; until then they sit on the tokensContract PENDING map. The three aliases are DECORATIVE: the contrast test refuses them as text colours. */ --cal-gutter:56px; /* the hour gutter, desktop and phone */ --cal-hour-h:48px; /* one hour of the Week and Day grids; 15 min = 12 px, the smallest block */ --cal-hour-h-phone:56px; /* one hour of the phone Day grid, so a 15 min slot is 14 px inside a 44 px target */ --cal-offhours:var(--paper-3); /* DECORATIVE alias: hours outside the schedule. Working hours stay --surface */ --cal-closed:var(--paper-2); /* DECORATIVE alias: a closed day or a date override, carried with a hatch and the word "Closed" */ --cal-now:var(--hot); /* DECORATIVE alias: the NOW line and its dot; the time beside it is --ink on --surface */ --cal-block-min:22px; /* the smallest a booking block draws (15 min), its name still readable at 12/600 */ --cal-daystrip-h:72px; /* the phone Day view's week strip */ /* ---- Settings (design pack 12, UX-69, polish.css C) ---- One width for every settings page's content column and so for every card in it (issue #687 item 8 set it to 880 in settings.css; this names it). */ --settings-card-max:880px; /* ---- The assistant panel (issue #457, AP0, CP-3; docs/handoff-assistant-panel README 1, assistant-panel.css B) ---- Geometry of the third column (CP-1). --assist-handle-hit is painted by ResizeHandle.css from AP0; the rest are painted by the panel in slice AP1 (the list widths and the composer's cap by AP1 and AP3) and until then sit on the tokensContract PENDING map, which fails the moment one is painted and still listed. */ --assist-w:420px; /* the panel's default width; the shell overwrites it on its root with the coach's width (A-18, A-19) */ --assist-w-min:360px; /* the narrowest docked panel; drag and keys stop here (A-12, A-13) */ --assist-w-max:720px; /* the widest panel, and never more than half the window, which the shell clamps (A-9) */ --main-min:480px; /* the main column's floor while the panel docks above 1024 (A-10, A-14) */ --assist-spine-w:56px; /* a folded column: the record's, or the assistant's after a swap (A-2 to A-4) */ --assist-handle-hit:12px; /* the ResizeHandle's pointer strip on the panel's left border; its grip is 44 (A-16, CP-6) */ --assist-list-w:220px; /* the chat list beside the stream in a panel 640 or wider (A-31) */ --assist-list-w-full:280px; /* the chat list column in full screen (A-92) */ --assist-composer-max:200px; /* the composer's textarea grows to this, then scrolls (README D17) */ /* ---- The assistant, dark (issue #512, the design pack issue #523: docs/handoff-assistant-dark, rulings R2 to R21; DEVIATIONS D512-1 to D512-6) --------------------------------------------------- The ask corner's scheme carried into the panel: its --ink ground, --surface words mixed down for the quieter tiers, and its approved bright accents as six lights beside words (D512-1). No colour here is new: each is a source token or a channel mix of two. Declared here, on :root, where --ink and --surface are still the paper theme's, and read by packages/ui/src/AssistantPanel/AssistantTheme.css, which points the shared names at them inside [data-assistant-theme="dark"] only; the rest of the app stays light. Contrast: packages/ui/tests/ assistantDarkContrast.test.ts measures every pair below at WCAG AA. */ --assist-dark-ground:var(--ink); /* the panel's ground, the corner's ink */ --assist-dark-raised:color-mix(in srgb, var(--surface) 6%, var(--ink)); /* cards, the composer's box, a draft's body */ --assist-dark-raised-2:color-mix(in srgb, var(--surface) 12%, var(--ink)); /* hover, the coach's own bubble, chips, menus */ --assist-dark-rule-soft:color-mix(in srgb, var(--surface) 11%, var(--ink)); /* DECORATIVE: rows inside a card */ --assist-dark-rule:color-mix(in srgb, var(--surface) 16%, var(--ink)); /* DECORATIVE: the header rule, a card's edge */ --assist-dark-border:color-mix(in srgb, var(--surface) 40%, var(--ink)); /* a control's border, 3:1 on the ground and on raised, never on raised-2 (R3) */ --assist-dark-text:var(--surface); /* the words */ --assist-dark-text-2:color-mix(in srgb, var(--surface) 76%, var(--ink)); /* secondary words */ --assist-dark-text-3:color-mix(in srgb, var(--surface) 62%, var(--ink)); /* meta words, placeholders, the state line */ --assist-dark-deco:color-mix(in srgb, var(--surface) 40%, var(--ink)); /* DECORATIVE: dots and rules, never words */ --assist-dark-disabled:color-mix(in srgb, var(--surface) 28%, var(--ink)); /* DECORATIVE: a disabled icon, which carries its title */ --assist-dark-on-accent:var(--surface); /* the words and the arrow on a filled accent (Send, primary), 5.17:1 */ --assist-dark-focus:var(--accent-bright); /* the focus ring: a control graphic on ink, never text (SPEC 3b) */ --assist-dark-tone-blue:color-mix(in srgb, var(--accent) 30%, var(--ink)); /* a blue tonal surface's ground, words --assist-dark-text */ --assist-dark-tone-amber:color-mix(in srgb, var(--warm) 26%, var(--ink)); /* an amber tonal surface's ground, the warn band */ --assist-dark-tone-green:color-mix(in srgb, var(--pos) 28%, var(--ink)); /* a green tonal surface's ground */ --assist-dark-tone-violet:color-mix(in srgb, var(--tone-violet-ink) 60%, var(--ink)); /* a violet tonal surface's ground */ --assist-dark-tone-coral:color-mix(in srgb, var(--hot) 28%, var(--ink)); /* a coral tonal surface's ground, the error line */ /* ---- Forms and pages (issue #54, F0, FP-24; docs/handoff-forms-pages sites.css B) ---------------------------------- The flow bars and the page editor's geometry. Declared ahead of the surfaces that paint them and held on the tokensContract FP_PENDING map until then (slice F4 paints the step bars, F6 the editor). The --pub-* set is the public stylesheet's alone (S-123) and is never declared here. */ --step-bar-h:8px; /* a flow step's conversion bar, its share of the first step's visitors */ --step-bar-min:2px; /* a zero still draws: a step nobody reached is not a missing step (series rule, contract 3.12) */ --canvas-desktop:1040px; /* the editor canvas at desktop preview; the page renders at this width, scaled to fit */ --canvas-phone:390px; /* the editor canvas at phone preview, never scaled */ --block-select:var(--accent); /* the selected block's 2 px outline on the canvas; a control graphic, never text */ --block-hover:var(--line-strong); /* DECORATIVE alias: the hovered block's 1 px dashed outline, never text */ --insert-h:32px; /* the "Add a block here" gap between blocks, a 44 px target around it */ /* ---- Global search (issue #65, S0, CF-2; docs/handoff-search search.css B) -------------------------------------------- The top bar's search field and its popover. Declared ahead of them and held on the tokensContract SEARCH_PENDING map until slice S4a (the field and the popover) paints them and empties the map. */ --find-w:280px; /* the top bar's search field at 1280 and wider; never grows on focus (F-5 to F-9) */ --find-w-compact:240px; /* the same field from 1024 to 1279 (F-8) */ --find-pop-w:560px; /* the popover, right-aligned to the field, clamped to the room left of it (F-12, F-13) */ --find-pop-gap:8px; /* the popover's distance under the field and its minimum inset from the rail (F-13) */ --find-keycap-h:22px; /* the "/", "Enter", "Shift+Enter", "Cmd+K" keycaps: 22 high, min 22 wide (F-47) */ --find-group-head-h:28px; /* a group's heading row inside the popover (F-19) */ --topbar-h-phone:68px; /* design pack 12 UX-9: the phone's one-row top bar (44 px squares, 12 px padding) */ /* ---- Receipts and presence (issue #559, R0, RP-8; docs/handoff-receipts-presence receipts-presence.css B) ------------- The receipt layer's timing and place (contract 3.6) and the assistant's living form (MOTION.md 7). Declared ahead of the surfaces that paint them and held on the tokensContract RP_PENDING map until then: slice R1 (the receipt layer) paints the eight --dwell-, --toast- and --coalesce- tokens and binds the three ms values to DWELL_TOAST_LONG_MS, TOAST_RESUME_FLOOR_MS and COALESCE_WINDOW_MS in feedbackLayerCss.test.ts; slice P2 (the living form) paints the four --form- and --loop-knead. No colour is new. --dur-settle is NOT declared: the check's draw is a named --dur-view use (MOTION.md Budget, RP-8). */ --dwell-toast-long:9000ms; /* a receipt past --toast-long-at characters dwells this long (contract 3.6, R-9) */ --toast-long-at:80; /* the character count a long receipt starts at, a unitless number the layer reads (R-9) */ --toast-resume-floor:1500ms; /* the least a paused dwell gets back when the pointer or focus leaves (R-13) */ --toast-inset:24px; /* the layer's distance from the rail and from the main column's bottom (RP-5, R-2) */ --toast-inset-phone:16px; /* the layer's side gutters on the phone (R-5) */ --toast-gap:8px; /* between two stacked receipts, the older one's slide up (MOTION.md 4, R-15) */ --toast-lift-narrow:612px; /* a main column narrower than this lifts the layer above the corner's row (R-4) */ --coalesce-window:1500ms; /* results of one bulk group inside this window fold into one receipt (RP-10, R-17) */ --form-size:24px; /* the living form's box in the stream, the author slot (MOTION.md 7, P-1) */ --form-size-greet:32px; /* the form at rest in the empty chat, the mark at its greeting size (P-2) */ --form-caret-w:3px; /* the writing state's caret width (P-7) */ --loop-knead:1600ms; /* the thinking state's sway, a loop named for its use, not a move (P-6) */ /* ---- The admin refresh (issue #603, AR0; docs/handoff-admin-refresh refresh.css B, IMPORT_NOTES AR-4, AR-5, AR-8) --------- The grounds, the press and the card's lift, the board card, the calendar's event and peek geometry, the inbox's own bubble (AR-2: never the assistant's Bubble) and its columns. Declared ahead of the slices that paint them and held on the tokensContract AR_PENDING map until then; the map fails the moment a listed token is painted. No colour is new (AR-4): the two grounds, the two shadows and the two rings are aliases, mixes or compositions of shipped tokens, and no hex, rgb or hsl literal sits in this block. Nothing in the assistant reads any of them (AR-1). Not adopted (AR-8): --tone-violet-accent, --board-col-w, --board-col-r, --cal-now-pulse, --cal-lane-rule, --cal-quick-w, --shadow-pop, --ring-focus-soft, --tick-read, --context-w, --rail-slot; --card-cover-h was adopted later by TD0 (the block below). */ --ground:var(--paper-2); /* a list of objects sits on it: board columns, the conversations column, the channel list; carries --ink and --ink-2 text (AR-5, AR-6) */ --ground-over:color-mix(in srgb, var(--ink) 4%, var(--paper-2)); /* a column under a dragged card, one step under --ground; its text is --ink-2, never --ink-3 (AR-4, AR-5) */ --press-scale:.97; /* the press on buttons, chips, tabs, segmented items and cards (MOTION.md 1, AR-7c); Button's literal .03 moves onto it */ --card-lift-scale:1.03; /* a board card in the hand (MOTION.md 4, the card variant); rows and events keep 1.01 */ --card-lift-tilt:2deg; /* a board card's tilt while held (S-3); rows and events never tilt */ --card-hover-lift:-1px; /* a board card's hover rise, the second transform on hover (MOTION.md 2, AR-7a) */ --shadow-card-hover:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 6px 16px -8px color-mix(in srgb, var(--ink) 18%, transparent); /* a hovered board card, between --shadow-raise and --shadow-lift */ --shadow-pickup:var(--shadow-float), var(--shadow-lift); /* a held board card (MOTION.md 4, the card variant); reduced motion keeps it */ --ring-selected:0 0 0 2px var(--surface), 0 0 0 4px var(--ink); /* the open record's card or block, a control graphic */ --ring-selected-reach:4px; /* how far --ring-selected draws outside its box: a scroll area holding a selectable card keeps this much room at its edges (TD1, the selected card clipped) */ --ring-over:inset 0 0 0 2px var(--accent); /* a column that would take the drop, beside --ground-over (MOTION.md 2) */ --card-r:var(--r-control); /* a board card's corner, 14 (contract 3.13) */ --card-pad:12px; /* a board card's padding at comfortable density (contract 3.13, 7.3) */ --card-pad-dense:10px; /* a board card's padding at compact density (contract 7.3, DEVIATIONS AR0-1) */ --card-gap:8px; /* between cards in a column (contract 3.13) */ --due-h:24px; /* the due chip, 2 taller than --chip-h, so it reads as a date (contract 3.11) */ --cal-event-r:8px; /* a calendar block's corner (AR5) */ --cal-event-bar:3px; /* the tone ink bar on a calendar block's leading edge (AR5, AR-4) */ --cal-event-gap:3px; /* between a calendar block and its column's edge; overlapping lanes share it (AR5) */ --cal-peek-w:320px; /* the peek beside a calendar block (contract 3.14, AR-22) */ --cal-mini-w:308px; /* the mini month column, 7 days of 44 px (AR-21, standard 11; not the pack's 232) */ --bubble-r:16px; /* an inbox MessageBubble's big corner (AR-2) */ --bubble-r-tail:4px; /* the corner toward the author on a run's first inbox bubble (AR-2) */ --bubble-r-run:6px; /* the corners inside a run of inbox bubbles (AR-2) */ --bubble-pad:9px 12px 8px; /* an inbox MessageBubble's padding (AR-2) */ --bubble-max-phone:82%; /* an inbox bubble's widest on the phone, a share of the thread (AR-2) */ --bubble-in:var(--surface); /* a member's inbox bubble, --ink words (AR-2) */ --bubble-out:var(--ink); /* the coach's inbox bubble, --surface words (AR-2) */ --conv-list-w:300px; /* the Inbox conversations column on --ground (AR7) */ --conv-row-h:64px; /* an Inbox conversation row with its 44 px avatar (AR7) */ --thread-min-h:160px; /* the Inbox thread never collapses under its composer (AR7) */ /* ---- The tasks data train (issue #604, TD0; plan .superpowers/sdd/2026-10-03-tasks-data, rulings TD-7, TD0-3) --------- What a task card draws once the task holds it (contract 3.13): the cover band and the checklist bar. Declared ahead of the slices that paint them and held on the tokensContract TD_PENDING map until then (TD2 painted the cover, TD3 the bar). No colour is new: the band is a tone wash, the bar's track --paper-2 and its fill --ink, --pos when every item is done. */ --card-cover-h:40px; /* a task card's cover band, a tone wash across the card's top, never an image (contract 3.13, TD-7) */ --card-check-h:4px; /* a task card's checklist bar, beside "n of m"; its fill steps, never a width transition (MOTION.md 1, TD0-3) */ /* ---- The email train (issue #55, EM0; docs/handoff-email email.css B, TESTS E-150 to E-156) --------------------------- The Email module's own geometry: the count column, the automation chain, the letter preview widths, the DNS value cell and the audience bar. Declared ahead of the slices that paint them and held on the tokensContract EM_PENDING map until then; the map fails the moment a listed token is painted. No colour is new: the chain's rail is --line-strong and the audience bar's segments are shipped tones. The renderer's values (email.css C) never enter the app (EM-D1). */ --count-col:88px; /* a count column in the Newsletters and Automations tables (sent, clicked, in flow), tabular, right aligned (E-150) */ --chain-rail:2px; /* the vertical line joining an automation's steps, painted --line-strong; the chain reads top to bottom on every width (E-151) */ --chain-node:36px; /* a step's icon disc on the rail; step rows are --row-h tall with the disc centred (E-151) */ --preview-desk:600px; /* the letter preview at desktop mail width, the renderer's --mail-w (E-152) */ --preview-phone:360px; /* the letter preview at phone mail width (E-152) */ --dns-value-max:560px; /* a DNS record's value cell; long values wrap by character, never ellipsise, they are copied (E-153, EM-D2) */ --audience-bar-h:12px; /* the one stacked bar under the audience sentence, role img named by it; shape by order and word, never colour alone (E-154) */ }