/* ============================================================ CreatStrat Design System — Colors & Type (tokens) Ported verbatim from creatstrat-design-system/project/colors_and_type.css v1.0 — May 2026 Two strong colors. Quiet neutrals. Two faces: Inter (humans) + JetBrains Mono (machines). Instrument Serif appears as editorial accent ONLY. NOTE: fonts are loaded via Google Fonts in each page (not @import here) so the site works cleanly over file://. ============================================================ */ :root { /* ---------- COLOR TOKENS ---------- */ /* Primary — Violet (the strategist) */ --violet: #5B2BFF; /* Electric Violet — on Paper / light surfaces */ --violet-bright: #8A66FF; /* Required swap on Ink / dark surfaces */ --violet-deep: #2E0F8F; /* Hover, pressed, deep accents */ --violet-soft: #EFEAFF; /* Tinted backgrounds, callouts */ /* Secondary — Lime (the signal) */ --lime: #C8FF3D; /* Acid Lime — on Ink only */ --lime-deep: #8FC900; /* Lime Deep — on Paper / light surfaces */ /* Neutrals — quiet so the duotone can speak */ --ink: #0A0A12; /* Body type, dark surfaces, wordmark "Creat" */ --ink-2: #15151F; /* Raised dark surface */ --slate: #3D3D52; /* Body copy on light */ --fog: #6F6F85; /* Captions, metadata, muted UI */ --line: #E5E5EE; /* Hairlines, dividers, table borders */ --paper: #FAFAFC; /* Default light surface (off-white) */ --white: #FFFFFF; /* ---------- SEMANTIC FG / BG ---------- */ --bg: var(--paper); --bg-raised: var(--white); --bg-inverse: var(--ink); --fg: var(--ink); --fg-2: var(--slate); --fg-muted: var(--fog); --fg-inverse: var(--paper); --accent: var(--violet); --accent-fg: var(--paper); --signal: var(--lime-deep); /* on light */ --signal-dark: var(--lime); /* on dark */ --border: var(--line); /* ---------- TYPE FAMILIES ---------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', monospace; --font-serif: 'Instrument Serif', Georgia, serif; /* editorial accent only */ /* ---------- TYPE TOKENS ---------- */ --fs-display: clamp(64px, 12vw, 160px); --fs-h1: 48px; --fs-h2: 32px; --fs-h3: 24px; --fs-body-lg: 18px; --fs-body: 16px; --fs-caption: 13px; --fs-eyebrow: 11px; --fs-mono: 14px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 0.95; --lh-snug: 1.15; --lh-body: 1.5; --lh-loose: 1.6; --ls-display: -0.045em; --ls-heading: -0.025em; --ls-body: 0; --ls-eyebrow: 0.12em; --ls-caps: 0.18em; /* ---------- SPACING ---------- */ --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-sm: 4px; /* inputs, terminal, badges */ --radius-md: 8px; /* most cards */ --radius-lg: 12px; --radius-pill: 999px; --radius-tile: 22%; /* the icon tile — iOS-compatible */ /* ---------- ELEVATION / SHADOW ---------- */ /* Quiet by default. CreatStrat leans flat with hairlines. */ --shadow-flat: 0 0 0 1px var(--line); --shadow-sm: 0 1px 2px rgba(10,10,18,0.04), 0 0 0 1px var(--line); --shadow-md: 0 4px 16px rgba(10,10,18,0.06), 0 0 0 1px var(--line); --shadow-lg: 0 12px 40px rgba(10,10,18,0.10); --shadow-violet: 0 8px 24px rgba(91,43,255,0.25); --shadow-lime: 0 8px 24px rgba(143,201,0,0.35); --shadow-dark: 0 30px 80px rgba(0,0,0,0.4); /* ---------- GRID / LAYOUT ---------- */ --grid-gap: 80px; /* the brand-guideline grid is 80px on 80px */ --max-content: 1400px; --gutter: clamp(24px, 4vw, 80px); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 0.2s; --dur-base: 0.3s; --dur-slow: 0.8s; } /* ============================================================ SEMANTIC TYPE — drop on any element ============================================================ */ .cs-display { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--fg); } .cs-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: -0.025em; color: var(--fg); } .cs-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; color: var(--fg); } .cs-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; color: var(--fg); } .cs-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); } .cs-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .cs-caption { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--fg-muted); } .cs-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--accent); } .cs-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-mono); color: var(--fg); } .cs-serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: var(--fw-regular); color: var(--fg); } /* ============================================================ ELEMENT-LEVEL DEFAULTS (opt in via .cs-root) ============================================================ */ .cs-root { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cs-root ::selection { background: var(--lime); color: var(--ink); } /* ============================================================ THE 80px GRID BACKGROUND The signature surface treatment. Use on hero / empty / dark. Standardized at 80px (per build spec). ============================================================ */ .cs-grid-bg-light { background-color: var(--paper); background-image: linear-gradient(to right, rgba(10,10,18,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(10,10,18,0.03) 1px, transparent 1px); background-size: 80px 80px; } .cs-grid-bg-dark { background-color: var(--ink); background-image: linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 80px 80px; } /* The brand stripe: violet | lime, 50/50, always paired */ .cs-stripe { display: grid; grid-template-columns: 1fr 1fr; height: 8px; } .cs-stripe > :first-child { background: var(--violet); } .cs-stripe > :last-child { background: var(--lime); }