/* ============================================================ Overtly design system: tokens v0.1, 28 September 2026. Extracted from the local preview of 28 September, corrected where the measurements did not hold. EVERY TOKEN IS PREFIXED --ov-. That is not tidiness. The preview and the live site both define bare --muted and --line with DIFFERENT values (--muted #5d6c64 against #7B857F, --line #d9dfd8 against #D9E0DC). Custom properties inherit, so two :root blocks in one page means whichever loads last silently restyles every page that has not been converted yet. Prefixing makes the two systems able to coexist while the migration runs. Contrast figures below are measured, not asserted. Every pair a component actually renders was computed; the three that failed are corrected here and the correction is noted inline. ============================================================ */ :root { /* ---- Palette. Values from Brand System v1.0 unless noted. ---- */ --ov-forest: #0b4638; /* Deep Evergreen. Primary action, dark surface */ --ov-forest-accent: #176F58; /* Deep Accent. Brand System v1.0's secondary dark green, listed there for hover states. It is also the only brand green that reads as a shift away from Brand Ink at display size: 5.86:1 on paper, 6.00:1 on white, against Ink's 12:1 and Deep Evergreen's 10.78:1, which sit too close to Ink to be seen as a second colour. Text, never a surface: paper on it is 6.00:1 but ink on it is 2.05:1. */ --ov-ink: #173b33; /* Brand Ink. Body and headings on light */ --ov-mint: #a3e4c8; /* Pastel Mint. Brand tile */ --ov-coral: #f28a78; /* Soft Coral. SURFACE ONLY, never text: it is 2.36:1 on paper. Ink on it is 5.08:1. */ --ov-yolk: #f3c64e; /* Egg yolk. SURFACE ONLY, 1.50:1 on paper. Ink on it is 7.60:1, yolk on forest 6.67:1. Added to Brand System v1.0 on 28 September. */ --ov-coral-pale: #fbe3dd; /* Pale Coral. Quiet coral surface, pills */ --ov-yolk-pale: #FBEFC8; /* Pale Yolk. Added 29 September for the evidence grade "tested and mixed". Egg Yolk is 1.50:1 on paper and cannot carry a heading; this tint takes ink at 10.69:1. Same role as Pale Coral: a quiet tinted surface, never text. */ /* Coral Ink is the only coral that is legible as text, and it exists because the two the brand already had are not. Soft Coral #f28a78 2.36:1 on paper fails everywhere Deep Coral #d96454 3.48:1 on paper fails 4.5:1 at every size the site uses it at Coral Ink #AB4036 5.83:1 on paper passes Decision 61 proposed #C4553F for this job and put it at "about 4.3 to 1". Measured, it is 4.35:1 on paper and 4.45:1 on white, so it fails 4.5:1 on both and would not have fixed the thing it was proposed for. #AB4036 was chosen as the brightest coral on Soft Coral's own hue that clears 4.5:1 on every light surface small coral text actually lands on: paper 5.83, white 5.97, pale 5.22, bg-soft 5.33, pale coral 4.87. IT IS STILL NOT UNIVERSAL. On mint it is 4.12:1 and on yolk 3.69:1, so coral text never goes on a mint or yolk surface. Text on a coloured tone is ink, or paper on forest. */ --ov-coral-ink: #AB4036; --ov-paper: #fffcf7; /* Warm Ivory. Page background */ --ov-white: #ffffff; /* Inputs and surfaces needing separation */ --ov-pale: #e6f3ea; /* Quiet supporting surface */ /* ---- Text ---- */ --ov-text: var(--ov-ink); /* 12.00:1 on paper */ --ov-text-muted: #5d6c64; /* 5.41:1 on paper, 4.84:1 on pale. CORRECTION 1. The live site uses #7B857F for the same job, which is 3.73:1 and FAILS 4.5:1 for normal text. This has been shipping on every duration, source count and card summary. */ --ov-text-on-dark: var(--ov-paper); /* 10.54:1 on forest */ /* ---- On mint. Pastel Mint is a light ground, but not light enough: three of the semantic text colours fail 4.5:1 on it, and all three of them appear inside the account page's profile panel. These are the same hues darkened until they clear, and .ov-panel--mint re-points the semantic tokens at them for its own subtree rather than overriding each component by selector. Mint only: on paper they are too dark and would flatten the ramp. ---- */ --ov-text-muted-on-mint: #40544c; /* Muted Gray is 3.82:1 on mint. 5.59 */ --ov-coral-ink-on-mint: #8F3229; /* Coral Ink is 4.12:1 on mint. 5.45 */ /* Deep Accent is 4.20:1 on mint, so success text on mint takes Deep Evergreen, 7.44:1, which the system already has. No token needed. */ /* ---- Lines. Two of them, and the difference matters. ---- */ --ov-divider: #d9dfd8; /* DECORATIVE ONLY. 1.32:1 on paper. Never the only way to find a control. */ --ov-control-border: #7f8d85; /* CORRECTION 2. 3.39:1 on paper, 3.47:1 on white, 3.04:1 on pale. The brief requires 3:1 for essential control boundaries and names a stronger token without giving it a value. This is the value. */ /* ---- Focus. Two rings, and using the wrong one is the failure mode. CORRECTION 3. The brief says "use the yellow focus token on forest surfaces", which reads as though yolk were the focus colour. On forest yolk is 6.67:1 and correct. On paper it is 1.58:1, an invisible focus ring. So the ring is scoped by surface, and the light-surface default is forest, which clears 3:1 on every surface in this palette including coral (4.46:1) and yolk (6.67:1). The preview used a third green, #277657, which fails on coral at 2.28:1. Retired. ---- */ --ov-focus: var(--ov-forest); --ov-focus-on-dark: var(--ov-yolk); --ov-focus-width: 3px; --ov-focus-offset: 3px; /* ---- Surfaces ---- */ --ov-bg: var(--ov-paper); --ov-surface: var(--ov-white); --ov-surface-soft: var(--ov-pale); --ov-action-bg: var(--ov-forest); --ov-action-text: var(--ov-white); /* ---- Environments. Added with the visual handoff of 6 October 2026 (design-resources/overtly/). Mint is the platform. A page is in one of two environments, learner or creator, and the environment decides the action colour, the accent, the process band and the step circle. The values here are the learner's, which is the default for any page that does not say. site/design-system/environment.css sets them again for a page that carries data-ov-environment, with the handoff's palette. Measured: white on the learner action 5.46:1, on its hover 6.73:1; white on the creator action 4.82:1, on its hover 5.79:1. White never goes on the light creator accent #FF6475, which is 2.9:1. ---- */ --ov-learn-action: #28765e; --ov-learn-hover: #22674f; --ov-create-action: #d92945; --ov-create-hover: #c4213c; --ov-env-action: var(--ov-learn-action); --ov-env-action-hover: var(--ov-learn-hover); --ov-env-link: var(--ov-learn-action); --ov-env-accent: var(--ov-mint); --ov-env-process-bg: var(--ov-pale); --ov-env-step-bg: var(--ov-mint); --ov-env-step-text: var(--ov-ink); --ov-env-practice-bg: var(--ov-pale); /* ---- Type. Fluid, in rem, at a 16px root, per the brief's scale. Browser text sizing is respected: no px font sizes, no rem lock. ---- */ --ov-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --ov-size-display: clamp(2.75rem, 2rem + 2.6vw, 4.5rem); /* 44 to 72 */ --ov-size-title: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem); /* 36 to 56 */ --ov-size-section: clamp(1.75rem, 1.55rem + 0.7vw, 2.25rem);/* 28 to 36 */ --ov-size-card: clamp(1.125rem, 1.05rem + 0.35vw, 1.4rem);/* 18 to 22.4 */ --ov-size-lead: 1.125rem; /* 18 */ --ov-size-body: 1rem; /* 16. Also the minimum for inputs, so iOS does not zoom on focus. */ --ov-size-label: 0.875rem; /* 14 */ --ov-size-meta: 0.75rem; /* 12 floor. Nonessential detail only. */ /* ---- Title setting. Added 29 September. The reference Orlando pointed at loads no webfont at all: its stylesheet says `Arial, Helvetica, sans-serif` and downloads nothing, so on a Mac it renders in Arial. What reads as a different typeface is the SETTING, not the face: reference weight 500 · tracking -0.055em · leading 1.02 Overtly weight 700 · tracking -0.02em · leading 1.08 Lighter and much tighter against heavier and looser. Arial and Helvetica cannot be served as webfonts without a licence, and falling back to the system stack means the titles are Arial on Mac and Windows, Roboto on Android and Liberation Sans on most Linux, which is not a brand face. So the setting is adopted and the face stays Inter. Tracking scales with size on purpose. -0.055em is right at 60px and closes the counters on a 20px card title, so one number for every heading would be wrong at one end or the other. These are tokens so that swapping the face later is one line here rather than an edit in every component. ---- */ --ov-title-weight: 500; --ov-track-display: -0.045em; /* 40px and up */ --ov-track-title: -0.035em; /* 24 to 40 */ --ov-track-card: -0.025em; /* 16 to 24 */ --ov-leading-display: 1.03; --ov-leading-title: 1.1; --ov-leading-body: 1.6; --ov-leading-lesson: 1.8; --ov-leading-tight: 1.15; /* ---- Spacing ---- */ --ov-space-1: 4px; --ov-space-2: 8px; --ov-space-3: 12px; --ov-space-4: 16px; --ov-space-5: 20px; --ov-space-6: 24px; --ov-space-7: 32px; --ov-space-8: 40px; --ov-space-9: 48px; --ov-space-10: 64px; /* ---- Radii ---- */ --ov-radius-control: 8px; --ov-radius-card: 13px; --ov-radius-panel: 18px; --ov-radius-pill: 999px; /* ---- Layout ---- */ --ov-content-width: 1180px; --ov-reading-width: 688px; --ov-gutter: clamp(16px, 4vw, 36px); /* ---- Motion ---- */ --ov-motion-fast: 160ms; /* small feedback */ --ov-motion-state: 240ms; /* state change */ --ov-motion-enter: 600ms; /* a single entrance, never a loop */ --ov-motion-ease: cubic-bezier(0.2, 0, 0.1, 1); --ov-hover-lift: 2px; /* ---- Targets ---- */ --ov-target-min: 44px; } /* A brand tile's foreground is never white. Measured: white on coral is 2.42:1. Ink on mint 8.47, on coral 5.08, on yolk 7.60. */ .ov-on-mint, .ov-on-coral, .ov-on-yolk { color: var(--ov-ink); } .ov-on-forest { color: var(--ov-text-on-dark); } @media (prefers-reduced-motion: reduce) { :root { --ov-motion-fast: 0ms; --ov-motion-state: 0ms; --ov-motion-enter: 0ms; --ov-hover-lift: 0px; } }