/* ============================================================ APPLIED INTELLIGENCE LABS — DESIGN TOKENS v1.1 Applied Intelligence Labs Ε.Ε. · September 2026 THIS FILE IS THE SINGLE SOURCE OF TRUTH. Colour, type, space, radius, elevation, glass, motion, print geometry: every value any AIL page, document, deck or app uses resolves from here. If a value you need is missing, add a token. BUILT FROM THE WEBSITE. Every colour, size and spacing that appears on the Option E "Contour" website boards (paper and glass) is taken from them exactly. Values the boards do not show, such as product states, print geometry and CMYK, extend them and are marked as extensions. ONE SYSTEM, TWO MATERIALS :root PAPER. The default. Anything printed, typed into Word, sent through a mail client, and the paper website pages. [data-theme="glass"] GLASS. The website, decks, social, product marketing. Same names, different values, plus the glass materials. Components read the same names in both, so a component written once works on either material with no per-component CSS. The governing rules are in ail-design-system.md. When a file and that document disagree, the document wins; then fix the file. ============================================================ */ :root { /* ============================================================ BRAND — Deep: actions, and the closing band On paper, Deep is the primary action and the selected state. The website also grounds its one closing band (the call to action) in Deep, with the footer a shade darker. Nothing else. On glass the action moves to the Bright material and the Signal accent (see the glass block). ============================================================ */ --color-primary: #0B3D63; /* Deep */ --color-primary-hover: #082F4D; --color-primary-press: #06253D; /* extension */ --color-primary-ink: #FFFFFF; /* text on a Deep fill */ --primary-subtle: rgba(11,61,99,.08); /* selected rows, tint fills (extension) */ --primary-wash: rgba(11,61,99,.04); /* faint hover wash (extension) */ --color-signal: #7FD3EA; /* Signal: glass accent, AI/active. Never on paper */ /* BANDS — the website's full-width dark sections (paper pages) */ --band-graphite: #26303A; /* the statement band ("We don't sell AI…") */ --band-deep: #0B3D63; /* the closing call-to-action band */ --band-footer: #082F4D; /* the footer */ --text-on-graphite: #C5CDD3; /* body text on the Graphite band. 8.3:1 */ --text-on-deep: #C9D8E6; /* body text on Deep 7.8:1 and on the footer 9.5:1 */ --line-on-deep: #1D4A6E; /* the hairline inside the footer */ /* ============================================================ DEPTH RAMP — how far down the understanding goes The website's four blues (Shallows, Reef, Channel and Deep on the boards), numbered Depth 1–4. Blue means depth or action. The ramp is for diagrams, data and the constellation, and Depth 4 is Deep. Depth 3 is never text: 3.9:1 on white. ============================================================ */ --depth-1: #BFE0EA; /* Shallows */ --depth-2: #7FBCD2; /* Reef. Also the mark's lit route on Deep */ --depth-3: #3D8AAE; /* Channel. Also the mark's lit route on paper */ --depth-4: #0B3D63; /* Deep */ /* MARKER — the website's darker blue for points on a diagram: route waypoints, edge-case markers and iteration loops, and the glow behind glass. 4.8:1 on white, so a small label on white may use it. */ --color-marker: #2F7A9C; /* ============================================================ GROUND LADDER — chalk, cool and quiet Chalk and Paper come from the Contour boards. The two outer rungs extend them for product shells and wells. ============================================================ */ --bg-layer-1: #E4E8E9; /* app shell / page base behind panels */ --bg-layer-2: #EFF1F1; /* Chalk: the page ground */ --bg-layer-3: #F7F8F8; /* panels, sections */ --bg-layer-4: #FFFFFF; /* Paper: cards, inputs, the printed page */ --bg-app: var(--bg-layer-1); --bg-page: var(--bg-layer-2); --bg-panel: var(--bg-layer-3); --bg-surface: var(--bg-layer-4); --surface-sunk: #DDE2E4; /* wells, tab tracks, code */ --bg-surface-hover: #F4F6F6; --bg-surface-active: #ECEFF0; /* ============================================================ INK — graphite and steel ============================================================ */ --text-primary: #26303A; /* Graphite. Headings, labels, navigation. 13.4:1 on white */ --text-body: #56626D; /* Steel. Body copy, as on the website. 6.2:1 white, 5.5:1 Chalk */ --text-secondary: #56626D; /* Steel. Leads and secondary UI */ --text-muted: #616C75; /* Captions and meta in product UI (extension). 4.7:1 on Chalk */ --text-disabled: #9AA5AD; /* Contour. Disabled only, never for reading */ --text-inverse: #FFFFFF; --text-link: var(--color-primary); /* ============================================================ LINES — lines for land On paper, edges come from hairlines, not shadows. Contour grey draws the network's lines in graphics; it is never decoration and never text. ============================================================ */ --border-subtle: #E1E6E8; --border-default: #D3D9DC; --border-strong: #B7C0C6; --line-contour: #9AA5AD; /* the network's lines in graphics and diagrams */ /* ============================================================ FUNCTIONAL — status meaning only, low-chroma tints ============================================================ */ --color-success: #2E7D5B; --color-success-light: rgba(46,125,91,.10); --color-warning: #9A6700; --color-warning-light: rgba(154,103,0,.10); --color-error: #B42318; --color-error-light: rgba(180,35,24,.08); --color-info: #2F7A9C; --color-info-light: rgba(47,122,156,.10); /* ============================================================ FOCUS — one treatment, always visible Deep on Chalk measures 9.95:1, so one outline carries it. ============================================================ */ --focus-outline: #0B3D63; --focus-outline-width: 2px; --focus-outline-offset: 3px; --focus-ring: 0 0 0 4px rgba(11,61,99,.14); /* ============================================================ TYPE — ONE FAMILY: GEOLOGICA Headings, body, labels, numbers, print, both materials, both languages (it carries Greek). Numbers use Geologica's own tabular figures (font-variant-numeric: tabular-nums), so no second face is needed to make columns line up. ============================================================ */ --font-primary: "Geologica", "Helvetica Neue", Arial, system-ui, sans-serif; --font-family-sans: var(--font-primary); --font-office: "Geologica", "Aptos", "Calibri", sans-serif; /* Word, Excel */ --font-statutory: "Times New Roman", Times, serif; /* Greek statutory documents only */ --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code samples only */ --numeric-data: tabular-nums; /* money, dates, IDs, counts */ /* Weights. Light 300 is for leads on screen, 17px and up. Body copy is Regular 400, as on the website, and so is print body. Medium 500 is for navigation links only. */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Website roles, taken from the boards: mobile (360) → desktop (1440) */ --text-statement: clamp(2.5rem, 1.583rem + 4.074vw, 5.25rem); /* 40 → 84: statement band, closing CTA */ --text-display: clamp(2.75rem, 2.083rem + 2.963vw, 4.75rem); /* 44 → 76: the hero on paper */ --text-h1: clamp(2.5rem, 2rem + 2.222vw, 4rem); /* 40 → 64: the hero on glass, page titles */ --text-h2: clamp(2.25rem, 1.667rem + 2.593vw, 4rem); /* 36 → 64: section titles */ --text-h3: clamp(1.25rem, 0.917rem + 1.481vw, 2.25rem); /* 20 → 36: feature titles */ --text-h4: clamp(1.5rem, 1.375rem + 0.556vw, 1.875rem); /* 24 → 30: card titles (services) */ --text-lead-hero: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20: the hero lead, Light */ --text-lead: clamp(1.0625rem, 1.021rem + 0.185vw, 1.1875rem); /* 17 → 19: section leads, Light */ --text-body-lg: 1.125rem; /* 18: feature body */ --text-body-web: clamp(0.9375rem, 0.917rem + 0.093vw, 1rem); /* 15 → 16: card body */ --text-nav: 0.9375rem; /* 15: navigation, Medium */ --text-kicker: 0.9375rem; /* 15: the line under a card title, SemiBold, Deep */ /* Product scale (extension): app screens run on these */ --text-xs: 0.75rem; /* 12: badges, meta */ --text-sm: 0.8125rem; /* 13: table cells, captions */ --text-base: 0.9375rem; /* 15: app body */ --text-md: 1.0625rem; /* 17: panel titles */ --text-lg: 1.1875rem; /* 19 */ --text-xl: 1.25rem; /* 20: card titles in product */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.75rem; /* 28: KPI values */ --text-4xl: 2.25rem; /* 36 */ --line-height-display: 0.98; /* statement, display, hero */ --line-height-title: 1; /* section and card titles */ --line-height-tight: 1.08; /* feature titles */ --line-height-heading: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* leads and card body */ --line-height-loose: 1.65; /* feature body, statement body */ /* The bigger the type, the tighter the tracking, as the website sets it. Body never carries tracking. There are no all-caps labels. */ --tracking-statement: -0.04em; /* 84 */ --tracking-display: -0.035em; /* 64–76 */ --tracking-h3: -0.03em; /* 36 */ --tracking-h4: -0.025em; /* 28–30 */ --tracking-tight: -0.02em; /* 20–24 */ --tracking-logo: -0.015em; /* the name in the logo */ /* Print type, in points */ --pt-body: 10pt; --pt-small: 8pt; --pt-caption: 7pt; --pt-h3: 12pt; --pt-h2: 16pt; --pt-h1: 24pt; --pt-display: 34pt; --pt-min: 6.5pt; /* nothing prints smaller */ /* ============================================================ SPACING — nine rungs, 4pt base (names match the LEAP system, so components port between the two codebases unchanged) ============================================================ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px; --sp-9: 72px; /* Section rhythm on marketing pages, from the website boards */ --section-y: 120px; /* sections */ --band-y: 128px; /* the statement band and the closing CTA */ --section-y-mobile: 56px; --band-y-mobile: 64px; --section-gap: 56px; /* section title to content */ --gutter: 24px; --page-x: 80px; --page-x-mobile: 24px; --header-x-mobile: 20px; /* Marketing cards, from the website */ --card-pad-y: 32px; --card-pad-x: 28px; /* ============================================================ DENSITY — product screens tune tightness here, never per-component. Touch targets never shrink for density. ============================================================ */ --pad-card-y: 16px; --pad-card-x: 20px; --pad-row: 10px; --pad-card-gap: 12px; /* ============================================================ RADIUS — soft corners Buttons, chips, badges, search: pills. Inputs 10 on paper. Cards 16, panels 24. ============================================================ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --radius-full: 50%; --radius-button: var(--radius-pill); --radius-input: var(--radius-md); --radius-card: var(--radius-lg); --radius-panel: var(--radius-xl); /* ============================================================ ELEVATION — paper Resting cards carry a hairline and no shadow. Shadow is for things that float: menus, sheets, modals, toasts. ============================================================ */ --card-border: 1px solid var(--border-default); --card-shadow: none; --card-shadow-hover: 0 1px 2px rgba(38,48,58,.05), 0 10px 24px -16px rgba(38,48,58,.28); --shadow-overlay: 0 12px 32px -12px rgba(6,26,45,.28), 0 32px 64px -32px rgba(6,26,45,.30); --modal-backdrop: rgba(6,26,45,.48); /* ============================================================ CONTROL SIZES ============================================================ */ --button-height-sm: 38px; --button-height-md: 46px; --button-height-lg: 56px; --input-height: 46px; --tap-min: 44px; /* ============================================================ ICONS — Lucide, stroke 1.6 (the mark's own stroke weight) ============================================================ */ --icon-stroke: 1.6; --icon-size-xs: 14px; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-size-xl: 32px; /* ============================================================ LAYOUT ============================================================ */ --site-max: 1280px; --shell-max: 1440px; --content-max: 680px; --header-height: 88px; --header-height-mobile: 64px; --header-height-app: 56px; --sidebar-width: 248px; --grid-columns: 12; /* ============================================================ MOTION — springy, never linear Presses scale on a spring. Hover lifts are 1–3px on paper; buttons do not lift. ============================================================ */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: .16s; --dur-base: .24s; --dur-slow: .48s; --press-scale: .97; /* ============================================================ GLASS MATERIALS Defined here so both materials can read them; they only appear on glass. One light source, top left: rims catch it top-left and bottom-right, shadows fall down and to the right. Blur 2 to 12, never heavier, so the backdrop stays readable. ============================================================ */ --glass-ground: #061A2D; /* Night */ --glass-ground-2: #0B2438; --glass-ground-3: #0B2A42; --glass-rim: linear-gradient(to bottom right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.45) 10%, rgba(255,255,255,.12) 26%, rgba(255,255,255,.05) 50%, rgba(255,255,255,.14) 74%, rgba(255,255,255,.42) 90%, rgba(255,255,255,.72) 100%); --glass-clear-bg: rgba(255,255,255,.02); --glass-clear-filter: blur(2px) saturate(180%) brightness(1.12); --glass-regular-bg: rgba(255,255,255,.045); --glass-regular-filter: blur(10px) saturate(190%) brightness(1.08); --glass-panel-filter: blur(12px) saturate(190%) brightness(1.08); --glass-header-filter: blur(8px) saturate(190%) brightness(1.1); --glass-control-bg: rgba(255,255,255,.07); /* clear buttons */ --glass-control-filter: blur(5px) saturate(190%) brightness(1.12); --glass-pill-bg: rgba(255,255,255,.08); --glass-tinted-bg: rgba(127,211,234,.16); --glass-tinted-filter: blur(10px) saturate(190%) brightness(1.05); --glass-bright-bg: linear-gradient(to bottom right, rgba(255,255,255,.97), rgba(232,244,249,.88)); --glass-bright-ink: #061A2D; --glass-raised: inset 1.5px 1.5px 2px -1px rgba(255,255,255,.22), inset -1.5px -1.5px 2px -1px rgba(255,255,255,.12), inset -12px -16px 26px -22px rgba(127,211,234,.38), 8px 16px 36px rgba(0,0,0,.40), 2px 3px 8px rgba(0,0,0,.20); --glass-raised-sm: inset 1px 1px 1.5px -.5px rgba(255,255,255,.30), inset -1px -1px 1.5px -.5px rgba(255,255,255,.12), 4px 10px 22px rgba(0,0,0,.35), 1px 2px 5px rgba(0,0,0,.20); --glass-bright-shadow: inset 1.5px 1.5px 1px -.5px #FFFFFF, inset -2px -3px 5px -2px rgba(6,26,45,.22), inset 0 -10px 16px -12px rgba(47,122,156,.50), 5px 12px 26px rgba(0,0,0,.40), 1px 3px 6px rgba(0,0,0,.22); --glass-recessed-bg: rgba(3,14,26,.42); --glass-recessed: inset 4px 6px 14px rgba(0,0,0,.55), inset 1px 1px 0 rgba(0,0,0,.35), inset -1.5px -1.5px 0 rgba(255,255,255,.16); /* The glass backdrop: Night with two soft glows. The constellation is drawn over it per page (see ail-organisms.css .ail-backdrop). */ --glass-backdrop: radial-gradient(620px 620px at 80% 16%, rgba(47,122,156,.70), rgba(47,122,156,0) 70%), radial-gradient(620px 620px at 18% 74%, rgba(127,188,210,.35), rgba(127,188,210,0) 70%), #061A2D; /* ============================================================ PRINT & STATIONERY Screen tokens above are the master. These exist so print work resolves from the same file instead of someone eyeballing a hex in InDesign. CMYK values are for COATED stock and must be confirmed against a wet proof before a production run. Pantone is a NEAREST MATCH, not an exact one: approve it on a physical chip. Deep #0B3D63 C89 M38 Y0 K61 ≈ PANTONE 2955 C Graphite #26303A text prints K90 (single plate) Steel #56626D text prints K70 (single plate) Chalk #EFF1F1 C1 M0 Y0 K5 Line #D3D9DC K15 Depth 3 #3D8AAE C65 M21 Y0 K32 (Channel; the mark's route on paper) Depth 2 #7FBCD2 C40 M10 Y0 K18 (Reef; the mark's route on Deep) Depth 1 #BFE0EA C18 M4 Y0 K8 (Shallows) Marker #2F7A9C C70 M22 Y0 K39 Signal is a screen colour and never prints. Small text always prints on the black plate. The blue-grey cast of Graphite and Steel is a screen value. ============================================================ */ --print-deep: #0B3D63; --print-graphite: #26303A; --print-steel: #56626D; --print-line: #D3D9DC; --print-chalk: #EFF1F1; /* A4 geometry — letterhead, documents, proposals */ --page-a4-w: 210mm; --page-a4-h: 297mm; --page-margin-top: 24mm; --page-margin-side: 20mm; /* never less */ --page-margin-bot: 22mm; /* Business card — 85 × 55 mm, 3mm bleed, 4mm safe margin */ --card-w: 85mm; --card-h: 55mm; --card-bleed: 3mm; --card-safe: 4mm; /* Compliment slip — DL 210 × 99 mm. Envelope — DL 220 × 110 mm */ --slip-w: 210mm; --slip-h: 99mm; --dl-w: 220mm; --dl-h: 110mm; /* Logo sizing */ --logo-a4-standard: 56mm; /* horizontal lockup on A4 */ --logo-min-print: 35mm; /* horizontal lockup, minimum */ --logo-mark-min-print: 6mm; --logo-min-screen: 150px; --logo-small-print: 40mm; /* below this, the small build: lockup-h-small-* */ --logo-small-screen: 240px; --logo-mark-min-screen: 16px; --logo-clearspace-ratio: .5; /* half the mark's height, all sides */ } /* ============================================================ GLASS — same names, glass values. Put data-theme="glass" on or on any section. ============================================================ */ [data-theme="glass"] { --bg-layer-1: #061A2D; --bg-layer-2: #0B2438; --bg-layer-3: #0B2A42; --bg-layer-4: rgba(255,255,255,.045); /* read with a glass material */ --bg-app: var(--bg-layer-1); --bg-page: var(--bg-layer-1); --bg-panel: var(--bg-layer-3); --bg-surface: var(--bg-layer-4); --surface-sunk: rgba(3,14,26,.42); --bg-surface-hover: rgba(255,255,255,.07); --bg-surface-active: rgba(255,255,255,.10); --color-primary: #FFFFFF; /* primary actions become Bright glass */ --color-primary-hover: #FFFFFF; --color-primary-press: #E8F4F9; --color-primary-ink: #061A2D; --primary-subtle: rgba(127,211,234,.16); --primary-wash: rgba(127,211,234,.08); --text-primary: rgba(255,255,255,.95); /* 16.0:1 on Night */ --text-body: rgba(255,255,255,.78); /* the website's glass body copy. 11.0:1 */ --text-secondary: rgba(255,255,255,.78); /* 11.0:1 */ --text-muted: rgba(255,255,255,.62); /* 7.3:1 */ --text-disabled: rgba(255,255,255,.40); --text-inverse: #061A2D; --text-link: #7FD3EA; --border-subtle: rgba(255,255,255,.08); --border-default: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.22); --line-contour: rgba(255,255,255,.20); --color-success-light: rgba(46,125,91,.22); --color-warning-light: rgba(154,103,0,.24); --color-error-light: rgba(180,35,24,.24); --color-info-light: rgba(127,211,234,.18); --focus-outline: rgba(127,211,234,.85); --focus-outline-width: 3px; --focus-ring: 0 0 0 4px rgba(127,211,234,.18); --radius-input: 24px; --radius-card: 28px; --radius-panel: 32px; --card-pad-y: 28px; --card-pad-x: 28px; --card-border: 0; --card-shadow: var(--glass-raised); --card-shadow-hover: var(--glass-raised); --shadow-overlay: 10px 20px 44px rgba(0,0,0,.42), 2px 4px 10px rgba(0,0,0,.22); --modal-backdrop: rgba(3,14,26,.55); } /* ============================================================ PAPER INSIDE GLASS — a paper document shown on a glass page (a proposal preview, say) resets to paper values. The reverse never happens: glass does not go inside paper. ============================================================ */ [data-theme="paper"] { --bg-layer-1: #E4E8E9; --bg-layer-2: #EFF1F1; --bg-layer-3: #F7F8F8; --bg-layer-4: #FFFFFF; --bg-app: var(--bg-layer-1); --bg-page: var(--bg-layer-2); --bg-panel: var(--bg-layer-3); --bg-surface: var(--bg-layer-4); --surface-sunk: #DDE2E4; --bg-surface-hover: #F4F6F6; --bg-surface-active: #ECEFF0; --color-primary: #0B3D63; --color-primary-hover: #082F4D; --color-primary-press: #06253D; --color-primary-ink: #FFFFFF; --primary-subtle: rgba(11,61,99,.08); --primary-wash: rgba(11,61,99,.04); --text-primary: #26303A; --text-body: #56626D; --text-secondary: #56626D; --text-muted: #616C75; --text-disabled: #9AA5AD; --text-inverse: #FFFFFF; --text-link: #0B3D63; --border-subtle: #E1E6E8; --border-default: #D3D9DC; --border-strong: #B7C0C6; --line-contour: #9AA5AD; --color-success-light: rgba(46,125,91,.10); --color-warning-light: rgba(154,103,0,.10); --color-error-light: rgba(180,35,24,.08); --color-info-light: rgba(47,122,156,.10); --focus-outline: #0B3D63; --focus-outline-width: 2px; --focus-ring: 0 0 0 4px rgba(11,61,99,.14); --radius-input: 10px; --radius-card: 16px; --radius-panel: 24px; --card-pad-y: 32px; --card-pad-x: 28px; --card-border: 1px solid #D3D9DC; --card-shadow: none; --card-shadow-hover: 0 1px 2px rgba(38,48,58,.05), 0 10px 24px -16px rgba(38,48,58,.28); --shadow-overlay: 0 12px 32px -12px rgba(6,26,45,.28), 0 32px 64px -32px rgba(6,26,45,.30); color: var(--text-body); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; --press-scale: 1; } }