/* * Strictlydev - Design tokens * * SOURCES, in order of precedence: * 1. Website Production Specification v1.0 (12 Sept 2026), section 5 * "Production Design System" - the confirmed production colour values and * the "Bold + Minimal - Light" design direction. * 2. Brand Guidelines v1.0 - verbal identity and the principle behind the * palette ("Recognition from the existing blue family. Authority from * neutrals. Contrast from one warm accent."). * * The guidelines said their sampled values "should be confirmed against the * original vector master when available". Section 5 of the production spec is * that confirmation, so these values supersede the earlier sampled set. * * DESIGN DIRECTION: light-dominant. "Use white/light surfaces as the dominant * visual field; dark sections should be occasional, not structural defaults." * * ACCESSIBILITY: the spec targets WCAG 2.2 AA (4.5:1 text, 3:1 UI). Three * production values do not reach that on white, so each has a derived, * documented companion below. Ratios are stated against White unless noted. */ :root { /* --------------------------------------------------------------- * 1. Production palette - Production Specification section 5. * ------------------------------------------------------------- */ --sd-brand-blue: #1DAAE2; /* 2.66 - CTA fills, highlights. Never text. */ --sd-deep-navy: #0B2D4F; /* 13.98 - headings, navigation, authority */ --sd-secondary-navy: #0F4C81; /* 8.86 - subheads, diagrams, hover */ --sd-light-blue: #EAF6FC; /* 1.10 - soft panels, flow surfaces */ --sd-mist: #F4F7FA; /* 1.08 - alternating backgrounds */ --sd-warm: #F3A51B; /* 2.06 - rare milestone / priority accent */ --sd-body: #33475B; /* 9.58 - body copy */ --sd-muted-spec: #6E7E8E; /* 4.17 - large text and UI only */ --sd-border-base: #D8E3EC; /* 1.30 - lines and cards */ --sd-white: #FFFFFF; /* primary page canvas */ /* --------------------------------------------------------------- * 2. Derived values. Same hue and saturation as their production * parent; only lightness moves. * * Brand Blue is a fill colour: at 2.66 it cannot carry text or a * functional stroke on white, and white-on-Brand-Blue is only 2.66. * Blue that must be READ uses the ramp below; blue that must be * SEEN as a fill keeps the production value with a navy label. * ------------------------------------------------------------- */ --sd-blue-800: #0F5876; /* 7.84 - link hover / active */ --sd-blue-700: #136D91; /* 5.79 - links and interactive text */ --sd-blue-600: #14749A; /* 5.26 - smallest passing body-size blue */ --sd-blue-500: #157AA3; /* 4.83 */ --sd-blue-400: #1788B5; /* 4.02 - large text and UI strokes only */ /* Warm accent is 2.06 on white - graphic use only. */ --sd-warm-800: #835607; /* 6.37 */ --sd-warm-700: #916008; /* 5.41 - accent text on light */ --sd-warm-600: #A06908; /* 4.65 */ /* Spec Muted is 4.17 - below AA for small text. */ --sd-muted: #5A6E81; /* 5.27 white / 4.90 mist - metadata */ /* Navy tints for the occasional dark section. */ --sd-navy-tint-85: #C9D6E1; /* 9.65 on Deep Navy - secondary copy reversed */ --sd-navy-tint-70: #9FB3C4; /* 6.19 on Deep Navy - metadata reversed */ --sd-navy-raised: #133A61; --sd-border-navy: #1E4A73; /* --------------------------------------------------------------- * 3. Semantic roles. Components read these, never the raw palette. * ------------------------------------------------------------- */ --sd-surface: var(--sd-white); --sd-surface-raised: var(--sd-white); --sd-surface-sunken: var(--sd-mist); --sd-surface-soft: var(--sd-light-blue); --sd-heading: var(--sd-deep-navy); --sd-text: var(--sd-body); --sd-text-muted: var(--sd-muted); --sd-text-meta: var(--sd-muted); --sd-border: var(--sd-border-base); --sd-border-strong: #B9CCDB; --sd-link: var(--sd-blue-700); --sd-link-hover: var(--sd-blue-800); --sd-focus: var(--sd-blue-700); /* Primary CTA. The spec assigns Brand Blue to the primary CTA; white on * it reaches only 2.66, so the label is Deep Navy at 5.26 instead. That * keeps the specified brand colour and still clears AA. */ --sd-cta-bg: var(--sd-brand-blue); --sd-cta-fg: var(--sd-deep-navy); --sd-cta-bg-hover: #38BCEE; /* Graphic language - Structured Flow. */ --sd-graphic-1: var(--sd-brand-blue); --sd-graphic-2: #4FC3E8; --sd-graphic-3: var(--sd-secondary-navy); --sd-graphic-neutral: #9FB3C4; --sd-graphic-accent: var(--sd-warm); /* --------------------------------------------------------------- * 4. Typography. IBM Plex Sans remains the brand typeface * (Brand Guidelines p.29; production spec section 5 permits it * "if licensed/served appropriately"). * * NOTE: it is currently served from the Google Fonts CDN. The reference * build's .htaccess ships a CSP with style-src 'self', which would block * that. Self-host the woff2 files before adopting that CSP, or the page * silently falls back to Inter/Arial. * ------------------------------------------------------------- */ --sd-font: 'IBM Plex Sans', Inter, Aptos, Arial, Helvetica, sans-serif; --sd-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace; --sd-weight-regular: 400; --sd-weight-medium: 500; --sd-weight-semibold: 600; --sd-weight-bold: 700; /* Editorial scale. Spec section 5: H1 48-88px desktop, 46-54px mobile; * body 16-20px; body line length 60-75 characters. */ --sd-text-xs: 0.75rem; --sd-text-sm: 0.875rem; --sd-text-base: 1.0625rem; --sd-text-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem); --sd-size-h6: 0.9375rem; --sd-size-h5: 1.125rem; --sd-size-h4: clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem); --sd-size-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); --sd-size-h2: clamp(2rem, 1.55rem + 2vw, 3.25rem); --sd-size-h1: clamp(2.875rem, 2.2rem + 3.4vw, 5.5rem); --sd-size-display: clamp(2.875rem, 2.1rem + 4vw, 5.5rem); --sd-leading-display: 1.02; --sd-leading-heading: 1.1; --sd-leading-snug: 1.35; --sd-leading-body: 1.6; --sd-tracking-display: -0.035em; --sd-tracking-heading: -0.025em; --sd-tracking-body: 0; --sd-tracking-caps: 0.19em; --sd-measure: 70ch; --sd-measure-tight: 20ch; /* --------------------------------------------------------------- * 5. Space, on a 4px base. * ------------------------------------------------------------- */ --sd-space-1: 0.25rem; --sd-space-2: 0.5rem; --sd-space-3: 0.75rem; --sd-space-4: 1rem; --sd-space-5: 1.25rem; --sd-space-6: 1.5rem; --sd-space-8: 2rem; --sd-space-10: 2.5rem; --sd-space-12: 3rem; --sd-space-16: 4rem; --sd-space-20: 5rem; --sd-space-24: 6rem; --sd-space-32: 8rem; --sd-section-y: clamp(4rem, 2.6rem + 5vw, 5.75rem); --sd-section-y-tight: clamp(2.75rem, 2rem + 2.6vw, 3.875rem); /* --------------------------------------------------------------- * 6. Layout. Spec section 7: 1180-1240px content max at >=1280px. * ------------------------------------------------------------- */ --sd-container: 73.75rem; /* 1180px */ --sd-container-wide: 77.5rem; /* 1240px */ --sd-container-narrow: 48.75rem; --sd-gutter: clamp(0.875rem, 0.6rem + 1.4vw, 1.25rem); --sd-header-h: 5.75rem; /* 92px - clears the 60px logo with room */ /* --------------------------------------------------------------- * 7. Radius, elevation, motion. * ------------------------------------------------------------- */ --sd-radius-sm: 0.625rem; --sd-radius-md: 0.875rem; --sd-radius-lg: 1.125rem; --sd-radius-xl: 1.5rem; --sd-radius-pill: 62.5rem; --sd-shadow-sm: 0 1px 2px rgba(11, 45, 79, 0.05); --sd-shadow-md: 0 10px 24px rgba(21, 154, 199, 0.10); --sd-shadow-lg: 0 22px 65px rgba(19, 50, 75, 0.10); --sd-duration-fast: 140ms; --sd-duration: 220ms; --sd-duration-slow: 420ms; --sd-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --sd-z-base: 1; --sd-z-sticky: 100; --sd-z-header: 200; --sd-z-overlay: 300; } /* * Mist band - the standard alternating section background. */ .sd-surface--mist { --sd-surface: var(--sd-mist); --sd-surface-raised: var(--sd-white); --sd-surface-sunken: #E8EEF4; } /* * Soft panel - Light Blue, used for structured-flow surfaces and callouts. */ .sd-surface--soft { --sd-surface: var(--sd-light-blue); --sd-surface-raised: var(--sd-white); --sd-surface-sunken: #D8EDF8; } /* * Deep Navy section. Occasional by design - the production direction is * explicit that dark sections must not be structural defaults. Reserve it for * a single moment of emphasis per page at most. */ .sd-surface--navy, .sd-surface--ink { --sd-surface: var(--sd-deep-navy); --sd-surface-raised: var(--sd-navy-raised); --sd-surface-sunken: #071F38; --sd-heading: var(--sd-white); --sd-text: var(--sd-navy-tint-85); --sd-text-muted: var(--sd-navy-tint-85); --sd-text-meta: var(--sd-navy-tint-70); --sd-border: var(--sd-border-navy); --sd-border-strong: #2C5E8A; --sd-link: #7FD8F7; --sd-link-hover: var(--sd-light-blue); --sd-focus: #7FD8F7; --sd-cta-bg: var(--sd-brand-blue); --sd-cta-fg: var(--sd-deep-navy); --sd-cta-bg-hover: #55C8F0; }