/* ========================================================================== Looking Sharp — Design Tokens Last updated: 28 October 2026 SOURCE OF TRUTH: foundation/brand-id.md. Every value here mirrors a value there, and brand-id.md wins if they disagree. Change brand-id.md first, then this file in the same edit (see "Brand changes" in Projects\CLAUDE.md). Tokens marked CHECK are set by contrast. Unbracketed values are working defaults: change them only if brand-id.md says so. Do not rename or remove tokens: components.css reads these exact names. If a build needs a value that isn't here, record it in brand-id.md, then add a new token for it. For how to load this file in a build, see the design-system README. ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------ Check approved pairings in brand-id.md before combining text and background. */ --color-primary-dark: #16181B; /* Carbon — text, headings, buttons, dark sections, the tape case and ticks */ --color-primary-light: #EEEFEB; /* Chalk — page backgrounds, card fills, text on Carbon */ --color-secondary: #C7CBCF; /* Steel — borders, dividers, disabled fills. Decorative only on Chalk */ --color-accent: #FFC72C; /* Tape yellow — the tape blade, tags, hover fills. Never text on Chalk */ --color-link: var(--color-primary-dark); /* Carbon, underlined. 15.4:1 on Chalk */ --color-text: var(--color-primary-dark); /* body copy. 15.4:1 on Chalk */ --color-text-muted: #565B62; /* Graphite. 5.93:1 on Chalk, usable at body size */ --color-text-inverse: var(--color-primary-light); /* text on Carbon. 15.4:1 */ --color-background: var(--color-primary-light); /* page background */ --color-surface: var(--color-primary-light); /* card and input fill */ --color-border: var(--color-secondary); /* decorative strokes only. Never a form-control boundary */ /* Functional colours. Both pass 4.5:1 on Chalk; keep them off Carbon */ --color-success: #2F6B3F; /* 5.52:1 on Chalk */ --color-error: #B42318; /* 5.69:1 on Chalk */ --color-focus: var(--color-accent); /* focus ring on DARK surfaces. 11.4:1 on Carbon */ /* Design-system colours */ --color-focus-ring: var(--color-primary-dark); /* focus ring on LIGHT surfaces. 15.4:1 on Chalk */ --color-control-border: var(--color-text-muted); /* form-control boundary. Graphite, 5.93:1 on Chalk */ --color-border-inverse: color-mix(in srgb, var(--color-primary-light) 40%, transparent); /* reversed button border. CHECK: 3:1 on --color-primary-dark */ /* --- Typography -------------------------------------------------------- Sizes use rem so they scale with user settings. */ --font-heading: "Big Shoulders Display", "Arial Narrow", sans-serif; --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif; --font-mono: "IBM Plex Mono", monospace; --text-h1: clamp(3.25rem, 1.25rem + 6vw, 7rem); --text-h2: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); --text-h3: 1.75rem; --text-h4: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* H4 and pull quote */ --text-body: 1.125rem; /* 18px for older readers (brand-id.md) */ --text-label: 0.8125rem; --text-caption: 0.875rem; --text-button: 0.9375rem; --text-mono: 0.8125rem; --text-stat: clamp(3.5rem, 2rem + 5vw, 6rem); --weight-heading: 700; /* H3, pull quotes */ --weight-light: 800; /* H1, H2 and stat figures: the display face is used heavy */ --weight-body: 400; --weight-bold: 700; /* labels, buttons, tags, */ --line-height-heading: 1.0; --line-height-hero: 0.95; --line-height-body: 1.6; --line-height-ui: 1.4; --letter-spacing-heading: normal; --tracking-nav: 0.08em; --tracking-label: 0.14em; --tracking-button: 0.06em; --tracking-wordmark: 0.04em; --underline-offset: 3px; /* --- Spacing ----------------------------------------------------------- Change the scale only if brand-id.md specifies a different one. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 32px; --space-xl: 64px; --space-2xl: 120px; /* hero rhythm */ --content-max-width: 1200px; --content-narrow-width: 640px; /* body text measure */ --page-margin: 80px; /* desktop page margin */ --page-margin-mobile: 24px; --section-padding: var(--space-xl); --section-padding-hero: var(--space-2xl); --target-size: 2.75rem; /* 44px minimum height for buttons, inputs, nav links. Accessibility: keep */ --checkbox-size: 1.25rem; --rule-width: 32px; /* section-label rule line */ /* --- Shape --------------------------------------------------------------- Squared, machined edges. */ --border-weight: 1px; --border-weight-strong: 1px; /* secondary buttons, form controls */ --border-weight-mark: 1.5px; /* logo icon square */ --rule-accent-weight: 2px; /* pull-quote rule, focus ring, active-nav underline */ --radius-sm: 2px; --radius: 4px; /* --- Components -------------------------------------------------------- These reference the tokens above. Leave them as they are. */ --button-primary-bg: var(--color-primary-dark); --button-primary-text: var(--color-text-inverse); --button-radius: var(--radius-sm); --button-padding: var(--space-sm) var(--space-md); --card-bg: var(--color-surface); --card-radius: var(--radius); --card-padding: var(--space-lg); --input-radius: var(--radius-sm); --transition: 150ms ease; /* --- Style variants ------------------------------------------------------ Per-client design choices, copied from the Style variants table in brand-id.md. */ --label-text-transform: uppercase; --button-text-transform: uppercase; --tag-text-transform: uppercase; --h4-font-style: normal; --quote-font-style: normal; --rule-accent-color: var(--color-primary-dark); --button-primary-hover-bg: var(--color-accent); /* Carbon on Tape yellow, 11.4:1 */ --button-primary-hover-text: var(--color-primary-dark); --button-secondary-border: var(--color-primary-dark); --button-secondary-text: var(--color-primary-dark); /* 15.4:1 on Chalk */ --button-secondary-hover-bg: var(--color-accent); --button-secondary-hover-text: var(--color-primary-dark); /* 11.4:1 */ --tag-bg: var(--color-accent); --tag-text: var(--color-primary-dark); /* 11.4:1 */ --tag-radius: var(--radius-sm); --logo-mark-radius: var(--radius-sm); /* Contrast-driven */ --color-link-inverse: var(--color-accent); /* 11.4:1 on Carbon */ --color-text-caption: var(--color-text-muted); /* Graphite, 5.93:1 on Chalk */ /* --- Brand device: the tape measure (brand-id.md, Section 5) ----------- */ --tape-height: clamp(4.5rem, 3.5rem + 3vw, 6.5rem); --tape-motion: 1600ms cubic-bezier(0.2, 0.7, 0.2, 1); }