/* ============================================================ Wayvr — Colors & Type ------------------------------------------------------------ Source of truth for the Wayvr brand. Import this in any prototype, slide, or production stylesheet: ============================================================ */ /* --- Web fonts ---------------------------------------------- */ /* Wordmark/UI: Sora SemiBold matches the brand wordmark per the design team. Sora is a geometric, rounded sans on Google Fonts with excellent weight coverage. Mono: JetBrains Mono (codeblocks, IDs, tokens). */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------------------------------------------------------- BRAND PALETTE — exact values from the brand board ---------------------------------------------------------- */ --wv-midnight-navy: #091540; /* primary text / dark surfaces */ --wv-cloud-white: #F7F9FC; /* app canvas / soft surface */ --wv-soft-gray: #94A3B8; /* muted text / borders */ --wv-success-green: #22C55E; /* success / signed / paid */ --wv-electric-indigo: #6C4CF5; /* gradient start, primary CTA */ --wv-bright-blue: #2F80FF; /* gradient middle, links */ --wv-aqua-mint: #19D3B4; /* gradient end, accents */ /* Brand gradient (purple → blue → mint) */ --wv-gradient: linear-gradient(90deg, var(--wv-electric-indigo) 0%, var(--wv-bright-blue) 50%, var(--wv-aqua-mint) 100%); --wv-gradient-diag: linear-gradient(135deg, var(--wv-electric-indigo) 0%, var(--wv-bright-blue) 50%, var(--wv-aqua-mint) 100%); /* ---------------------------------------------------------- NEUTRAL SCALE — derived from Midnight Navy (oklch-tuned to match the brand's cool, slightly-blue greys) ---------------------------------------------------------- */ --wv-ink-900: #091540; /* = Midnight Navy */ --wv-ink-800: #1A2452; --wv-ink-700: #2C3866; --wv-ink-600: #4B5780; /* secondary body text */ --wv-ink-500: #6B7796; --wv-ink-400: #94A3B8; /* = Soft Gray (muted) */ --wv-ink-300: #C2CCDB; /* hairlines/borders */ --wv-ink-200: #E2E8F0; /* subtle borders / dividers */ --wv-ink-100: #EEF1F6; /* hover-fill on light bg */ --wv-ink-050: #F7F9FC; /* = Cloud White (app bg) */ --wv-ink-000: #FFFFFF; /* card surface */ /* ---------------------------------------------------------- SEMANTIC COLORS — feedback states ---------------------------------------------------------- */ --wv-success: #22C55E; --wv-success-soft: #DCFCE7; --wv-success-ink: #15803D; --wv-warning: #F59E0B; --wv-warning-soft: #FEF3C7; --wv-warning-ink: #92400E; --wv-danger: #EF4444; --wv-danger-soft: #FEE2E2; --wv-danger-ink: #B91C1C; --wv-info: #2F80FF; /* = Bright Blue */ --wv-info-soft: #DBEAFE; --wv-info-ink: #1D4ED8; /* ---------------------------------------------------------- SEMANTIC ROLES — what to reach for in code ---------------------------------------------------------- */ --wv-bg: var(--wv-ink-050); /* page background */ --wv-bg-elevated: var(--wv-ink-000); /* card / panel */ --wv-bg-dark: var(--wv-ink-900); /* nav / dark hero */ --wv-bg-hover: var(--wv-ink-100); /* row hover */ --wv-bg-active: var(--wv-ink-200); /* pressed row */ --wv-fg: var(--wv-ink-900); /* primary text */ --wv-fg-muted: var(--wv-ink-600); /* secondary text */ --wv-fg-subtle: var(--wv-ink-400); /* placeholder, meta */ --wv-fg-on-dark: #FFFFFF; --wv-fg-on-brand: #FFFFFF; --wv-border: var(--wv-ink-200); --wv-border-strong: var(--wv-ink-300); --wv-border-focus: var(--wv-bright-blue); --wv-link: var(--wv-bright-blue); --wv-link-hover: #1f5fcc; --wv-brand: var(--wv-electric-indigo); --wv-brand-soft: #EEEAFE; /* indigo @ 8% */ /* ---------------------------------------------------------- RADII — soft, friendly, never sharp ---------------------------------------------------------- */ --wv-radius-xs: 4px; --wv-radius-sm: 6px; --wv-radius-md: 10px; /* default card, input */ --wv-radius-lg: 14px; /* prominent card */ --wv-radius-xl: 20px; /* hero card / modal */ --wv-radius-pill: 999px; /* badges, pills */ /* ---------------------------------------------------------- SHADOWS — cool, slightly blue-tinted ---------------------------------------------------------- */ --wv-shadow-xs: 0 1px 2px rgba(9, 21, 64, 0.06); --wv-shadow-sm: 0 1px 4px rgba(9, 21, 64, 0.08); --wv-shadow-md: 0 4px 12px rgba(9, 21, 64, 0.08); --wv-shadow-lg: 0 10px 30px rgba(9, 21, 64, 0.12); --wv-shadow-xl: 0 24px 60px rgba(9, 21, 64, 0.18); --wv-shadow-focus: 0 0 0 3px rgba(47, 128, 255, 0.25); --wv-shadow-brand: 0 8px 24px rgba(108, 76, 245, 0.30); /* ---------------------------------------------------------- SPACING — 4px base, generous breathing room ---------------------------------------------------------- */ --wv-space-1: 4px; --wv-space-2: 8px; --wv-space-3: 12px; --wv-space-4: 16px; --wv-space-5: 20px; --wv-space-6: 24px; --wv-space-8: 32px; --wv-space-10: 40px; --wv-space-12: 48px; --wv-space-16: 64px; --wv-space-20: 80px; /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --wv-ease: cubic-bezier(.22, .61, .36, 1); /* gentle ease-out */ --wv-ease-snap: cubic-bezier(.34, 1.56, .64, 1); /* tiny bounce for confirmations */ --wv-dur-fast: 120ms; --wv-dur-base: 180ms; --wv-dur-slow: 320ms; /* ---------------------------------------------------------- TYPE — families ---------------------------------------------------------- */ --wv-font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --wv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --wv-font-display: 'Sora', system-ui, sans-serif; /* same family, heavier weights */ /* ---------------------------------------------------------- TYPE — semantic role tokens ---------------------------------------------------------- */ --wv-text-display: 800 56px/1.05 var(--wv-font-display); /* marketing hero only */ --wv-text-h1: 700 32px/1.15 var(--wv-font-sans); --wv-text-h2: 700 24px/1.2 var(--wv-font-sans); --wv-text-h3: 600 18px/1.3 var(--wv-font-sans); --wv-text-body: 400 16px/1.55 var(--wv-font-sans); --wv-text-body-lg: 400 18px/1.55 var(--wv-font-sans); --wv-text-small: 400 14px/1.45 var(--wv-font-sans); --wv-text-meta: 500 12px/1.4 var(--wv-font-sans); --wv-text-eyebrow: 700 12px/1.2 var(--wv-font-sans); /* uppercase, tracked */ --wv-text-button: 600 15px/1.0 var(--wv-font-sans); --wv-text-mono: 500 13px/1.5 var(--wv-font-mono); } /* ------------------------------------------------------------ BASE STYLES — apply on the body of any prototype ------------------------------------------------------------ */ html, body { font: var(--wv-text-body); color: var(--wv-fg); background: var(--wv-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: var(--wv-text-h1); color: var(--wv-fg); letter-spacing: -0.01em; } h2 { font: var(--wv-text-h2); color: var(--wv-fg); letter-spacing: -0.01em; } h3 { font: var(--wv-text-h3); color: var(--wv-fg); } p { font: var(--wv-text-body); color: var(--wv-fg); } small { font: var(--wv-text-small); color: var(--wv-fg-muted); } code, kbd, pre { font: var(--wv-text-mono); } a { color: var(--wv-link); text-decoration: none; transition: color var(--wv-dur-fast) var(--wv-ease); } a:hover { color: var(--wv-link-hover); text-decoration: underline; } /* ------------------------------------------------------------ UTILITY CLASSES ------------------------------------------------------------ */ .wv-eyebrow { font: var(--wv-text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wv-fg-muted); } .wv-gradient-text { background: var(--wv-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .wv-gradient-fill { background: var(--wv-gradient); color: var(--wv-fg-on-brand); } .wv-gradient-fill-diag { background: var(--wv-gradient-diag); color: var(--wv-fg-on-brand); }