/* =========================================================== Clipwise Design System — Core Tokens colors + type + spacing + radii + shadows + motion =========================================================== */ /* ---------- Fonts ---------- Primary: Geist (UI + display) Mono: Geist Mono (timecodes, scores, keyboard keys) Both on Google Fonts. Self-host optional; see /fonts. ----------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* ============ COLOR — RAW PALETTE ============ */ /* Espresso — warm brown-black foundation. NOT pure black. */ --espresso-950: #0C0A09; /* page background */ --espresso-900: #141210; /* elevated surface */ --espresso-850: #1B1815; /* card surface */ --espresso-800: #24201C; /* input / hover surface */ --espresso-700: #2F2A25; /* border strong */ --espresso-600: #3D352F; /* border */ --espresso-500: #524840; /* subtle divider */ --espresso-400: #7A6E63; /* muted fg */ --espresso-300: #A89C8F; /* secondary fg */ --espresso-200: #D4CABE; /* tertiary fg */ --espresso-100: #EDE6DC; /* near-white warm */ --espresso-050: #F7F2EB; /* cream */ /* Lime — signature accent. The "virality" color. */ --lime-600: #A8E000; --lime-500: #C4F53A; --lime-400: #D4FF4F; /* PRIMARY BRAND ACCENT */ --lime-300: #E1FF7A; --lime-200: #ECFFA8; --lime-100: #F5FFD1; /* Amber — secondary accent (highlights, captions, warnings) */ --amber-500: #F5A524; --amber-400: #FFB84D; --amber-300: #FFCB77; /* Coral — tertiary accent (destructive, hot states) */ --coral-500: #FF5A4E; --coral-400: #FF7A70; /* Sky — informational (links, AI-badges, platform tags) */ --sky-500: #4FB8FF; --sky-400: #7BCAFF; /* Violet — rare accent (new features, special badges) */ --violet-500: #A68BFF; /* ============ SEMANTIC — BACKGROUND ============ */ --bg: var(--espresso-950); --bg-elevated: var(--espresso-900); --bg-card: var(--espresso-850); --bg-input: var(--espresso-800); --bg-hover: var(--espresso-800); --bg-pressed: var(--espresso-700); --bg-inverse: var(--espresso-050); /* Signature warm radial gradient used on hero / large surfaces */ --bg-radial-warm: radial-gradient(ellipse at 50% 0%, #3A2E24 0%, #1F1A16 45%, var(--espresso-950) 85%); /* ============ SEMANTIC — FOREGROUND ============ */ --fg: var(--espresso-050); /* body / primary text */ --fg-strong: #FFFFFF; /* headings / emphasis */ --fg-muted: var(--espresso-200); /* secondary */ --fg-subtle: var(--espresso-300); /* tertiary */ --fg-faint: var(--espresso-400); /* quaternary / captions */ --fg-inverse: var(--espresso-950); /* text on light bg */ /* ============ SEMANTIC — BORDER ============ */ --border-subtle: rgba(255, 242, 227, 0.06); --border: rgba(255, 242, 227, 0.10); --border-strong: rgba(255, 242, 227, 0.16); --border-focus: var(--lime-400); /* ============ SEMANTIC — STATE ============ */ --accent: var(--lime-400); --accent-hover: var(--lime-300); --accent-pressed: var(--lime-500); --accent-fg: var(--espresso-950); /* text ON lime */ --success: var(--lime-500); --warning: var(--amber-400); --danger: var(--coral-500); --info: var(--sky-400); /* Virality score tiers — used throughout the app */ --score-hot: var(--lime-400); /* 90+ */ --score-warm: var(--amber-400); /* 70–89 */ --score-cool: var(--espresso-300); /* <70 */ /* ============ TYPE ============ */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Geist', -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Fluid type scale — tuned for dense product + marketing use */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; --text-5xl: 52px; --text-6xl: 72px; --text-7xl: 96px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-base: 1.45; --leading-loose: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* eyebrows / small caps labels */ /* ============ SPACE ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ============ RADII ============ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ============ SHADOWS ============ Layered: product UI uses soft ambient + crisp border. The "warm" variants pick up bg tone so cards feel embedded. */ --shadow-xs: 0 1px 0 0 rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(255, 242, 227, 0.02) inset; --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 0 0 rgba(255, 242, 227, 0.03) inset; --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 1px 0 0 rgba(255, 242, 227, 0.04) inset; --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.65), 0 1px 0 0 rgba(255, 242, 227, 0.05) inset; --shadow-glow-lime: 0 0 0 1px rgba(212, 255, 79, 0.35), 0 0 24px rgba(212, 255, 79, 0.25); /* ============ MOTION ============ */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; /* ============ LAYOUT ============ */ --container-max: 1200px; --container-wide: 1360px; --sidebar-w: 248px; --topbar-h: 56px; } /* ============ SEMANTIC ELEMENT STYLES ============ Apply these as helper classes on product + marketing pages. */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; /* Geist alts */ } .cw-display { font-family: var(--font-display); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-strong); } .cw-h1 { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; color: var(--fg-strong); } .cw-h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); font-weight: 600; color: var(--fg-strong); } .cw-h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug); font-weight: 600; color: var(--fg-strong); } .cw-body { font-size: var(--text-base); line-height: var(--leading-base); color: var(--fg); } .cw-body-lg { font-size: var(--text-lg); line-height: var(--leading-base); color: var(--fg-muted); } .cw-caption { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg-subtle); } .cw-eyebrow { font-size: var(--text-xs); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-faint); font-weight: 500; } .cw-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; font-size: var(--text-sm); letter-spacing: -0.01em; } .cw-score { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; font-weight: 600; font-size: var(--text-md); color: var(--score-hot); } ::selection { background: var(--lime-400); color: var(--espresso-950); }