/* ============================================================ DATA MASTERY — Design Foundations Colors + Type tokens, base + semantic. Fonts: Space Grotesk (display), DM Sans (body + wordmark), JetBrains Mono (labels/data). All on Google Fonts. Import in HTML : ============================================================ */ :root { /* ---- Brand blues — build the mark ---- */ --dm-indigo-shadow: #0B1E5C; /* wordmark · inner face (right) · deepest trust */ --dm-ink-2: #0E2C7A; /* secondary navy */ --dm-mid-blue: #2D6DDB; /* inner face (top) · working blue */ --dm-cyan-light: #5CCDE8; /* inner face (left) · highlight */ --dm-wire: #7EC4E3; /* wireframe stroke / vertex nodes */ /* ---- Surfaces & accent ---- */ --dm-sky-accent: #38BDF8; /* CTAs · the "aha" highlight */ --dm-whisper: #F6F8FC; /* app background · default surface */ --dm-paper: #FFFFFF; /* cards · print · reverse type */ --dm-deep: #050A1C; /* deepest background (below indigo) */ /* ---- Semantic / functional ---- */ --dm-success: #10B981; --dm-danger: #EF4444; /* ---- Foreground tokens (on light) ---- */ --fg-1: #0B1E5C; /* primary text — indigo shadow */ --fg-2: rgba(11,30,92,0.78); /* body text */ --fg-3: rgba(11,30,92,0.55); /* muted / captions */ --fg-4: rgba(11,30,92,0.45); /* faint / page numbers */ /* ---- Foreground tokens (on dark) ---- */ --fg-on-dark-1: #FFFFFF; --fg-on-dark-2: rgba(255,255,255,0.85); --fg-on-dark-3: rgba(255,255,255,0.55); /* ---- Lines / borders ---- */ --line: rgba(11,30,92,0.10); --line-2: rgba(11,30,92,0.20); --line-on-dark: rgba(255,255,255,0.10); /* ---- Background recipes ---- */ --bg-app: var(--dm-whisper); --bg-dark: linear-gradient(170deg, #07112E 0%, #0B1E5C 55%, #07112E 100%); --bg-solid-ink: var(--dm-indigo-shadow); --bg-hero-gradient: linear-gradient(135deg, #2D6DDB 0%, #0B1E5C 100%); --bg-slide: linear-gradient(135deg, #0B1E5C 0%, #07112E 100%); /* ---- Type families ---- */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Wordmark is DM Sans @ weight 1000, uppercase, +0.16em tracking */ --font-wordmark: 'DM Sans', system-ui, sans-serif; /* ---- Radii ---- */ --radius-sm: 8px; /* business cards, slides, small chips */ --radius-md: 12px; /* swatches, inner cells */ --radius-lg: 14px; /* default card radius */ --radius-xl: 16px; /* feature blocks, app tiles */ --radius-pill: 999px; /* ---- Elevation / shadow ---- */ --shadow-card: 0 1px 4px rgba(11,30,92,0.18); --shadow-raise: 0 12px 30px rgba(0,0,0,0.20); --shadow-float: 0 18px 40px rgba(0,0,0,0.25); --shadow-page: 0 24px 80px rgba(0,0,0,0.35); /* ---- Spacing scale (8pt base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 100px; /* page gutter */ /* ---- Motion ---- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; } /* ============================================================ SEMANTIC TYPE STYLES Apply directly or copy values. Sizes tuned for screen. ============================================================ */ .dm-display { /* hero / cover titles */ font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 0.92; letter-spacing: -0.025em; color: var(--fg-1); } .dm-h1 { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 0.95; letter-spacing: -0.025em; color: var(--fg-1); } .dm-h2 { /* section titles */ font-family: var(--font-display); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); } .dm-h3 { /* sub-titles */ font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -0.005em; color: var(--fg-1); } .dm-lede { /* intro paragraph */ font-family: var(--font-body); font-weight: 400; font-size: 22px; line-height: 1.5; color: var(--fg-1); } .dm-body { /* default paragraph / UI */ font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--fg-2); } .dm-eyebrow { /* mono kicker above headings */ font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dm-ink-2); } .dm-micro { /* tiny mono caption / meta */ font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); } .dm-mono { /* inline data / code / numbers */ font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--fg-2); } /* The wordmark — never use weight 1000 anywhere else */ .dm-wordmark { font-family: var(--font-wordmark); font-weight: 1000; letter-spacing: 0.16em; text-transform: uppercase; padding-left: 0.16em; /* compensates tracking on the left edge */ line-height: 1; white-space: nowrap; color: currentColor; }