/* ========================================================================== tokens.css — the design system's vocabulary -------------------------------------------------------------------------- Every value the interface is allowed to use, in one place. Nothing below this file should invent a colour, a spacing step, a radius or a type size: if a component needs one that is not here, the scale is wrong and the fix belongs in this file rather than in the component. That rule matters more than usual in this project. The interface sits beside colour stimuli all day, so an improvised grey is not just untidy — it is an uncontrolled variable in the surround. Naming every surface once is what makes it checkable. THE RULE THAT GOVERNS THE PALETTE Every surface, border and label is achromatic. The single accent is a low-chroma steel blue reserved for focus, links, progress and one word of emphasis in an instruction, and it never appears inside a judging field. Semantic colour (good / warning / bad) exists only on the results page, where there are no stimuli to contaminate. ========================================================================== */ :root { /* --------------------------------------------------------------------- SURFACES — five levels, darkest first. `bg` is the page. `bg-1` is chrome that sits on it (app bar, cards on the welcome page). `bg-2` is a panel inside a card. `bg-3` is the highest surface: control backgrounds, key caps, meter troughs. Slightly cool on purpose, so a warm stimulus reads honestly against it. --------------------------------------------------------------------- */ --bg: #0a0b0d; --bg-1: #101214; --bg-2: #16191c; --bg-3: #1d2125; /* LINES — three weights. `line` separates, `line-2` defines an edge you are meant to notice, `line-3` is a hover or active edge. */ --line: #252a2f; --line-2: #333a41; --line-3: #454e57; /* TEXT — four levels, brightest first. `txt` is body and headings, `txt-2` is secondary prose, `txt-3` is metadata, `txt-4` is the quietest label that still has to be readable. Nothing dimmer than txt-4 is permitted; if something wants to be quieter, it should be smaller or absent. */ --txt: #e8eaec; --txt-2: #a4abb3; --txt-3: #6d757e; --txt-4: #4a5158; /* THE ONE ACCENT */ --accent: #8db4d8; --accent-2: #5f89ad; --accent-dim: rgba(141, 180, 216, 0.14); /* SEMANTIC — results page only, never beside a stimulus. */ --good: #5ec99a; --warn: #e0b455; --bad: #e5786e; /* CHART ROLES — one accent hue for "your data", neutrals for reference. No categorical palette: series that would need one are drawn as small multiples instead, and any mark showing a stimulus is painted in that stimulus's own colour. */ --viz-mark: #8db4d8; --viz-mark-2:#5f89ad; --viz-ref: #6d757e; --viz-grid: #2a3036; --viz-axis: #454e57; /* THE CONTROLLED VIEWING SURROUND — L* ≈ 50 neutral, per ISO 3664 practice. This is a stimulus value, not a UI colour, and it is the one token in this file that must never be adjusted for looks. */ --stage: #767676; --stage-2: #6e6e6e; /* --------------------------------------------------------------------- SPACE — a single scale, roughly ×1.5, from a hairline gap to a section break. Layout uses these and nothing else; a one-off margin in a component is how a layout stops being predictable. --------------------------------------------------------------------- */ --s-0: 0.125rem; /* an optical nudge, not a gap */ --s-1: 0.25rem; /* inside a chip */ --s-2: 0.5rem; /* between siblings in a row */ --s-3: 0.75rem; /* between cards in a grid */ --s-4: 1rem; /* inside a card */ --s-5: 1.5rem; /* between blocks in a card */ --s-6: 2rem; /* between a heading and its content */ --s-7: 3rem; /* between sections */ --s-8: 4.5rem; /* around a page's major divisions */ /* --------------------------------------------------------------------- TYPE — one family, one scale. Steps are roughly a major third apart so any two adjacent levels are visibly different without a jump. --------------------------------------------------------------------- */ --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --t-display: clamp(2.1rem, 3.4vw, 3.1rem); /* the welcome headline, once */ --t-title: clamp(1.5rem, 2.1vw, 1.9rem); /* section headings */ --t-sub: 1.25rem; /* the test instruction */ --t-head: 1.05rem; /* card titles */ --t-lede: 1.06rem; /* the paragraph under a headline */ --t-body: 0.95rem; --t-small: 0.84rem; --t-tiny: 0.75rem; --t-micro: 0.68rem; /* uppercase labels only */ --lh-tight: 1.15; /* headings */ --lh-snug: 1.45; /* card copy */ --lh-body: 1.6; /* running prose */ /* --------------------------------------------------------------------- CONTROL — three heights, and the padding that goes with each. Every button, icon button and input picks one of these rather than arriving at a height by adding a font size to a padding, which is how a row of controls ends up with four different vertical centres. `--tap` is the floor a control drops to on a touch screen. It is in px on purpose: the root size below is a clamp that bottoms out at 14px, so a rem-sized target shrinks on exactly the devices where a finger needs it to grow. --------------------------------------------------------------------- */ --ctl-sm: 1.75rem; --ctl: 2.25rem; --ctl-lg: 2.75rem; --ctl-pad-sm: var(--s-2); --ctl-pad: var(--s-4); --ctl-pad-lg: var(--s-5); --tap: 44px; /* CHROME — the two fixed bands. The app bar is the same height everywhere; the stage footer is shorter because it holds controls rather than identity, and a test screen should give its height to the stimulus. */ --bar: 3rem; --bar-foot: 2.75rem; /* --------------------------------------------------------------------- SHAPE — one radius family, three steps. --------------------------------------------------------------------- */ --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --radius-pill: 99px; /* ELEVATION — two shadows, both shallow. On a near-black ground it is the border that separates a surface from the one behind it; a deep shadow just adds haze. */ --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22); --shadow-2: 0 2px 6px rgba(0,0,0,.4), 0 16px 44px rgba(0,0,0,.4); /* MOTION — two curves and three durations. Anything slower than `slow` is a transition the user is waiting on rather than reading. */ --ease: cubic-bezier(.22, .68, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --fast: .13s; --mid: .2s; --slow: .34s; /* --------------------------------------------------------------------- ROOT SIZE — the whole app scales with the viewport, so every rem above is relative to this. It bottoms out at 14px, which is why touch minimums elsewhere are expressed in px: a rem-sized target shrinks exactly where a finger needs it to grow. --------------------------------------------------------------------- */ font-size: clamp(14px, 0.52vw + 11.2px, 18px); }