/* ============================================================ MOORE AI — Design tokens Colors, typography, spacing, radii, shadows, motion ============================================================ */ /* ---------- Fonts ---------- Primary: Geist (geometric grotesque) Mono: Geist Mono (technical accents, eyebrows, code) Loaded via Google Fonts in HTML — see colors_and_type.html for the canonical link tag, or self-host from /fonts/. */ :root { /* ============ COLOR ============ Warm-modern palette. Cream replaces stark white; graphite (a near-ink warm taupe) is the single accent. Two faces by surface so contrast stays quiet on cream AND on ink. Never decorative; the brand performs through restraint. */ /* Foundation */ --cream: #f6f4ef; /* primary canvas */ --cream-2: #efece4; /* recessed surface, hover bg */ --cream-3: #e6e1d5; /* dividers, subtle fills */ --ink: #141414; /* primary text, inverted canvas */ --ink-2: #2a2722; /* secondary ink surface */ /* Neutrals — warm, not gray. Built on the cream/ink axis. */ --warm-900: #1a1815; --warm-800: #2a2722; --warm-700: #3d3934; --warm-600: #6b6258; /* secondary text */ --warm-500: #8a8175; /* tertiary text, captions */ --warm-400: #a8a094; --warm-300: #c4bdb0; --warm-200: #ddd6c8; --warm-100: #ebe6da; --warm-50: #f1ede3; /* Accent — graphite. Tonal warm taupe — visible as a brand element, not chromatic. Two faces by surface: --graphite on cream (warm dark taupe, clearly readable) --graphite-on-ink on ink (bone, the mirror) */ --graphite: #5a5347; /* primary accent on cream — visible */ --graphite-hover: #3d3934; /* hover / press — deeper */ --graphite-soft: #8a8175; /* subdued emphasis */ --graphite-tint: #ebe6da; /* tinted background */ --graphite-on-ink: #c4bdb0; /* primary accent ON ink */ --graphite-on-ink-hover: #d8d2c5; --accent: var(--graphite); --accent-hover: var(--graphite-hover); --accent-on-ink: var(--graphite-on-ink); /* Semantic */ --success: #4a6b3a; /* deep moss */ --warning: #b8842a; /* warm amber */ --danger: #a8321a; /* deep red, harmonized warm */ --info: #3d5a6b; /* slate blue */ /* Foreground / background semantic mapping */ --bg: var(--cream); --bg-elev: #fbfaf6; /* elevated card surface */ --bg-sunk: var(--cream-2); --bg-invert: var(--ink); --fg: var(--ink); --fg-muted: var(--warm-600); --fg-subtle: var(--warm-500); --fg-invert: var(--cream); --fg-accent: var(--graphite); --border: var(--cream-3); --border-strong: var(--warm-300); --border-ink: var(--ink); /* ============ TYPE ============ */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* Type scale — tight on small, wide on large. Designed for editorial rhythm, not utility-soup density. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 21px; --text-xl: 26px; --text-2xl: 34px; --text-3xl: 46px; --text-4xl: 64px; --text-5xl: 88px; --text-6xl: 120px; /* Line heights — looser body, tighter display */ --lh-tight: 1.02; --lh-snug: 1.12; --lh-display: 1.05; --lh-base: 1.5; --lh-relaxed: 1.65; /* Letter spacing */ --ls-tighter: -0.04em; /* big display */ --ls-tight: -0.02em; /* headings */ --ls-normal: 0; --ls-wide: 0.04em; --ls-wider: 0.14em; /* mono eyebrows, all-caps labels */ /* ============ SPACING ============ 4px base. Use ramps; avoid arbitrary values. */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px; --s-48: 192px; /* ============ RADII ============ Sharp. Most surfaces are 0 or 2px. Pills exist for tags only. */ --r-0: 0; --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; --r-pill: 999px; /* ============ SHADOWS ============ Restrained. Cards lean on borders, not bloom. Use --shadow-1 for floating UI only. */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.04), 0 1px 1px rgba(20, 20, 20, 0.03); --shadow-2: 0 4px 12px rgba(20, 20, 20, 0.06), 0 1px 2px rgba(20, 20, 20, 0.04); --shadow-3: 0 12px 32px rgba(20, 20, 20, 0.10), 0 2px 6px rgba(20, 20, 20, 0.05); --shadow-focus: 0 0 0 3px rgba(45, 39, 34, 0.22); /* ============ MOTION ============ Restrained. Quick, confident. No bounces, no spring. Standard ease: a snappy custom curve. */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-linear: linear; --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 600ms; /* ============ LAYOUT ============ */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1440px; --container-2xl: 1680px; --gutter: 24px; --gutter-lg: 48px; --rule: 1px solid var(--border); --rule-strong: 1px solid var(--border-strong); --rule-ink: 1px solid var(--ink); } /* ============================================================ SEMANTIC ELEMENT STYLES Apply these as classes (.h1, .eyebrow) or as the default on the element itself. They're the "intent" layer above tokens. ============================================================ */ html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); } body { font-size: var(--text-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } /* Display & headings */ .display-1, h1.display { font-family: var(--font-display); font-size: clamp(56px, 9vw, var(--text-6xl)); font-weight: var(--w-medium); line-height: var(--lh-display); letter-spacing: var(--ls-tighter); color: var(--fg); } .display-2 { font-family: var(--font-display); font-size: clamp(40px, 6vw, var(--text-5xl)); font-weight: var(--w-medium); line-height: var(--lh-display); letter-spacing: var(--ls-tighter); } h1, .h1 { font-size: var(--text-4xl); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h2, .h2 { font-size: var(--text-3xl); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h3, .h3 { font-size: var(--text-2xl); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h4, .h4 { font-size: var(--text-xl); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } h5, .h5 { font-size: var(--text-lg); font-weight: var(--w-medium); line-height: var(--lh-snug); } /* Body */ p, .body { font-size: var(--text-base); line-height: var(--lh-base); color: var(--fg); } .body-lg { font-size: var(--text-md); line-height: var(--lh-relaxed); } .body-sm { font-size: var(--text-sm); line-height: var(--lh-base); } .lead { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--fg-muted); } /* Labels & utility text */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--w-regular); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-muted); } .label { font-size: var(--text-sm); font-weight: var(--w-medium); letter-spacing: 0; color: var(--fg); } .caption { font-size: var(--text-xs); line-height: 1.4; color: var(--fg-subtle); } code, .code, .mono { font-family: var(--font-mono); font-size: 0.92em; } /* Links — subtle by default, underline on interaction */ a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: 0.6; } a.accent { color: var(--graphite); } /* ============ Accent inversion ============ On ink surfaces, the accent flips from "near-ink" to "near-cream" so it stays at the same quiet level of contrast. */ .ink .accent, section.ink .accent, .slide.ink .accent, .on-ink .accent, .ink a.accent, .on-ink a.accent { color: var(--accent-on-ink); } .ink .logo .dot, section.ink .logo .dot, .slide.ink .logo .dot, .on-ink .logo .dot { color: var(--accent-on-ink); } .ink .eyebrow .n, section.ink .eyebrow .n, .slide.ink .eyebrow .n, .on-ink .eyebrow .n { color: var(--accent-on-ink); } .ink .eyebrow .dot, section.ink .eyebrow .dot, .slide.ink .eyebrow .dot, .on-ink .eyebrow .dot { background: var(--accent-on-ink); } /* Rules */ hr { border: 0; border-top: var(--rule); margin: var(--s-8) 0; } hr.ink { border-top: var(--rule-ink); } /* Selection */ ::selection { background: var(--ink); color: var(--cream); }