/* ========================================================================= LEARNERS — design tokens ========================================================================= The single source of truth for colour, type, space, shape, depth, material and motion. Nothing downstream invents a value: components compose tokens, pages compose components. If a number appears twice in this codebase and is not in this file, that is the bug. THE IDEA -------- A measuring instrument, in daylight. The product spends almost all of its time in warm near-white and near-black, and introduces colour only where something is being MEASURED — a score, a level, a live voice, a state that matters. That restraint is the whole visual argument: an assessment that shouts is an assessment you do not believe. WHY PETROL AND SAND ------------------- The accent is a deep petrol teal, carried forward from the existing product rather than replaced. It reads as instrument, precision and calm, and it avoids the two clichés this category is drowning in: AI violet and SaaS indigo. Its partner, a warm sand, exists ONLY inside visualisations — it is never a button. Teal against warm ochre is also one of the few two-hue pairs that survives every common form of colour blindness, which matters when the two hues are carrying a candidate's score. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. PALETTE — raw values. Use the semantic aliases below, not these. --------------------------------------------------------------------- */ /* Neutrals. Warm, very slightly, all the way down: a pure-grey ramp reads clinical, and this product is looked at for twenty minutes at a stretch. */ --c-white: #ffffff; --c-paper: #fbfaf8; /* the canvas — warm off-white */ --c-paper-deep: #f5f3ef; /* recessed bands, table stripes */ --c-mist: #eceae5; /* hairline on warm ground */ --c-silver: #d9d6d0; --c-stone: #a5a29b; --c-slate: #6a6f76; --c-graphite: #3d444c; --c-ink: #171c22; /* body text */ --c-ink-deep: #0b1016; /* display type, the darkest thing on screen */ /* Petrol — the one structural accent. */ --c-petrol-50: #eef6f7; --c-petrol-100: #d3e8ea; --c-petrol-200: #a7d1d6; --c-petrol-400: #3f97a3; --c-petrol-500: #12798a; /* the brand accent */ --c-petrol-600: #0d6675; --c-petrol-700: #0a505d; --c-petrol-900: #062f38; /* inverted bands */ /* Sand — visualisation only. Never a control, never a link. */ --c-sand-100: #f7ecdc; --c-sand-300: #e2bd85; --c-sand-500: #b8792c; --c-sand-700: #8a5619; /* Semantic hues. Deliberately desaturated — a red that shouts in an exam reads as "you have failed" when it means "your microphone is muted". */ --c-green-50: #e9f4ee; --c-green-500: #1c7a4f; --c-amber-50: #fdf5e7; --c-amber-500: #a86c10; --c-red-50: #fdeeec; --c-red-500: #b23a2c; /* --------------------------------------------------------------------- 2. SURFACE & TEXT — semantic aliases. These are what components use. --------------------------------------------------------------------- */ --bg: var(--c-paper); --bg-deep: var(--c-paper-deep); --surface: var(--c-white); --surface-raised: var(--c-white); --surface-sunken: var(--c-paper-deep); --surface-invert: var(--c-petrol-900); --ink: var(--c-ink); --ink-display: var(--c-ink-deep); --ink-secondary: var(--c-graphite); --ink-muted: var(--c-slate); --ink-faint: var(--c-stone); --ink-invert: var(--c-white); --ink-on-accent: var(--c-white); --line: var(--c-mist); --line-strong: var(--c-silver); --line-invert: rgba(255, 255, 255, .14); --accent: var(--c-petrol-500); --accent-hover: var(--c-petrol-600); --accent-press: var(--c-petrol-700); --accent-soft: var(--c-petrol-50); --accent-line: var(--c-petrol-200); --accent-deep: var(--c-petrol-900); /* Visualisation only. */ --viz-1: var(--c-petrol-500); --viz-2: var(--c-sand-500); --viz-1-soft: var(--c-petrol-100); --viz-2-soft: var(--c-sand-100); --ok: var(--c-green-500); --ok-soft: var(--c-green-50); --warn: var(--c-amber-500); --warn-soft: var(--c-amber-50); --danger: var(--c-red-500); --danger-soft: var(--c-red-50); /* --------------------------------------------------------------------- 3. TYPE --------------------------------------------------------------------- System-first by design. This platform runs in test centres that may have no internet, and a render-blocking webfont request on an exam page is a risk taken for no gain — every stack below has a real Light cut (SF Pro Light, Segoe UI Light, Inter Light), which is what the display tier needs. Drop Inter into design/fonts/ and uncomment design/fonts.css to upgrade. --------------------------------------------------------------------- */ --font-sans: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* Weights. Light belongs to display sizes ONLY — 300 at 15px is unreadable in a room with bad lighting, which is most rooms. */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; /* Scale. Tracking tightens as size grows; that ratio is the typographic signature and it is why large type here reads set rather than stretched. */ --t-display-size: clamp(2.75rem, 1.6rem + 4.6vw, 5rem); /* 44 → 80 */ --t-display-lh: 1.02; --t-display-track: -0.035em; --t-title-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); /* 32 → 52 */ --t-title-lh: 1.06; --t-title-track: -0.028em; --t-h1-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); /* 26 → 36 */ --t-h1-lh: 1.14; --t-h1-track: -0.022em; --t-h2-size: 1.3125rem; /* 21 */ --t-h2-lh: 1.3; --t-h2-track: -0.016em; --t-h3-size: 1.0625rem; /* 17 */ --t-h3-lh: 1.4; --t-h3-track: -0.011em; --t-lead-size: 1.1875rem; /* 19 — the sentence under a headline */ --t-lead-lh: 1.55; --t-lead-track: -0.011em; --t-body-size: 0.9375rem; /* 15 */ --t-body-lh: 1.6; --t-body-track: 0; --t-small-size: 0.8125rem; /* 13 */ --t-small-lh: 1.5; --t-micro-size: 0.6875rem; /* 11 */ --t-micro-lh: 1.45; --t-micro-track: 0.075em; /* the only place tracking opens up */ /* --------------------------------------------------------------------- 4. SPACE — 4px base. --------------------------------------------------------------------- */ --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-8: 2rem; /* 32 */ --s-10: 2.5rem; /* 40 */ --s-12: 3rem; /* 48 */ --s-16: 4rem; /* 64 */ --s-20: 5rem; /* 80 */ --s-24: 6rem; /* 96 */ --s-32: 8rem; /* 128 */ /* Section rhythm. Scenes, not stripes. */ --section-y: clamp(4rem, 2rem + 8vw, 9rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); --measure: 68ch; /* readable line length for long copy */ --container: 75rem; /* 1200 */ --container-narrow: 40rem; /* --------------------------------------------------------------------- 5. SHAPE --------------------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; /* --------------------------------------------------------------------- 6. DEPTH --------------------------------------------------------------------- Many near-transparent layers, never one hard cast. Every shadow is tinted with the ink hue rather than pure black — a neutral-black shadow on a warm canvas reads as dirt. --------------------------------------------------------------------- */ --shadow-hairline: 0 0 0 1px rgba(23, 28, 34, .06); --shadow-1: 0 1px 2px rgba(23, 28, 34, .04), 0 1px 1px rgba(23, 28, 34, .03); --shadow-2: 0 1px 2px rgba(23, 28, 34, .04), 0 4px 10px -2px rgba(23, 28, 34, .05), 0 12px 24px -8px rgba(23, 28, 34, .05); --shadow-3: 0 1px 2px rgba(23, 28, 34, .04), 0 8px 20px -6px rgba(23, 28, 34, .07), 0 24px 48px -16px rgba(23, 28, 34, .09); --shadow-4: 0 2px 4px rgba(23, 28, 34, .04), 0 16px 32px -8px rgba(23, 28, 34, .09), 0 40px 80px -24px rgba(23, 28, 34, .13); --shadow-accent: 0 1px 2px rgba(6, 47, 56, .16), 0 8px 20px -6px rgba(6, 47, 56, .22); /* --------------------------------------------------------------------- 7. GLASS — a material, not an effect. --------------------------------------------------------------------- Real glass is four things at once, and a surface missing any one of them reads as a cheap CSS filter: 1. a fill that is a GRADIENT, because light falls unevenly across a pane 2. a blur that also SATURATES, because glass concentrates the colour behind it rather than washing it out 3. a specular top edge — the bright hairline where light catches 4. a contact shadow underneath, so it sits in the scene rather than hovering above a flat background Consumed through the .glass-* classes in system.css. The variables are here so a surface can compose its own without re-deriving the recipe. --------------------------------------------------------------------- */ --glass-blur-sm: 10px; --glass-blur-md: 18px; --glass-blur-lg: 28px; --glass-sat: 180%; --glass-fill-light: linear-gradient(180deg, rgba(255, 255, 255, .70), rgba(255, 255, 255, .52)); --glass-fill-control: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68)); --glass-fill-floating: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .66)); /* The most opaque of the five, and deliberately so: this is the material the score sits on, and legibility outranks the effect. Still translucent enough that the ground reads through — a pane at .96 is a white box. */ --glass-fill-elevated: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .74)); --glass-fill-dark: linear-gradient(180deg, rgba(11, 16, 22, .72), rgba(11, 16, 22, .60)); --glass-border: rgba(255, 255, 255, .58); --glass-border-dark: rgba(255, 255, 255, .10); /* The specular highlight and the contact edge, as one reusable stack. */ --glass-inner: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(23, 28, 34, .035); --glass-inner-dark: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .18); /* --------------------------------------------------------------------- 8. ATMOSPHERE --------------------------------------------------------------------- Environmental lighting, not decoration. Large, soft, low-contrast fields that give glass something to refract. If you can point at where one ends, it is too strong. --------------------------------------------------------------------- */ --aura-petrol: radial-gradient( 60% 55% at 50% 0%, rgba(18, 121, 138, .10) 0%, rgba(18, 121, 138, .04) 45%, rgba(18, 121, 138, 0) 75%); --aura-sand: radial-gradient( 50% 50% at 85% 15%, rgba(184, 121, 44, .07) 0%, rgba(184, 121, 44, 0) 70%); /* --------------------------------------------------------------------- 9. MOTION --------------------------------------------------------------------- Two easings do almost all the work. `--ease-out` is a strong decelerate: things arrive fast and settle, which is what makes an interface feel physical rather than animated. `--ease-spring` overshoots very slightly and belongs to direct manipulation only — a press, a toggle, a selection. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --d-instant: 90ms; --d-fast: 160ms; --d-base: 260ms; --d-slow: 420ms; --d-scene: 700ms; --t-control: var(--d-fast) var(--ease-out); --t-surface: var(--d-base) var(--ease-out); --t-scene: var(--d-scene) var(--ease-out); /* --------------------------------------------------------------------- 10. LAYERS --------------------------------------------------------------------- */ --z-atmosphere: 0; --z-content: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 800; --z-modal: 900; --z-alert: 950; --z-debug: 980; } /* ========================================================================== Inverted context ========================================================================== Any subtree can be flipped to the dark petrol ground by adding [data-invert]. Components read semantic tokens, so they need no dark-mode variants of their own — the ground changes underneath them. Used for the single dark band in the product and for the focus surface during a live recording. ========================================================================== */ [data-invert] { --bg: var(--c-petrol-900); --bg-deep: #041f26; --surface: rgba(255, 255, 255, .05); --surface-raised:rgba(255, 255, 255, .08); --surface-sunken:rgba(0, 0, 0, .18); --ink: rgba(255, 255, 255, .93); --ink-display: #ffffff; --ink-secondary: rgba(255, 255, 255, .74); --ink-muted: rgba(255, 255, 255, .58); --ink-faint: rgba(255, 255, 255, .42); --line: var(--line-invert); --line-strong: rgba(255, 255, 255, .22); --accent: var(--c-petrol-200); --accent-hover: #c4e2e6; --accent-press: var(--c-petrol-100); --accent-soft: rgba(167, 209, 214, .12); --accent-line: rgba(167, 209, 214, .28); --ink-on-accent: var(--c-petrol-900); --viz-1: var(--c-petrol-200); --viz-2: var(--c-sand-300); --glass-fill-floating: var(--glass-fill-dark); --glass-fill-elevated: var(--glass-fill-dark); --glass-fill-control: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); --glass-border: var(--glass-border-dark); --glass-inner: var(--glass-inner-dark); color-scheme: dark; } /* ========================================================================== Reduced motion ========================================================================== Not "animations off". The interface keeps every state change legible and keeps opacity fades, which carry meaning; what goes is travel, parallax, scale and anything that moves the page under someone who asked it not to. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-scene: 1ms; --ease-spring: var(--ease-out); } } /* ========================================================================== Forced colours (Windows high contrast) ========================================================================== Glass is invisible in forced-colours mode, so every glass surface must fall back to a bordered opaque panel or controls vanish entirely. ========================================================================== */ @media (forced-colors: active) { :root { --glass-fill-light: Canvas; --glass-fill-control: Canvas; --glass-fill-floating: Canvas; --glass-fill-elevated: Canvas; --glass-border: CanvasText; --glass-inner: none; --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-4: none; } }