/** * Outlex Design Tokens — Canonical * * Single source of truth for cross-product brand identity. * Consumed by: mvp2 (product), outlex-corporate-website, future apps. * * Structure: * - Section 1: Brand colors (hex form, semantic names) * - Section 2: HSL component form (for hsl(var(--x) / opacity) tricks) * - Section 3: Typography * - Section 4: Radii * - Section 5: Shadows * - Section 6: Motion (easing) * - Section 7: Focus rings * * Updates: PR-reviewed in outlex-design repo. See AUDIT.md for the V7-token * classification (which mvp2 tokens are brand-level vs product-internal). */ :root { /* ============================================ 1. BRAND COLORS (canonical hex) ============================================ */ /* Surfaces — Sunsama "Calm Focus" warm palette */ --outlex-bg: #FAF8F5; /* Warm cream — page background */ --outlex-bg-raised: #F5F2EE; /* Hover/raised surface */ --outlex-bg-hover: #F0EBE2; /* Interactive hover */ --outlex-card: #FFFFFF; /* Card surface */ --outlex-card-hover: #FAF7F2; /* Foreground — warm charcoal, not pure black */ --outlex-fg: #2D2A26; /* Body text, primary headings */ --outlex-fg-ink: #231F20; /* Logo-ink, CTA-on-sage WCAG 4.5:1 */ --outlex-fg-secondary: #4A4641; --outlex-fg-muted: #6B6460; --outlex-meta: #8A847C; /* Timestamps, secondary info */ --outlex-meta-light: #ABA59D; /* Tertiary meta */ /* Borders */ --outlex-border: #E8E4DF; --outlex-border-hover: #D5D0CA; /* Accent palette */ --outlex-primary: #6B7EC2; /* Warm blue — info / interactive / links */ --outlex-primary-text: #5A6BA8; /* WCAG AA-safe (5.1:1+) for small text */ --outlex-sage: #6B8F71; /* Sage — success / done / Lexi action */ --outlex-sage-deep: #5F8165; --outlex-sage-text: #4A7050; /* WCAG AA on white */ --outlex-amber: #C49432; /* Amber — warning / pending / focus */ --outlex-amber-text: #7D5C0A; --outlex-terra: #C27256; /* Terracotta — risk / urgent */ --outlex-terra-text: #8B3D20; --outlex-danger: #811D1D; /* True danger / destructive (AAA on white, ~9.87:1) */ --outlex-danger-text: #811D1D; /* Note: V7 product surfaces use a brighter `--v7-danger: #B03A2E` for chip/badge fills. That value stays in mvp2's V7-scoped CSS files (product-internal, not brand-canonical). */ /* Brand mark gradient (logo SVG ONLY — never elsewhere) */ --outlex-mark-blue: #306AEF; --outlex-mark-teal: #54D6A4; /* ============================================ 2. HSL COMPONENT FORM mvp2 uses hsl(var(--x) / 0.5) opacity tricks. These mirror Section 1 in HSL-component form. ============================================ */ --outlex-bg-hsl: 30 20% 97%; /* #FAF8F5 */ --outlex-fg-hsl: 28 12% 16%; /* #2D2A26 */ --outlex-primary-hsl: 226 43% 59%; /* #6B7EC2 */ --outlex-sage-hsl: 125 15% 49%; /* #6B8F71 */ --outlex-amber-hsl: 42 52% 49%; /* #C49432 */ --outlex-terra-hsl: 14 48% 55%; /* #C27256 */ --outlex-danger-hsl: 0 63% 31%; /* #811D1D — matches mvp2 --danger (no-op compat alias) */ --outlex-border-hsl: 30 15% 91%; /* #E8E4DF */ --outlex-meta-hsl: 28 8% 43%; /* ============================================ 3. TYPOGRAPHY ============================================ */ --outlex-font-heading: 'Fraunces', Georgia, serif; --outlex-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --outlex-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Weight ceilings (HARD STOPS — see brand.md) */ --outlex-weight-fraunces-max: 500; /* Never above medium */ --outlex-weight-inter-max: 600; /* Never bold; 700+ FORBIDDEN */ /* Static type scale (Linear/Raycast refined) */ --outlex-text-hero: 36px; --outlex-text-display-lg: 28px; --outlex-text-display: 20px; --outlex-text-title: 16px; --outlex-text-section: 14px; --outlex-text-item: 13px; --outlex-text-body: 15px; --outlex-text-meta: 12px; --outlex-text-chip: 11px; --outlex-text-2xs: 10px; /* Fluid type (clamp-based, PRO-631) */ --outlex-text-fluid-hero: clamp(1.5rem, 1rem + 2.5vw, 2rem); --outlex-text-fluid-display-lg: clamp(1.25rem, 1rem + 1.25vw, 1.5rem); --outlex-text-fluid-display: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --outlex-text-fluid-body: clamp(0.875rem, 0.8125rem + 0.3125vw, 1rem); --outlex-text-fluid-meta: clamp(0.75rem, 0.6875rem + 0.3125vw, 0.8125rem); /* ============================================ 4. RADII ============================================ */ --outlex-radius-xs: 4px; --outlex-radius-sm: 6px; --outlex-radius-md: 8px; --outlex-radius-lg: 12px; --outlex-radius-xl: 16px; /* Card default */ --outlex-radius-2xl: 28px; /* Hero chat input */ --outlex-radius-pill: 9999px; /* Chips */ /* ============================================ 5. SHADOWS — Brand Book p.9 warm base Always rgba(40, 35, 30, α) — never grey, never black. ============================================ */ --outlex-shadow-warm-base: 40, 35, 30; --outlex-shadow-1: 0 1px 3px rgba(120, 80, 20, 0.06), 0 1px 2px rgba(40, 35, 30, 0.04); --outlex-shadow-2: 0 4px 10px rgba(120, 80, 20, 0.08), 0 2px 4px rgba(40, 35, 30, 0.05); --outlex-shadow-3: 0 8px 20px rgba(40, 35, 30, 0.14), 0 0 1px rgba(40, 35, 30, 0.10); --outlex-shadow-4: 0 16px 40px rgba(40, 35, 30, 0.18), 0 0 2px rgba(40, 35, 30, 0.10); --outlex-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* ============================================ 6. MOTION ============================================ */ --outlex-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Calm out */ --outlex-ease-quick: cubic-bezier(0.4, 0, 0.2, 1); /* Standard out */ --outlex-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* Toast in */ --outlex-duration-hover: 140ms; --outlex-duration-press: 110ms; --outlex-duration-calm: 300ms; /* ============================================ 7. FOCUS RINGS — V7 amber trust ring WCAG 2.4.11 visible focus even with shadows suppressed. ============================================ */ --outlex-focus-ring-1: 0 0 0 1.5px rgba(196, 148, 50, 0.35); --outlex-focus-ring-2: 0 0 0 4px rgba(196, 148, 50, 0.12); --outlex-focus-border: rgba(196, 148, 50, 0.55); --outlex-sage-glow: 0 0 0 3px rgba(107, 143, 113, 0.28); } /* ============================================ COMPATIBILITY ALIASES mvp2 reads --background, --foreground, --primary, etc. (HSL form). Set these from the canonical Section 2 values so existing `hsl(var(--primary) / 0.5)` calls keep working without rewrites. ============================================ */ :root { --background: var(--outlex-bg-hsl); --foreground: var(--outlex-fg-hsl); --primary: var(--outlex-primary-hsl); --accent-sage: var(--outlex-sage-hsl); --accent-amber: var(--outlex-amber-hsl); --accent-terracotta: var(--outlex-terra-hsl); --danger: var(--outlex-danger-hsl); --border: var(--outlex-border-hsl); --muted-foreground: var(--outlex-meta-hsl); /* Brand mark gradient — used by logo SVG only */ --mark-gradient-blue: var(--outlex-mark-blue); --mark-gradient-teal: var(--outlex-mark-teal); }