/* Extracted from aibuild-lab/the-studio/design-system/tokens/colors_and_type.css @ df60c198a977e7059af0f273d8ad0e621cf60ab0; source asset_fadf753fd0b229030298ac4a8a646d06bbcc9ec59cf89a5fc9624ef32596d437. Candidate; rights unknown. */ /* Font loading omitted for offline previews; custom properties preserved. */ /* ============================================================ AI BUILD LAB — Colors & Typography Foundations Source of truth for every AIBL surface. Dark-first, terminal energy. ============================================================ */ /* When online / in hosted previews prefer Google Fonts for crisp hinting. @import MUST come before any other rule in a stylesheet. */ /* =========== FONT FACES (local fallbacks) =========== */ /* =========== TOKENS =========== */ :root { /* -------- Neutrals: near-black backgrounds -------- */ --black: #0a0a0a; /* page background */ --dark: #111111; /* elevated surface 1 (cards on black) */ --dark-2: #1a1a1a; /* elevated surface 2 (nested cards, hover) */ --dark-3: #222222; /* borders, dividers */ --dark-4: #2a2a2a; /* stronger borders */ --white: #f5f5f5; /* primary text */ --gray: #b3b3b3; /* body secondary */ --gray-dim: #8a8a8a; /* tertiary / meta */ --gray-dark:#333333; /* ghost-button border */ /* -------- Brand accents -------- */ --neon: #DBFB6B; /* PRIMARY accent — CTAs, selection, section labels */ --neon-dim: rgba(219,251,107,0.12); --neon-glow: rgba(219,251,107,0.30); --green: #39FF14; /* paired with neon in gradients */ --blue: #00D4FF; /* secondary accent */ --blue-dim: rgba(0,212,255,0.12); --coral: #FF6B6B; /* secondary accent */ --coral-dim: rgba(255,107,107,0.12); --teal: #4ECDC4; /* secondary accent */ --teal-dim: rgba(78,205,196,0.12); --purple: #A78BFA; /* tertiary accent, used rarely */ --purple-dim: rgba(167,139,250,0.12); /* -------- Semantic foreground -------- */ --fg-1: var(--white); --fg-2: var(--gray); --fg-3: var(--gray-dim); --fg-accent: var(--neon); /* -------- Semantic background -------- */ --bg-1: var(--black); --bg-2: var(--dark); --bg-3: var(--dark-2); --border-1: var(--dark-3); --border-2: var(--dark-4); /* -------- Light mode (slides + educational surfaces) -------- The brand runs a full light-mode variant alongside dark. Decks mix both. Cream paper, black type, neon used as HIGHLIGHTER PILL behind active states. */ --cream: #F4F1EA; /* slide paper background */ --cream-2: #E8E3D6; /* subtle section dividers on cream */ --ink: #111111; /* body text on cream */ --ink-2: #3A3A3A; /* secondary text on cream */ --ink-3: #7A7A7A; /* meta text on cream */ --cream-border: rgba(17,17,17,0.10); /* -------- Extended "Week palette" -------- Used in curriculum roadmap slides: each week gets its own accent column. Lighter/more educational than the marketing accent set. */ --week-1: #F4D35E; /* yellow — Week 1 / Discovery */ --week-2: #F5A65B; /* orange — Week 2 / Process */ --week-3: #B8E060; /* lime — Week 3 / RAG */ --week-4: #6ECDAA; /* mint — Week 4 / Assistants */ --week-5: #7CC4E8; /* sky — Week 5 / MVP */ --week-6: #9FAEEA; /* indigo — Week 6 / Eval */ --week-7: #C7A6E8; /* lavender — Week 7 / Production */ --week-8: #E89FB8; /* rose — Week 8 / Handover */ /* -------- Slide-surface tokens (apply by toggling --mode) -------- */ --slide-bg: var(--cream); --slide-fg: var(--ink); --slide-fg-2: var(--ink-2); --slide-fg-3: var(--ink-3); --slide-border: var(--cream-border); /* -------- Type families -------- */ --font-display: 'Space Grotesk', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* -------- Type scale (home page reference) -------- */ --fs-mono-eyebrow: 11px; --fs-body-sm: 13px; --fs-body: 15px; --fs-body-lg: 17px; --fs-h3: 22px; --fs-h2: clamp(32px, 4.5vw, 60px); --fs-h1: clamp(44px, 7.5vw, 110px); /* -------- Radii — restrained, never pill -------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl:20px; /* -------- Spacing -------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* -------- Golden ratio used in section padding -------- */ --phi: 1.618; --phi-inv: 0.618; /* -------- Motion -------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 0.2s; --dur-med: 0.3s; --dur-slow: 0.6s; } /* =========== SELECTION =========== */ ::selection { background: var(--neon); color: var(--black); } /* =========== SEMANTIC ELEMENT STYLES =========== */ body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 0.92; letter-spacing: -4px; } h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -2px; } h3, .h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.5px; } p { font-size: var(--fs-body); color: var(--fg-2); line-height: 1.6; } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.95em; } /* Monospace eyebrow label — section label pattern w/ accent bar */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-eyebrow); font-weight: 500; color: var(--neon); letter-spacing: 3px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--neon); } /* Dark-mode slide surface */ .slide-dark { --slide-bg: var(--black); --slide-fg: var(--white); --slide-fg-2: var(--gray); --slide-fg-3: var(--gray-dim); --slide-border: var(--dark-3); } /* Neon highlighter pill — the signature "active state" in decks. Wrap a span in .hilite to get the lime pill behind it. */ .hilite { background: var(--neon); color: var(--ink); padding: 2px 10px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }