/* COPIED from design/tokens.css, minus its first line: an @import of Geist from * fonts.googleapis.com, which the CSP (style-src 'self') refuses. The font stacks * below fall back without it. The only intended divergence from design/ — the * drift gate holds frame.js and bench.css byte-identical and skips this file. * docs/ADR/0021. */ /* Hallmark · genre: modern-minimal · scope: application UI · theme: Shop Instrument * macrostructure/nav/footer: n/a — landing-page archetypes do not apply to a counter terminal * paper band: light (96.5%) · display style: grotesk-sans · accent hue: neutral (accent IS ink) * pre-emit critique: P5 H5 E5 S5 R5 V4 * * Framing SaaS — Intake. Design tokens. * Every value here is named. No screen or component may inline a colour, a font * stack, a radius or a duration. Spec: 2026-09-10-framing-saas-intake-design.md */ :root { /* ── Type ─────────────────────────────────────────────────────────────── * Two families. Geist carries everything readable; Geist Mono carries every * dimension and every price, because `13½ × 17½` must not reflow as digits * change and a proportional face makes a live total jitter under a slider drag. */ --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif; --font-dim: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Five sizes, 1.25 ratio off a 16px floor. The floor is environmental: this is * read from 18 inches by the framer and 3 feet by the customer, at an angle, * under retail lighting. Helper text is body-size in a lighter ink rather than * a sixth, smaller step. Display breaks the ratio deliberately — it is the * running total and nothing else. */ --text-micro: 0.8rem; /* 12.8px — tracked uppercase labels only */ --text-body: 1rem; /* 16px — floor. Helper text is this size, in --color-neutral */ --text-md: 1.25rem; /* 20px — line prices, expanded-panel titles */ --text-heading: 1.5625rem; /* 25px — region and screen titles */ --text-display: clamp(2.5rem, 2.5vw + 1.25rem, 3.5rem); /* 40–56px — running total */ --lh-tight: 1.15; --lh-dim: 1.25; --lh-body: 1.55; --track-label: 0.09em; /* uppercase micro labels */ --track-tight: -0.015em; /* headings */ --weight-body: 400; --weight-medium: 500; --weight-strong: 600; /* ── Colour ───────────────────────────────────────────────────────────── * Warm-neutral surfaces at hue 72. The warmth is functional, not decorative: * a cream mat on cool paper reads grey-green, and cream-vs-white is the most * common comparison made at this counter. Every surface stays under 0.010 * chroma so mat and moulding swatches — which are content, not palette — are * the only saturated things on screen. * * There is no brand accent. Per spec, exactly three semantic colours exist. * The primary action is ink-filled; the focus ring is the one cool hue on the * page, because it must never be mistaken for the block treatment. */ --color-paper: oklch(96.5% 0.006 72); /* bench surface */ --color-paper-2: oklch(94% 0.007 72); /* raised panels, row hover */ --color-paper-3: oklch(91% 0.008 72); /* inset wells, swatch bed, collapsed value chips */ --color-rule: oklch(86% 0.008 72); /* hairlines between rows */ --color-rule-2: oklch(60% 0.009 72); /* control borders — 3.58:1 on paper, 3.31 on paper-2, 3.03 on paper-3. WCAG 1.4.11 wants 3:1 for a boundary that identifies a component, and this is a counter terminal read at three feet under retail lighting. */ --color-muted: oklch(50% 0.008 72); /* helper, placeholder — 5.41:1 on paper, 5.00 on paper-2, 4.56 on paper-3. It lands on all three. */ --color-neutral: oklch(44% 0.008 70); /* secondary text, untouched row values — 7.02:1 */ --color-ink-2: oklch(33% 0.009 65); /* 11.11:1 */ --color-ink: oklch(21% 0.010 65); /* primary text, primary fill — 16.06:1 */ --color-ink-ink: oklch(97% 0.005 72); /* text on an ink fill */ /* Focus. Cool on purpose: the one hue that can never be read as an error. * Lightness is a compromise: the ring has to clear 3:1 against paper AND * against the ink fill of the primary button. 4.54:1 and 3.54:1. */ --color-focus: oklch(54% 0.130 248); /* The three semantics. No fourth. A passing depth check is rendered in plain * ink with a check glyph — the absence of a block IS the pass signal, and a * green would be the fourth colour the spec forbids. */ --color-block: oklch(50% 0.190 27); --color-block-surface: oklch(95% 0.025 25); --color-warn: oklch(48% 0.125 68); --color-warn-surface: oklch(94% 0.045 82); --color-info: var(--color-neutral); --color-info-surface: var(--color-paper-3); /* ── Catalogue swatches ───────────────────────────────────────────────── * Content, not palette. Placeholders shaped to survive a real vendor catalogue. * Every swatch carries a hairline edge so a paper-white mat still has a boundary * against the swatch bed. */ --swatch-antique-white: oklch(95% 0.018 88); --swatch-bright-white: oklch(98.5% 0.002 90); --swatch-ivory: oklch(94% 0.030 90); --swatch-warm-grey: oklch(78% 0.008 80); --swatch-sage: oklch(78% 0.035 145); --swatch-ochre: oklch(72% 0.100 78); --swatch-oxblood: oklch(38% 0.090 25); --swatch-black: oklch(24% 0.004 70); /* Preview materials */ --preview-moulding: oklch(28% 0.012 60); --preview-artwork: oklch(66% 0.055 232); --preview-glass: oklch(88% 0.012 220); /* ── Space ────────────────────────────────────────────────────────────── * 4pt base, named by role. */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2.5rem; /* 40px */ --space-2xl: 4rem; /* 64px */ /* ── Geometry ─────────────────────────────────────────────────────────── * 44px is the touch-target floor and therefore the height of every input, * every button and every collapsed row header. Nothing interactive is smaller. */ --control-h: 2.75rem; /* 44px */ --radius-sm: 4px; --radius-pill: 999px; /* chips, toggle track */ --radius-md: 7px; --radius-lg: 10px; --rule-hair: 1px; /* ── Elevation ────────────────────────────────────────────────────────── * Two levels. The preview's frame shadow is not here — it is representational * (it reads as a physical frame hanging on a wall) and belongs to the preview * component, not to the system. */ /* The ink's colour components, so shadows and hairline overlays can carry an * alpha without any file outside this one holding a raw colour. */ --shade: 21% 0.010 65; --paper-shade: 97% 0.005 72; /* the same, for hairlines drawn on an ink surface */ --elev-surface: none; --elev-raised: 0 1px 2px oklch(var(--shade) / 0.07), 0 0 0 1px oklch(var(--shade) / 0.05); --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; /* ── Motion ───────────────────────────────────────────────────────────── * Two primitives on the whole product: `press` and `settle`. The accordion * does not animate — the framer is fast, the customer is watching, and an * eased panel between them is friction dressed as polish. */ --dur-fast: 90ms; --dur-base: 180ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── Breakpoints ──────────────────────────────────────────────────────── * Two, per spec. Desk is a counter monitor angled so both parties see it. * Tablet is held and passed across the counter. */ --bp-tablet: 900px; /* at or below: the bench hard-splits. Width, not device — a landscape tablet at 1024 keeps the side-by-side, which is the better use of the screen it actually has. */ --bp-desk: 1440px; /* design width for the desk frames */ } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }