/* ========================================================================== Perf Design System — Tokens colors_and_type.css Drop this file in of any Perf surface: Then use the tokens below — never hardcode hexes. ========================================================================== */ /* ---- Webfonts (Google Fonts substitution — see README) ---- */ /* Geist — local brand font files (uploaded). Mono falls back to Google Fonts. */ @font-face { font-family: 'Geist'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Geist-Regular.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Geist-Medium.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Geist-SemiBold.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Geist-Bold.ttf') format('truetype'); } @font-face { font-family: 'Geist'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Geist-ExtraBold.ttf') format('truetype'); } @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;700&display=swap'); :root { /* ============================================ COLOR — primitives ============================================ */ /* Brand violet (primary). #8250df is --violet-500. Ramp built around it. */ --violet-50: #f4eefd; --violet-100: #e6d8fb; --violet-200: #cdb1f6; --violet-300: #b08ae8; --violet-400: #9966e0; --violet-500: #8250df; /* PRIMARY */ --violet-600: #6e3dc7; --violet-700: #5a2da5; --violet-800: #46237f; --violet-900: #2d1654; /* Neutral ramp (cool, slight blue cast — chip-macro vibe) */ --gray-0: #ffffff; --gray-50: #fafafb; --gray-100: #f3f3f5; --gray-200: #e6e6ea; --gray-300: #cfcfd6; --gray-400: #a1a1ad; --gray-500: #6f6f7c; --gray-600: #4a4a55; --gray-700: #2e2e38; --gray-800: #1a1a22; --gray-900: #0b0b10; /* near-black, default dark surface */ /* Semantic (muted, dual-mode) */ --success: #1f8b54; --warning: #c98a13; --danger: #c0392b; --info: var(--violet-500); /* ============================================ COLOR — semantic (light mode default) ============================================ */ --bg-0: var(--gray-50); /* page */ --bg-1: #ffffff; /* card */ --bg-2: var(--gray-100); /* subtle inset */ --bg-inverse: var(--gray-900); --fg-1: var(--gray-900); /* primary text */ --fg-2: var(--gray-600); /* secondary text */ --fg-3: var(--gray-500); /* tertiary / placeholder */ --fg-inverse: var(--gray-50); --border-1: var(--gray-200); /* hairline */ --border-2: var(--gray-300); /* definite */ --accent: var(--violet-500); --accent-hover: var(--violet-600); --accent-press: var(--violet-700); --accent-fg: #ffffff; --accent-tint: var(--violet-50); --focus-ring: var(--violet-500); /* ============================================ TYPOGRAPHY — primitives ============================================ */ --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-display: var(--font-sans); /* Type scale — modular, leans into display */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; /* body default */ --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px; --text-5xl: 56px; --text-6xl: 72px; --text-7xl: 96px; --text-8xl: 144px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================ SPACING (8pt grid, 4pt micro) ============================================ */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; --space-10: 96px; --space-11: 128px; /* ============================================ RADII ============================================ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ============================================ SHADOWS (minimal, 2 steps) ============================================ */ --shadow-1: 0 1px 2px rgba(11, 11, 16, 0.04), 0 2px 6px rgba(11, 11, 16, 0.06); --shadow-2: 0 4px 12px rgba(11, 11, 16, 0.08), 0 12px 32px rgba(11, 11, 16, 0.10); --shadow-focus: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--focus-ring); /* ============================================ MOTION ============================================ */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-1: 120ms; /* hover */ --dur-2: 200ms; /* state */ --dur-3: 320ms; /* panel */ --dur-4: 600ms; /* hero */ /* ============================================ LAYOUT ============================================ */ --nav-h: 64px; --container-max: 1280px; --container-wide: 1440px; } /* ============================================ DARK MODE (default for hero/marketing) ============================================ */ :root.dark, [data-theme="dark"] { --bg-0: var(--gray-900); --bg-1: var(--gray-800); --bg-2: #14141c; --bg-inverse: var(--gray-50); --fg-1: var(--gray-50); --fg-2: var(--gray-300); --fg-3: var(--gray-400); --fg-inverse: var(--gray-900); --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.16); --accent-tint: rgba(130, 80, 223, 0.16); --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.6); } /* ============================================ BASE / RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-1); background: var(--bg-0); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================ SEMANTIC TYPE STYLES Use class OR element selectors. ============================================ */ .h-display, h1.display { font-family: var(--font-display); font-size: clamp(56px, 8vw, var(--text-8xl)); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; } h1, .h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; } h2, .h2 { font-size: var(--text-4xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; } h3, .h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: -0.01em; margin: 0; } h4, .h4 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); margin: 0; } p, .p { font-size: var(--text-md); line-height: var(--leading-relaxed); margin: 0; color: var(--fg-1); } .lede { font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--fg-2); } .caption, small, .small { font-size: var(--text-sm); color: var(--fg-2); } .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-2); } code, .code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; font-feature-settings: 'tnum' 1, 'zero' 1; } .stat-num { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; font-weight: var(--weight-medium); letter-spacing: -0.01em; } a { color: var(--fg-1); text-decoration: none; transition: color var(--dur-1) var(--ease); } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--accent-fg); } /* ============================================ FOCUS RING ============================================ */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }