/* =========================================================================== THE DESIGN SYSTEM. This file is the whole of it. ADR-0028 (mechanism accepted 2026-08-26). If you are a designer: this is the file, and `/StyleGuide` in a development build is where you see it applied to every token, every component state and every real page. You can change any value here and reload — there is no build step. Four rules, and they are the reason this file exists: 1. **Nothing else in the repository declares a visual value.** No hex in a view, an island, a scoped .cshtml.css or any other stylesheet. Tests fail on it. `bootstrap-bridge.css` and `components.css` next door *read* these tokens; neither is a second place to change one. 2. **Tier 1 is not for views.** A view names a tier 2 or tier 3 token, never a `--tp-palette-*`. That is what lets a ramp be re-cut without touching a single page. 3. **Tier 2 colour is a conformance claim, not a preference.** ADR-0022 commits TestPrep to WCAG AAA contrast — 7:1 for text, 3:1 for borders and focus rings. `PaletteContrastTests` recomputes every pair declared here and fails the build below the floor. The style guide prints the live ratio next to each pair so you find out while choosing, not from CI tomorrow. To change a colour: darken it until it clears **7.5:1** (headroom over the 7:1 enforced), keeping the hue. Never lower a floor in the test. 4. **Tier 3 is unconstrained and is where the product's character lives.** Radius, spacing, weight, elevation and the type scale are not touched by contrast at all. **Tier 4, the per-Awarding-Organisation brand layer, is deliberately absent.** FR-1.1 says an AO configures a logo and four colours; Brendan deferred the whole layer on 2026-08-26 because tenancy is undecided (ADR-0006) and the product's UX is consistent across AOs regardless. Do not add `--tp-brand-*` tokens, and do not give a tier 2 token an "AO value, falling back to ours" shape in anticipation of them. ADR-0028 records the shape it will take. The navy and gold below are the product's *default*, not any organisation's. --------------------------------------------------------------------------- STATUS OF THE VALUES BELOW (DDR-0010, 2026-09-23): **transcribed from the exam-portal prototype in docs/source-material, at Brendan's direction, and still provisional.** Every hue, radius, gap and weight is the prototype's own; where a prototype colour carried text and fell short of 7:1 it has been darkened along its own hue until it clears, and the comment says so. These are not the designer's polished values — ADR-0028 still waits for those — so cite them as "what the prototype does", never as an intention. =========================================================================== */ :root { /* ========================================================================= TIER 1 — PALETTE. Raw material. Never named by a view. Steps are numbered by darkness so a ramp can grow into the gaps without renumbering. A shade marked "darkened" is the prototype's hue taken down until the text it carries clears 7:1 — the prototype's own value is quoted. ========================================================================= */ /* Neutrals — a cool slate, as the prototype's greys are. */ --tp-palette-white: #ffffff; --tp-palette-slate-50: #f0f4f9; /* the page behind every card */ --tp-palette-slate-100: #f1f5f9; /* dividers — decorative only */ --tp-palette-slate-300: #cbd5e1; /* secondary text on the navy band */ --tp-palette-slate-450: #76839a; /* control borders — darkened from #e2e8f0 (1.23:1) to clear 3:1 */ --tp-palette-slate-700: #3e4a5c; /* secondary text — darkened from #94a3b8 (2.56:1) */ --tp-palette-slate-850: #1e293b; /* body text */ /* Navy — headings, links, the band, and the four tones of the icon tiles. */ --tp-palette-navy-50: #e7f0f8; --tp-palette-navy-600: #2f74ae; --tp-palette-navy-700: #1e5a8e; --tp-palette-navy-800: #12406b; --tp-palette-navy-900: #00274c; /* Gold — the one action colour. It never carries white and is never text. */ --tp-palette-gold-50: #fff5cd; --tp-palette-gold-100: #ffefb4; --tp-palette-gold-300: #ffd43b; --tp-palette-gold-400: #ffcb05; /* Green, amber and red — each a tint to sit on and an ink to read. */ --tp-palette-green-50: #e0eee0; --tp-palette-green-800: #084d39; /* darkened from #00775a (4.62:1 on its tint) */ --tp-palette-green-900: #063d2d; --tp-palette-amber-50: #fff3c4; --tp-palette-amber-800: #5c4500; /* darkened from #7a5c00 (5.62:1 on its tint) */ --tp-palette-red-50: #fdecee; --tp-palette-red-800: #8f1829; /* darkened from #c52039 (5.77:1 on white) */ --tp-palette-red-900: #6e1320; /* Magenta — inline . Not in the prototype, which shows no code. */ --tp-palette-magenta-800: #86204f; /* ========================================================================= TIER 2 — ROLE. What a colour *means*. Views and islands name these. Every pair here is measured by PaletteContrastTests. The comment on each line is its ratio as of 2026-09-23; the test is what actually holds it. Text is measured against BOTH the page and the card — whichever is worse is the one quoted — because the page is no longer white. ========================================================================= */ /* Surfaces */ --tp-canvas: var(--tp-palette-slate-50); /* the page, behind the cards */ --tp-surface: var(--tp-palette-white); /* cards, inputs, anything raised */ /* Text */ --tp-ink: var(--tp-palette-slate-850); /* body text — 13.24:1 */ --tp-ink-muted: var(--tp-palette-slate-700); /* secondary text — 8.13:1 */ --tp-heading: var(--tp-palette-navy-900); /* headings, big numbers — 13.63:1 */ /* Accents. Contrast is symmetric, so each doubles as text on the page and as a solid background carrying white — both clear 7:1. */ --tp-link: var(--tp-palette-navy-800); /* 9.64:1 */ --tp-link-hover: var(--tp-palette-navy-900); /* 13.63:1 */ --tp-primary: var(--tp-palette-navy-900); /* 13.63:1 — the outlined button */ --tp-primary-hover: var(--tp-palette-navy-800); /* 9.64:1 */ --tp-success: var(--tp-palette-green-800); /* 8.20:1 on its tint */ --tp-success-hover: var(--tp-palette-green-900); /* 10.20:1 on its tint */ --tp-danger: var(--tp-palette-red-800); /* 7.90:1 on its tint */ --tp-danger-hover: var(--tp-palette-red-900); /* 11.82:1 carrying white */ --tp-warning-ink: var(--tp-palette-amber-800); /* 8.18:1 on its tint */ --tp-info-ink: var(--tp-palette-navy-800); /* 9.24:1 on its tint */ --tp-code: var(--tp-palette-magenta-800); /* 8.15:1 */ /* Text carried *on* an accent — the label on a solid button or badge. */ --tp-on-accent: var(--tp-palette-white); /* The action. Gold with navy on it: the prototype's primary button, and the one place gold appears. It is the reverse of every accent above — dark ink on a light fill — so it has its own label token rather than --tp-on-accent, and a white label on it would be 1.52:1. */ --tp-action: var(--tp-palette-gold-400); /* 9.89:1 under its label */ --tp-action-hover: var(--tp-palette-gold-300); /* 10.56:1 under its label */ --tp-on-action: var(--tp-palette-navy-900); /* Tints that status text sits on. Each is paired with its ink above. */ --tp-success-surface: var(--tp-palette-green-50); --tp-warning-surface: var(--tp-palette-amber-50); --tp-danger-surface: var(--tp-palette-red-50); --tp-info-surface: var(--tp-palette-navy-50); --tp-neutral-surface: var(--tp-palette-slate-100); --tp-highlight-surface: var(--tp-palette-gold-50); /* a callout, a chip */ --tp-avatar-surface: var(--tp-palette-gold-100); /* an initials disc */ /* The band: the navy block at the top of every page, which holds the navigation and the page's own heading. Its focus ring is gold, because the dark ring used everywhere else is invisible on navy. */ --tp-band: var(--tp-palette-navy-900); --tp-band-raised: var(--tp-palette-navy-800); /* a chip or hover on the band */ --tp-on-band: var(--tp-palette-white); /* 15.06:1 */ --tp-on-band-muted: var(--tp-palette-slate-300); /* 10.14:1 */ --tp-focus-on-band: var(--tp-palette-gold-400); /* 9.89:1 — non-text, 3:1 floor */ /* Icon tiles. One per population, shading from the darkest (whoever runs the environment) to the lightest (the candidate), as the prototype does. The icon on them is decorative and aria-hidden, so these answer to 3:1, and the lightest is 4.96:1 under white. */ --tp-tile-organisation: var(--tp-palette-navy-900); --tp-tile-centre: var(--tp-palette-navy-700); --tp-tile-candidate: var(--tp-palette-navy-600); /* Non-text: 3:1 is the floor (WCAG 1.4.11). The focus ring is drawn against the page, not the control, so one dark ring reads on light and dark alike. */ --tp-focus: var(--tp-palette-navy-900); --tp-border: var(--tp-palette-slate-450); /* Decorative only, and deliberately not contrast-checked: a divider carrying no information is outside 1.4.11. If a rule ever comes to *mean* something it needs a pair in PaletteContrastTests, not just a token. */ --tp-rule: var(--tp-palette-slate-100); /* ========================================================================= TIER 3 — SHAPE & RHYTHM. Unconstrained by contrast; this is the character. Transcribed from the prototype's Tailwind classes — the class is quoted so the mapping can be checked against the source. ========================================================================= */ /* --- Radius. The prototype's loudest single signal: almost nothing square. */ --tp-radius-sm: 0.5rem; /* rounded-lg — nav links, icon buttons, chips */ --tp-radius-md: 0.75rem; /* rounded-xl — buttons, inputs, tabs, tiles */ --tp-radius-lg: 1rem; /* rounded-2xl — every card */ --tp-radius-xl: 1.5rem; --tp-radius-2xl: 2rem; --tp-radius-pill: 50rem; /* rounded-full — status pills, avatars */ /* --- Spacing. Bootstrap's five steps, which is what every m-* and p-* utility resolves to, plus the four the prototype's layout actually uses. The named four are the ones to reach for: a card's padding is a decision, "1.25rem" is a coincidence. */ --tp-space-1: 0.25rem; --tp-space-2: 0.5rem; --tp-space-3: 1rem; --tp-space-4: 1.5rem; --tp-space-5: 3rem; --tp-space-grid: 0.75rem; /* gap-3 — between cards in a grid */ --tp-space-card: 1.25rem; /* p-5 — inside a card */ --tp-space-card-compact: 1rem; /* p-4 — inside a small card, a row */ --tp-space-section: 1.5rem; /* space-y-6 — between page sections */ --tp-space-hero: 2.5rem; /* mb-10 — under the landing page's hero */ /* --- Typeface. A font is a decision, not a token: the prototype's Nunito should be **self-hosted** rather than pulled from Google Fonts (a school proxy blocking fonts.gstatic.com would silently resize the whole product), and ADR-0028 leaves that open. Until it is decided this is the system stack, and the fallback list is what will still be doing the work on the day Nunito arrives — so keep it real. */ --tp-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --tp-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* --- Type scale. Tailwind's, because the prototype is written in it. Root is 16px at every width (it used to drop to 14px below 768px, which with a scale this small put secondary text at 10.5px on a phone). */ --tp-text-2xs: 0.625rem; /* text-[10px] — the band's eyebrow only */ --tp-text-xs: 0.75rem; /* text-xs — meta lines, pills */ --tp-text-sm: 0.875rem; /* text-sm — most text inside a card */ --tp-text-base: 1rem; /* section headings */ --tp-text-lg: 1.125rem; --tp-text-xl: 1.25rem; /* the band's page title */ --tp-text-2xl: 1.5rem; --tp-text-3xl: 1.875rem; --tp-text-4xl: 2.25rem; --tp-text-5xl: 3rem; /* a stat's number */ --tp-leading-tight: 1.25; /* headings */ --tp-leading-snug: 1.375; /* short blocks of card text */ --tp-leading-base: 1.5; /* body */ --tp-leading-relaxed: 1.625; --tp-tracking-wide: 0.025em; /* small uppercase labels */ --tp-tracking-widest: 0.1em; /* the band's eyebrow */ /* --- Weight. The prototype's headings are 800–900 and nothing is body-weight except running text. Reaching past 700 needs a typeface that ships the weights: the system stack does on Windows (Segoe UI Black) and macOS, and falls back to bold elsewhere — the font decision closes that. */ --tp-weight-normal: 400; --tp-weight-medium: 500; --tp-weight-semibold: 600; --tp-weight-bold: 700; --tp-weight-extrabold: 800; --tp-weight-black: 900; --tp-weight-heading: var(--tp-weight-extrabold); /* --- Elevation. Tailwind's shadow-sm / -md / -xl. One small shadow on every card; depth only on hover. Not contrast-checked: a shadow carries no information. */ --tp-elev-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --tp-elev-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --tp-elev-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* --- Sizes of the fixed-size things. */ --tp-size-tile: 2.75rem; /* w-11 — an icon tile */ --tp-size-mark: 2.5rem; /* h-10 — the white chip at the start of the band */ --tp-size-avatar: 2.25rem; /* w-9 — an initials disc */ --tp-size-icon: 1rem; /* an icon inline with text */ --tp-size-icon-lg: 1.25rem; /* an icon in a tile */ /* --- Motion. The landing cards lift on hover. Zeroed under prefers-reduced-motion in components.css. */ --tp-lift: -0.25rem; --tp-transition: 150ms ease; /* --- Focus ring geometry. The colour is tier 2 (--tp-focus) and measured; these two are not, but they are load-bearing for WCAG 2.4.11: the offset is what makes one dark ring legible against both a white page and a dark button. Do not take the offset to zero. */ --tp-focus-width: 3px; --tp-focus-offset: 2px; /* --- Layout. */ --tp-content-width: 72rem; /* max-w-6xl — every page */ --tp-content-width-narrow: 64rem; /* max-w-5xl — the landing page */ --tp-form-width: 36rem; /* a sign-in card */ --tp-border-width: 2px; /* border-2 — inputs and outlined buttons */ /* One number, in two files that must agree: the footer is absolutely positioned at the bottom of the page and the body reserves exactly its height as bottom margin. Changing one alone makes the footer overlap the last line of every page. */ --tp-footer-height: 60px; } /* --------------------------------------------------------------------------- The narrow-viewport step of the type scale. Two steps rather than Bootstrap's viewport interpolation, because a scale that cannot be written down cannot be designed — see the note in bootstrap-bridge.css. Only the sizes that would otherwise dominate a phone are reduced. --------------------------------------------------------------------------- */ @media (max-width: 767.98px) { :root { --tp-text-4xl: 1.875rem; --tp-text-3xl: 1.625rem; --tp-text-2xl: 1.375rem; } }