/* ===================================================================== visibility.aitravelstudio.com — Design Tokens (Visual Blueprint, Gate 1) BLI-136 · Phase 1 · AI Travel Studio --------------------------------------------------------------------- STATUS: DRAFT — issued at the WIREFRAME GATE because OQ-12 must be settled here (it blocks T8). Refined and re-issued at the DESIGN GATE. Not yet approved. PROVENANCE: every colour below is read from documents/brand-identities/ai-travel-studio.json (marketing tokens read verbatim from live aitravelstudio.com CSS custom properties, 2026-07-27) or from the TSD's already-corrected semantic set (§7 T8). NOTHING HERE IS INVENTED. OQ-12 RULING (recorded here, pending Ed/Ryan confirmation at Gate 1): -------------------------------------------------------------------- MARKETING-CANONICAL, WITH AN INSTRUMENT REGISTER. Why. This subdomain's first job is top-of-funnel recognition and desire (PRD §2) — it is a marketing surface. Its second job is to render a credible diagnostic. Those two jobs are resolved by ONE token system, not two: * TYPE, CANVAS, ACTION COLOUR, RHYTHM and HERO come from the MARKETING system. The brand file states plainly that it "treats MARKETING as canonical and records PRODUCT as observed." * The PRODUCT system contributes DATA DENSITY, SEMANTIC STATUS COLOUR and FORM ERGONOMICS only — expressed through the --vis-ins-* "instrument" scale below. Three reasons the product system was NOT adopted wholesale: 1. It is undocumented and accidental — a system-ui default stack with no display face, not a designed choice. 2. It carries the four WCAG failures FR-12/AC-12 forbid reproducing, and its action colour #38B2AC is a shipping defect (2.58:1). 3. Adopting it would make the NEW surface look like the OLD tool at the exact moment the value proposition is "this is different." D-1 separated the streams deliberately. The honest counter-argument, recorded rather than buried: a visitor who has seen audit.aitravelstudio.com will find the new results screen visually discontinuous with it. That is accepted. Coexistence (OQ-6) is not continuity, and the brand file's own recommendation is that the LIVE tool converges toward these marketing tokens — not the reverse. NEVER USED HERE (the four known live failures, FR-12/AC-12): .badge--yellow #EAB308 on #FEF9C3 ~1.8:1 .badge--green ~3.0:1 .badge--red ~2.9:1 .dimension-bar__meta #94A3B8 on #FFF ~2.6:1 Plus the product action colour #38B2AC (2.58:1 with white). ===================================================================== */ :root { /* ----------------------------------------------------------------- 1. INK — text. All ratios stated against Cream #FDFBF7. ----------------------------------------------------------------- */ --vis-ink: #1A1A2E; /* 16.50:1 AAA — headings, primary body */ --vis-ink-light: #3D3D5C; /* 10.06:1 AAA — secondary body */ --vis-ink-muted: #6B6B8A; /* 4.96:1 AA — captions, eyebrows. AA floor: do not go lighter */ /* ----------------------------------------------------------------- 2. ACTION — Studio Teal. The single action colour. ----------------------------------------------------------------- */ --vis-teal: #007089; /* white on it = 5.71:1 AA — primary button fill, links */ --vis-teal-deep: #005A6E; /* white on it = 7.81:1 AAA — hover / active / focus ring */ --vis-teal-light: #0092AA; /* 3.69:1 — LARGE TEXT 24px+, ICONS, BORDERS ONLY */ --vis-teal-pale: #CAF8FF; /* tint fill only */ /* ----------------------------------------------------------------- 3. ACCENT — Signal Orange. FILL ONLY, never a text colour. ----------------------------------------------------------------- */ --vis-orange: #F47E20; /* FILL ONLY. Ink on it = 7.5:1 — the correct pairing */ --vis-orange-deep: #A85510; /* the orange WORD colour, 4.9:1 on cream */ --vis-orange-pale: #FEF5EC; /* tint fill */ /* ----------------------------------------------------------------- 4. CANVAS & STRUCTURE ----------------------------------------------------------------- */ --vis-cream: #FDFBF7; /* page canvas. NEVER pure white for the page */ --vis-sand: #F5F0E8; /* alternating band, unfilled rail track */ --vis-white: #FFFFFF; /* card / instrument surface ONLY */ --vis-border: #E8E4DC; /* 1px hairline — borders over shadows */ --vis-border-strong: #D6D0C4; /* input borders, rail segment dividers */ /* ----------------------------------------------------------------- 5. INSTRUMENT REGISTER — the product system's only contribution. Used INSIDE data surfaces (score rail, dimension rows, badges). Values are the TSD's already-corrected set (§7 T8), NOT the live stylesheet's. ----------------------------------------------------------------- */ --vis-ins-meta: #64748B; /* 4.76:1 on white / 4.60:1 on cream — data captions. Replaces the failing #94A3B8 (2.6:1). */ --vis-ins-good-ink: #14532D; /* on --vis-ins-good-bg ≈ 10.9:1 */ --vis-ins-good-bg: #DCFCE7; --vis-ins-warn-ink: #854D0E; /* on --vis-ins-warn-bg = 6.4:1 */ --vis-ins-warn-bg: #FEF9C3; --vis-ins-bad-ink: #991B1B; /* on --vis-ins-bad-bg ≈ 7.4:1 */ --vis-ins-bad-bg: #FEE2E2; /* Readiness bands — read from the API's readinessStatus, NEVER re-implemented client-side (TSD §3.3: thresholds already exist twice). */ --vis-band-dominant-ink: var(--vis-ins-good-ink); --vis-band-dominant-bg: var(--vis-ins-good-bg); --vis-band-strong-ink: var(--vis-ins-good-ink); --vis-band-strong-bg: var(--vis-ins-good-bg); --vis-band-partial-ink: var(--vis-ins-warn-ink); --vis-band-partial-bg: var(--vis-ins-warn-bg); --vis-band-none-ink: var(--vis-ins-bad-ink); --vis-band-none-bg: var(--vis-ins-bad-bg); /* ----------------------------------------------------------------- 6. THE SCORE RAIL — the §3.3 answer. See copy-ledger.html. One currency: points out of 100. The rail is 100 units wide, split into five stretches sized by WEIGHT. Each stretch fills to its own achievement. Total filled length IS the score. ----------------------------------------------------------------- */ /* ⚠ IMPLEMENTATION CONSTRAINT — found by measuring the rendered wireframe. The segment dividers MUST NOT consume fill area. If each of the five stretches carries its own 1px right border, the borders eat into the fillable width and the rail renders ~62% for a 63.0 score — it silently under-reports by about a point at every width. The rail's whole claim is "the filled length IS the score," so a 1-point rendering error is not cosmetic; it is the mark failing to be true. Draw dividers as `box-shadow: inset -1px 0 0 var(--vis-rail-divider)` (or as absolutely-positioned overlay ticks) so they paint OVER the track without reducing it. T8 acceptance: measured filled width / track width must equal totalScore/100 within 0.5%. */ --vis-rail-fill: var(--vis-teal); /* earned points */ --vis-rail-track: var(--vis-sand); /* points available, not earned */ --vis-rail-divider: var(--vis-border-strong); --vis-rail-focus: var(--vis-orange); /* FILL of the one dimension flagged as the biggest opportunity */ --vis-rail-h: 14px; --vis-rail-h-lg: 18px; --vis-rail-radius: 3px; /* Weight stretches — from TSD §3.3, read from the live scoring config. shared-types/src/scoring.ts:275-281. MUST SUM TO 100. */ --vis-weight-s: 20; --vis-weight-p: 25; --vis-weight-a: 20; --vis-weight-r: 20; --vis-weight-k: 15; /* ----------------------------------------------------------------- 7. TYPE ----------------------------------------------------------------- */ --vis-font-display: 'Playfair Display', Georgia, serif; --vis-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Display — Playfair. NEVER above 600. Negative tracking mandatory >40px. */ --vis-h1: clamp(32px, 5vw, 56px); --vis-h1-track: -0.025em; --vis-h1-lh: 1.12; --vis-h2: clamp(26px, 3.4vw, 40px); --vis-h2-track: -0.02em; --vis-h2-lh: 1.18; --vis-h3: clamp(20px, 2.2vw, 26px); --vis-h3-track: -0.01em; --vis-h3-lh: 1.25; /* Body — Source Sans 3. Line-height 1.7, not 1.5 — the airiness is the brand. */ --vis-body-lg: 19px; --vis-body: 17px; --vis-body-sm: 15px; --vis-caption: 13px; --vis-body-lh: 1.7; --vis-tight-lh: 1.45; /* Data — tabular numerals, always. */ --vis-num-score: clamp(56px, 9vw, 88px); /* the /100 score */ --vis-num-dim: 22px; /* per-dimension % */ --vis-num-pts: 15px; /* per-dimension points */ --vis-w-regular: 400; --vis-w-medium: 500; /* Playfair ceiling for large display */ --vis-w-semibold: 600; /* Playfair absolute ceiling; Source Sans UI weight */ --vis-w-bold: 700; /* Source Sans only — NEVER Playfair */ /* ----------------------------------------------------------------- 8. SPACE — 8px base. The vertical rhythm is load-bearing. ----------------------------------------------------------------- */ --vis-s1: 4px; --vis-s2: 8px; --vis-s3: 12px; --vis-s4: 16px; --vis-s5: 24px; --vis-s6: 32px; --vis-s7: 48px; --vis-s8: 64px; --vis-s9: 96px; --vis-s10: 140px; --vis-section-y: var(--vis-s9); /* mobile section rhythm */ --vis-section-y-lg: var(--vis-s10); /* desktop section rhythm */ --vis-container: 1200px; --vis-text-col: 680px; /* max measure for prose */ --vis-gutter: 20px; --vis-gutter-lg: 40px; /* ----------------------------------------------------------------- 9. COMPONENTS ----------------------------------------------------------------- */ --vis-radius: 8px; /* the ONE token both systems already agree on */ --vis-radius-sm: 6px; --vis-radius-pill: 999px; --vis-hairline: 1px solid var(--vis-border); --vis-elevation: 0 2px 8px rgba(26, 26, 46, 0.06); /* maximum. Borders over shadows. */ --vis-btn-pad: 16px 32px; --vis-btn-size: 16px; --vis-btn-weight: var(--vis-w-semibold); --vis-btn-case: none; /* SENTENCE CASE. Uppercase CTAs are TAT's signature, not AITS's. */ --vis-input-h: 52px; /* >=44px touch target */ --vis-input-pad: 14px 16px; --vis-tap-min: 44px; /* Focus — visible, never removed. 3:1 against both cream and white. */ --vis-focus-ring: 3px solid var(--vis-teal-deep); --vis-focus-offset: 2px; --vis-motion-fast: 120ms; --vis-motion: 200ms; --vis-ease: cubic-bezier(0.4, 0.0, 0.2, 1); } /* Motion is decoration. Respect the preference. */ @media (prefers-reduced-motion: reduce) { :root { --vis-motion-fast: 0ms; --vis-motion: 0ms; } } /* ===================================================================== VERIFIED CONTRAST PAIRS — every pair used in the blueprint. --------------------------------------------------------------------- #1A1A2E on #FDFBF7 .......... 16.50:1 AAA #3D3D5C on #FDFBF7 .......... 10.06:1 AAA #6B6B8A on #FDFBF7 .......... 4.96:1 AA #FFFFFF on #007089 .......... 5.71:1 AA (primary button) #FFFFFF on #005A6E .......... 7.81:1 AAA (button hover / focus ring) #1A1A2E on #F47E20 .......... 7.50:1 AAA (the correct orange pairing) #A85510 on #FDFBF7 .......... 4.90:1 AA (orange as a word) #64748B on #FFFFFF .......... 4.76:1 AA (instrument caption on card) #64748B on #FDFBF7 .......... 4.60:1 AA (instrument caption on canvas) #854D0E on #FEF9C3 .......... 6.40:1 AA (Partial badge) #14532D on #DCFCE7 .......... 10.90:1 AAA (Strong / Dominant badge) #991B1B on #FEE2E2 .......... 7.40:1 AAA (Not Eligible badge, error text) #007089 on #FDFBF7 .......... 5.20:1 AA (inline link on canvas) RESTRICTED — enforced by this file's comments, to be enforced again by wcag-audit at the design gate: #F47E20 fill only, never text (2.67:1 on white) #0092AA large text 24px+, icons, borders (3.69:1) #38B2AC NEVER — live shipping defect (2.58:1 with white) ===================================================================== */