/* ============================================================ FBED Labs — Colors & Type The single source of visual truth. Import this into anything. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { /* ---------- BRAND CORE (from source files) ---------- */ --fbed-cream: #F4F1EA; /* primary brand background */ --fbed-ink: #171D1A; /* primary brand ink */ --fbed-mint: #4AE68A; /* signal / accent */ /* ---------- NEUTRAL SCALE (warm, derived from cream/ink) ---------- */ --paper: #FBFAF6; /* paper — lightest surface, almost white */ --cream: #F4F1EA; /* default page background */ --cream-2: #EAE6DC; /* hover/quiet panel */ --cream-3: #DDD9CD; /* divider on cream */ --stone: #B5B1A6; /* mute on cream */ --slate: #6B716E; /* secondary ink */ --graphite: #3A413E; /* tertiary ink, captions */ --ink: #171D1A; /* primary ink */ --ink-deep: #0B0F0D; /* near black, full-bleed dark surfaces */ /* ---------- ACCENT SCALE ---------- */ --mint-50: #E8FBF0; --mint-100: #C6F5D9; --mint-300: #7CECAE; --mint-500: #4AE68A; /* canonical brand mint */ --mint-600: #1FB266; --mint-700: #117A47; --mint-900: #0A3F26; /* ---------- SEMANTIC ---------- */ --signal: var(--mint-500); --signal-deep: var(--mint-600); --warn: #F2B544; --danger: #E5484D; --info: #4A8FE6; /* ---------- FOREGROUND / BACKGROUND TOKENS ---------- */ --fg-1: var(--ink); --fg-2: var(--graphite); --fg-3: var(--slate); --fg-mute: var(--stone); --fg-on-dark: var(--cream); --fg-on-accent: var(--ink); --bg-1: var(--cream); /* default page */ --bg-2: var(--cream-2); /* recessed */ --bg-paper: var(--paper); /* raised */ --bg-dark: var(--ink-deep); --bg-accent: var(--mint-500); --border-1: rgba(23, 29, 26, 0.10); /* hairline on cream */ --border-2: rgba(23, 29, 26, 0.18); /* visible on cream */ --border-strong: rgba(23, 29, 26, 0.85); --border-on-dark: rgba(244, 241, 234, 0.16); /* ---------- TYPE FAMILIES ---------- */ --font-display: "Inter", "Helvetica Neue", Arial, sans-serif; --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- TYPE TOKENS (size / leading / tracking / weight) ---------- Display weights run heavy (800–900) and tightly tracked, in the spirit of the FBED. wordmark. Body uses Inter at 400/500. */ --t-display-xxl-size: 104px; --t-display-xxl-lh: 0.92; --t-display-xxl-tr: -0.04em; --t-display-xxl-w: 900; --t-display-xl-size: 72px; --t-display-xl-lh: 0.94; --t-display-xl-tr: -0.035em; --t-display-xl-w: 900; --t-display-l-size: 56px; --t-display-l-lh: 0.98; --t-display-l-tr: -0.03em; --t-display-l-w: 800; --t-display-m-size: 40px; --t-display-m-lh: 1.02; --t-display-m-tr: -0.025em; --t-display-m-w: 800; --t-h1-size: 34px; --t-h1-lh: 1.10; --t-h1-tr: -0.02em; --t-h1-w: 700; --t-h2-size: 26px; --t-h2-lh: 1.16; --t-h2-tr: -0.018em; --t-h2-w: 700; --t-h3-size: 20px; --t-h3-lh: 1.25; --t-h3-tr: -0.012em; --t-h3-w: 700; --t-h4-size: 16px; --t-h4-lh: 1.30; --t-h4-tr: -0.005em; --t-h4-w: 600; --t-lead-size: 20px; --t-lead-lh: 1.50; --t-lead-tr: 0; --t-lead-w: 400; --t-body-size: 16px; --t-body-lh: 1.55; --t-body-tr: 0; --t-body-w: 400; --t-small-size: 14px; --t-small-lh: 1.50; --t-small-tr: 0; --t-small-w: 400; --t-caption-size: 12px; --t-caption-lh:1.40; --t-caption-tr:0.01em; --t-caption-w:500; --t-mono-size: 14px; --t-mono-lh: 1.50; --t-eyebrow-size: 12px; --t-eyebrow-lh:1.20; --t-eyebrow-tr:0.14em; --t-eyebrow-w:600; /* ALL CAPS, wide-tracked label */ /* ---------- SPACING (4px base) ---------- */ --space-0: 0; --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; --space-32: 128px; /* ---------- RADII ---------- The brand is geometric and sharp. Default radii are SMALL. Pills (full radius) are reserved for badges / chips. */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; /* default for inputs, small chips */ --radius-3: 8px; /* default for cards, buttons */ --radius-4: 12px; --radius-5: 20px; /* large surfaces, modals */ --radius-pill: 999px; /* ---------- SHADOWS ---------- Soft, warm shadow that reads on the cream background. We do NOT use glassmorphism. */ --shadow-1: 0 1px 0 rgba(23, 29, 26, 0.04), 0 1px 2px rgba(23, 29, 26, 0.04); --shadow-2: 0 1px 0 rgba(23, 29, 26, 0.04), 0 4px 14px rgba(23, 29, 26, 0.06); --shadow-3: 0 2px 0 rgba(23, 29, 26, 0.04), 0 14px 40px rgba(23, 29, 26, 0.10); --shadow-inset: inset 0 0 0 1px rgba(23, 29, 26, 0.08); --shadow-focus: 0 0 0 3px rgba(74, 230, 138, 0.35); /* ---------- MOTION ---------- Quiet, confident easing. No bouncy springs. */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0.0, 0.2, 1); --dur-1: 120ms; /* hover state */ --dur-2: 200ms; /* small enter/exit */ --dur-3: 320ms; /* sheet / modal */ --dur-4: 600ms; /* page-level reveal */ /* ---------- LAYOUT ---------- */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1440px; --grid-gutter: 24px; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply these by tag or by class — both work. ============================================================ */ html, body { background: var(--bg-1); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .display-xxl, .display-xl, .display-l, .display-m, h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg-1); margin: 0; text-wrap: balance; } .display-xxl { font-size: var(--t-display-xxl-size); line-height: var(--t-display-xxl-lh); letter-spacing: var(--t-display-xxl-tr); font-weight: var(--t-display-xxl-w); } .display-xl { font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-tr); font-weight: var(--t-display-xl-w); } .display-l { font-size: var(--t-display-l-size); line-height: var(--t-display-l-lh); letter-spacing: var(--t-display-l-tr); font-weight: var(--t-display-l-w); } .display-m { font-size: var(--t-display-m-size); line-height: var(--t-display-m-lh); letter-spacing: var(--t-display-m-tr); font-weight: var(--t-display-m-w); } h1, .h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-tr); font-weight: var(--t-h1-w); } h2, .h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-tr); font-weight: var(--t-h2-w); } h3, .h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-tr); font-weight: var(--t-h3-w); } h4, .h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-tr); font-weight: var(--t-h4-w); } .lead { font-size: var(--t-lead-size); line-height: var(--t-lead-lh); font-weight: var(--t-lead-w); color: var(--fg-2); text-wrap: pretty; } p, .body { font-size: var(--t-body-size); line-height: var(--t-body-lh); font-weight: var(--t-body-w); color: var(--fg-1); text-wrap: pretty; margin: 0; } .small { font-size: var(--t-small-size); line-height: var(--t-small-lh); font-weight: var(--t-small-w); color: var(--fg-2); } .caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); letter-spacing: var(--t-caption-tr); font-weight: var(--t-caption-w); color: var(--fg-3); } .eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh); letter-spacing: var(--t-eyebrow-tr); font-weight: var(--t-eyebrow-w); text-transform: uppercase; color: var(--fg-3); } code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: var(--t-mono-size); line-height: var(--t-mono-lh); } /* The signature green-dot full stop, e.g. "Build." with a mint period. . after a heading. */ .fbed-stop { color: var(--signal); }