/* Orli v2 · design system · tokens --------------------------------------------------------------------------- One set of values for both directions and every shared module. Read with RULES.md. Sources: BRIEF-V2 §2 (surfaces, actions, worlds), the Orli Schools implementation (schools.css, adventureDesignSystem.ts @ origin/staging) and the approved buttons (../interactions/lib/buttons.css). Everything is a custom property on :root, prefixed --o- (system) or --w- (worlds). The button tokens below carry the same names and values as buttons.css, which stays the approved source for them; components.css imports that file unchanged. Order of use on a page: fonts.css → tokens.css → layout.css → components.css (or just system.css, which imports all four in that order). ------------------------------------------------------------------------- */ :root { /* ===================================================== colour: surfaces */ --o-canvas: #fcfaf8; /* page */ --o-surface: #ffffff; /* cards, fields, sheets */ --o-paper: #fffdf8; /* title-pill cream, tags on imagery */ --o-warm: #f5f1eb; /* the one "break" surface, footer, pills */ --o-warm-high: #e5dccc; /* pressed fills, current nav item edge */ --o-line: #ebe6dc; /* hairlines: card edges, dividers (Neutral 2 into canvas) */ /* ========================================================= colour: ink */ --o-ink: #2f2e2b; /* text, the pop shadow */ --o-ink-2: #52525b; /* secondary text (6.6:1 or better on every surface here) */ --o-n2: #dcd8ce; /* Neutral 2: button lip, quiet strokes */ --o-n3: #b1aa9a; /* Neutral 3: decoration only, never text */ --o-n4: #797468; /* Neutral 4: form-control edges (4.7:1 on white) */ /* ====================================================== colour: action */ --o-action: #246649; /* every primary action, links */ --o-action-hover: #1c5239; --o-action-press: #17442f; /* also the one deep band per page */ --o-mint: #5cca99; /* brand green fill; never under white text */ --o-on-mint: #1f3d32; --o-focus: #1f3d32; /* 3px ring, 3px offset, everywhere */ --o-error: #c83011; /* Red 4: error text and edges (5.4:1 on white) */ --o-error-soft: color-mix(in srgb, var(--o-error) 7%, var(--o-surface)); /* error notice and summary fill (Schools error-soft, in the one red) */ --o-disabled-fill: #f5f1eb; --o-disabled-label: #8c877d; /* The shooting star and its dotted path (Yellow 4). Decoration only: it is the one decoration of any section it appears in, and never text. */ --o-star: #e8b40a; /* ===================================================== colour: worlds accent dots, strokes, icons, the hover field. Never body text. deep world name, world-coloured text, round arrows (7:1 or better on wash) stage the world's own ground (plates, maps, 3D mats) soft pills and small tinted fills (Schools accentSoft) A section in a world uses ONE of these families and nothing else. */ --w-orla-accent: #328360; --w-orla-deep: #195440; --w-orla-stage: #dbeacb; --w-orla-soft: #ddefdf; --w-finn-accent: #3e9a74; --w-finn-deep: #123b56; --w-finn-stage: #c8ddeb; --w-finn-soft: #dcebdc; --w-rory-accent: #df4a32; --w-rory-deep: #6f2029; --w-rory-stage: #b83b35; --w-rory-soft: #ffd8cb; --w-nova-accent: #b76631; --w-nova-deep: #7c3f1b; --w-nova-stage: #f7d6b3; --w-nova-soft: #fbe5d2; --w-luna-accent: #ad477d; --w-luna-deep: #76305f; --w-luna-stage: #f2bcdf; --w-luna-soft: #f8dfef; --w-zeke-accent: #5260bc; --w-zeke-deep: #34419a; --w-zeke-stage: #dbd7ef; --w-zeke-soft: #e0e3fa; --w-sasha-accent: #357b9d; --w-sasha-deep: #174b65; --w-sasha-stage: #d6e8ec; --w-sasha-soft: #deeff5; /* Joy (The Sandpit), in the public cast since 2 Nov (Mark). Deep and stage from orli-schools-v1 instrument.ts; accent is Yellow 4, soft Yellow 1. */ --w-joy-accent: #e8b40a; --w-joy-deep: #7d5f0b; --w-joy-stage: #faf1d2; --w-joy-soft: #fff3cb; /* The current world. Outside any world the brand green family stands in. */ --world-accent: var(--o-action); --world-deep: var(--o-on-mint); --world-stage: #c4f0dd; --world-soft: #c4f0dd; /* The section wash: half the soft tone into the canvas. One lightness for every world, so no world shouts louder than another. */ --world-wash: color-mix(in srgb, var(--world-soft) 50%, var(--o-canvas)); /* ================================================================ type */ --o-font-ui: "Albert Sans", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --o-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif; /* Patrick Hand is retired (client request 12, 19 Oct): handwriting is the outlined Figma Hand SVGs, and the words under one are in the UI face. (buttons.css still declares the old value after this file; the v3 site shell sets it back to this.) */ --o-font-hand: var(--o-font-ui); /* Six steps. Nothing else sets a font size (buttons keep their own 15 / 16.5 / 18px from buttons.css). Sizes are fluid between 390 and 1440. */ --o-text-display: clamp(2.5rem, 1.85rem + 2.67vw, 4.25rem); /* 40 → 68 hero title, once per page */ --o-text-title: clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem); /* 30 → 44 section titles */ --o-text-heading: clamp(1.25rem, 1.16rem + .38vw, 1.5rem); /* 20 → 24 card titles, world label */ --o-text-lead: clamp(1.125rem, 1.08rem + .19vw, 1.25rem); /* 18 → 20 the one lead under a title */ --o-text-body: 1.0625rem; /* 17 body, fields */ --o-text-small: .875rem; /* 14 captions, pills, labels, meta */ --o-lh-display: 1.03; --o-lh-title: 1.1; --o-lh-heading: 1.25; --o-lh-lead: 1.5; --o-lh-body: 1.6; --o-lh-small: 1.45; --o-track-display: -.03em; --o-track-title: -.022em; --o-track-heading: -.012em; --o-weight-title: 700; /* Albert Sans display, title, heading */ --o-weight-ui: 650; /* Albert Sans buttons, labels, pills (as buttons.css) */ --o-weight-body: 400; /* Nunito Sans */ --o-weight-strong: 700; /* Nunito Sans, inline emphasis only */ --o-measure: 62ch; /* body copy */ --o-measure-lead: 34em; /* a lead of three lines at most (about 30 words) */ --o-measure-title: 20ch; /* titles wrap early and balance */ /* ============================================================= spacing 4px base. Use these and nothing in between. */ --o-space-1: 4px; --o-space-2: 8px; --o-space-3: 12px; --o-space-4: 16px; --o-space-5: 24px; --o-space-6: 32px; --o-space-7: 48px; --o-space-8: 64px; --o-space-9: 96px; --o-space-10: 128px; /* Rhythm. Three named gaps cover every stack on the site. */ --o-gap-tight: var(--o-space-3); /* label → title, title → meta */ --o-gap: var(--o-space-4); /* title → lead, paragraph → paragraph */ --o-gap-loose: var(--o-space-6); /* lead → actions, text → media in a stack */ /* Responsive steps (see the media queries below) */ --o-gutter: var(--o-space-4); /* 16 · 32 · 48 */ --o-section: var(--o-space-8); /* 64 · 96 · 128 top and bottom of a section */ --o-head-gap: var(--o-space-6); /* 32 · 48 · 48 section header → its content */ --o-grid-gap: var(--o-space-4); /* 16 · 24 · 32 between cards and columns */ /* ============================================================== layout */ --o-max: 1200px; /* text-led sections */ --o-max-wide: 1360px; /* header, footer, media-led sections */ --o-header-h: 64px; /* 88px from 900px up: headroom for the Free trial peek */ /* =============================================================== radii Three radii and the pill. Nested corners: inner = outer - padding. */ --o-r-control: 12px; /* fields, small thumbnails, the focus ring on text */ --o-r-card: 24px; /* cards, media frames, sheets, panels */ --o-r-pill: 999px; /* buttons, pills, nav, toggles */ /* ============================================================= shadows Soft and warm at rest, light from the upper left. The hard ink offset (--o-pop) belongs to interactive things only: buttons and link cards. */ --o-shadow: 0 1px 2px rgb(60 57 50 / .05), 0 10px 28px -8px rgb(60 57 50 / .12); --o-shadow-raised: 0 2px 6px rgb(60 57 50 / .06), 0 24px 56px -16px rgb(60 57 50 / .22); /* ===================================================== interaction + motion Same names and values as buttons.css. */ --o-ease: cubic-bezier(.22, 1, .32, 1); --o-settle: cubic-bezier(.34, 1.36, .64, 1); --o-t-interact: 160ms; /* hover, focus, colour */ --o-t-press: 90ms; /* going down is quicker than coming up */ --o-t-enter: 280ms; /* anything arriving: a sheet, a reveal, a button */ --o-lift-x: -3px; --o-lift-y: -4px; --o-pop: 4px 5px 0 0 var(--o-ink); --o-lip: 3px; --o-press-scale: .985; --o-focus-ring: 3px solid var(--o-focus); --o-focus-offset: 3px; --o-btn-h-sm: 44px; --o-btn-h-md: 50px; --o-btn-h-lg: 56px; --o-target: 44px; /* smallest thing anyone taps */ /* ============================================================== fields The Orli Schools field (schools.css .schools-field / -label / -help / -control / -check / -inline-error on origin/main), on the site's scale. Where Schools fails WCAG 2.2 AA the nearest passing system token stands in: edge Neutral 4 (Schools #f0f0f0 is 1.1:1 on white), errors Red 4 (Schools #f24822 is 3.7:1), the 3px #1F3D32 ring (Schools: 2px mint). Text is one step up from the app's dense 14px: 16px values (iOS zooms the page on a field under 16px) and labels, 14px help and errors. */ --o-field-gap: 6px; /* label → control → help (Schools geometry) */ --o-field-h: var(--o-btn-h-md); /* 50px: sits level with a button in a row */ --o-field-pad: 12px 16px; --o-field-edge: var(--o-n4); /* 4.7:1 on white */ --o-field-hover: var(--o-warm); /* Schools surface-subtle */ --o-field-text: 1rem; /* 16px, the values */ --o-field-label: 1rem; /* 16px semibold Nunito Sans */ --o-field-help: var(--o-text-small); /* 14px help and errors */ --o-field-mark: 20px; /* tick and radio */ --o-field-halo: 0 0 0 7px color-mix(in srgb, var(--o-mint) 18%, transparent); /* Schools' soft focus halo, outside the ring */ /* ============================================================== layers */ --o-z-header: 50; --o-z-sheet: 80; --o-z-toast: 100; } /* Responsive steps: phone (default) · tablet (600+) · desktop (1100+) */ @media (min-width: 600px) { :root { --o-gutter: var(--o-space-6); --o-section: var(--o-space-9); --o-head-gap: var(--o-space-7); --o-grid-gap: var(--o-space-5); } } @media (min-width: 900px) { :root { --o-header-h: 88px; } } @media (min-width: 1100px) { :root { --o-gutter: var(--o-space-7); --o-section: var(--o-space-10); --o-grid-gap: var(--o-space-6); } } /* ============================================================ world scopes Put data-world on a section (or the page) and everything inside picks up that world's family: world label, pills, wash, link cards, the field. */ [data-world="orla"] { --world-accent: var(--w-orla-accent); --world-deep: var(--w-orla-deep); --world-stage: var(--w-orla-stage); --world-soft: var(--w-orla-soft); } [data-world="finn"] { --world-accent: var(--w-finn-accent); --world-deep: var(--w-finn-deep); --world-stage: var(--w-finn-stage); --world-soft: var(--w-finn-soft); } [data-world="rory"] { --world-accent: var(--w-rory-accent); --world-deep: var(--w-rory-deep); --world-stage: var(--w-rory-stage); --world-soft: var(--w-rory-soft); } [data-world="nova"] { --world-accent: var(--w-nova-accent); --world-deep: var(--w-nova-deep); --world-stage: var(--w-nova-stage); --world-soft: var(--w-nova-soft); } [data-world="luna"] { --world-accent: var(--w-luna-accent); --world-deep: var(--w-luna-deep); --world-stage: var(--w-luna-stage); --world-soft: var(--w-luna-soft); } [data-world="zeke"] { --world-accent: var(--w-zeke-accent); --world-deep: var(--w-zeke-deep); --world-stage: var(--w-zeke-stage); --world-soft: var(--w-zeke-soft); } [data-world="sasha"] { --world-accent: var(--w-sasha-accent); --world-deep: var(--w-sasha-deep); --world-stage: var(--w-sasha-stage); --world-soft: var(--w-sasha-soft); } [data-world="joy"] { --world-accent: var(--w-joy-accent); --world-deep: var(--w-joy-deep); --world-stage: var(--w-joy-stage); --world-soft: var(--w-joy-soft); } [data-world] { --world-wash: color-mix(in srgb, var(--world-soft) 50%, var(--o-canvas)); }