/* Ported from OberBuilt-Website design/mockups-2026-09/assets/tokens.css (frozen reference). Fonts moved to fonts.css. */ /* ============================================================ OberBuilt Design System — colors_and_type.css Single source of truth for tokens. Import this in every ui_kit and preview file: ============================================================ */ /* ---------- Self-hosted fonts (no Google Fonts — S1 exit criterion 6) ---------- */ :root { /* ============================================================ COLOR — base ramps Cool, slightly desaturated. Never pure black, never warm. ============================================================ */ /* Steel: the neutral ramp */ --paper: #FFFFFF; --steel-50: #F2F6FA; --steel-100: #E4ECF3; --steel-200: #C7D4E0; --steel-300: #94A8BC; --steel-400: #6B8197; --steel-500: #4A6076; --steel-600: #344758; --steel-700: #233140; --steel-800: #15232F; --steel-900: #0F1B26; --ink: #0B1620; /* near-black, cool cast */ /* Blue: brand primary, calm and trustworthy */ --blue-100: #DCEBFA; --blue-200: #B3D2F2; --blue-300: #7CBAEE; --blue-400: #4A9BE6; --blue-500: #1B7AD6; --blue-600: #0E5FB3; /* default brand blue */ --blue-700: #0B4A8F; --blue-800: #0A3A6E; /* Cyan: electric accent, focus, active */ --cyan-200: #B6F0F7; --cyan-300: #62E2EF; --cyan-400: #2DD4E8; --cyan-500: #00B8D4; /* default accent cyan */ --cyan-600: #008FA5; --cyan-700: #006A7C; /* Racing red: critical / over-limit / destructive */ --red-100: #FBE0DD; --red-300: #F0857C; --red-500: #E1352B; /* default racing red */ --red-600: #C32820; --red-700: #951C16; /* Caution yellow: warning / approaching limit */ --yellow-100: #FCF3C5; --yellow-300: #F7D547; --yellow-500: #F2C300; /* default caution yellow */ --yellow-600: #C29B00; /* Green: success only — desaturated, professional */ --green-100: #D4ECDF; --green-500: #1F8E5B; --green-600: #16704A; /* ============================================================ COLOR — semantic Use these in components. Never the raw ramps. ============================================================ */ /* Surfaces */ --bg: var(--steel-50); /* default page background */ --bg-card: var(--paper); /* default card surface */ --bg-data: var(--steel-50); /* recessed data panel */ --bg-inset: var(--steel-100); /* inputs, deeper insets */ --bg-overlay: rgba(11, 22, 32, 0.6); /* modal scrim */ --bg-grid: rgba(11, 22, 32, 0.04); /* engineering dot-grid */ --bg-dark: var(--ink); /* studio / dark mode */ --bg-dark-card: var(--steel-800); /* Foregrounds */ --fg-1: var(--ink); /* primary text */ --fg-2: var(--steel-600); /* secondary text */ --fg-3: var(--steel-400); /* tertiary / placeholder */ --fg-4: var(--steel-300); /* disabled */ --fg-on-dark-1: #F4F8FB; --fg-on-dark-2: #B3C4D2; --fg-on-dark-3: #7B8E9F; --fg-on-accent: var(--paper); /* Borders */ --border: var(--steel-200); /* default 1px hairline */ --border-strong:var(--steel-300); --border-dark: var(--steel-700); --border-focus: var(--cyan-500); /* Brand & action */ --brand: var(--blue-600); --brand-hover: var(--blue-700); --brand-fg: var(--paper); --accent: var(--cyan-500); /* Status */ --critical: var(--red-500); --critical-bg: var(--red-100); --warning: var(--yellow-500); --warning-bg: var(--yellow-100); --success: var(--green-500); --success-bg: var(--green-100); --info: var(--blue-500); --info-bg: var(--blue-100); /* ============================================================ TYPE — families ============================================================ */ --font-display: 'Saira', 'Saira Fallback', 'Helvetica Neue', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', 'JetBrains Mono', ui-monospace, Menlo, monospace; /* ============================================================ TYPE — sizes (rem on a 16px base) ============================================================ */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; /* body baseline — slightly compact */ --text-md: 17px; --text-lg: 19px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 48px; --text-5xl: 64px; --text-display: 88px; /* hero only */ /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-loose: 1.65; /* Tracking */ --track-tight: -0.02em; --track-normal: 0; --track-wide: 0.04em; --track-caps: 0.08em; /* for label CAPS */ /* Weights */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ============================================================ SPACING — 4px base ============================================================ */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; /* ============================================================ RADII ============================================================ */ --r-none: 0; --r-sm: 4px; /* inputs, buttons */ --r-md: 6px; /* cards */ --r-lg: 10px; /* modals, feature panels */ --r-pill: 999px; /* status chips only */ /* ============================================================ SHADOWS — subtle, cool-cast ============================================================ */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(11, 22, 32, 0.04), 0 2px 6px rgba(11, 22, 32, 0.06); --shadow-2: 0 1px 0 rgba(11, 22, 32, 0.06), 0 8px 24px rgba(11, 22, 32, 0.10); --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--cyan-500); /* ============================================================ MOTION ============================================================ */ --ease: cubic-bezier(0.2, 0, 0, 1); --t-fast: 120ms; --t-base: 160ms; --t-slow: 240ms; /* ============================================================ LAYOUT ============================================================ */ --container: 1280px; --gutter: 24px; --rail-w: 240px; /* product sidebar */ --topbar-h: 60px; } /* ============================================================ Semantic element styles Use these classes (not just utilities) for consistency. ============================================================ */ .h-display { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--text-display); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-1); } .h1 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--track-tight); color: var(--fg-1); } .h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--fg-1); } .h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--fg-1); } .h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1); } .eyebrow, .label-caps { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-2); } .body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-1); } .body-lg { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-1); } .body-sm { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg-2); } .mono, .data { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--fg-1); } .data-xl { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; font-variant-numeric: tabular-nums; font-size: var(--text-3xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); } .code { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; } /* ============================================================ Base reset (light) ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--blue-600); text-decoration: none; } :where(body:not(.v2)) a:hover { color: var(--blue-700); } /* light pages only; never leaks into v2 */ a:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; } ::selection { background: var(--cyan-300); color: var(--ink); }