/* ============================================================================ NAVIX Design System — design-tokens.css Consolidated CSS custom properties: colour, typography, spacing, radius, border, shadow, layout, motion. Single-file export for handoff. Usage: …then reference the SEMANTIC aliases in your components (--bg-page, --surface-card, --text-primary, --border-subtle, …). Themes / modes (opt in on the root element or any subtree): → Charcoal Ink dark mode → Chivo + Chivo Mono (WEB ONLY; print/deck stay Bull-5) Brand fonts (Bull-5, Bull-5 Mono) are commercial (tightype.com) and are NOT bundled here — self-host them and declare @font-face, or use the web-alt open fonts. See DESIGN.md § Typography. Source of truth: NAVIX Brand Guidelines v1.0 (2022). ============================================================================ */ /* Open web-alt fonts (binaries load only when data-fonts="web-alt" renders). */ @import url("https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;600;700&family=Chivo+Mono:wght@400;500;700&display=swap"); :root { /* ------------------------------------------------------------------ COLOUR — base palette ------------------------------------------------------------------ */ --navix-black: #000000; /* PMS Process Black */ --navix-white: #ffffff; --navix-off-white: #fafafa; /* off-white page surface */ --navix-red: #ff4131; /* PMS 805 — leading accent, used deliberately */ --navix-cool-gray: #e0e1dd; /* PMS Cool Gray 1 */ --navix-blue-violet: #bdd4ff; /* Light Blue/Violet — complementary */ /* Black tint scale — guideline %: 95 / 85 / 75 / 50 / 25 */ --navix-black-95: #0d0d0d; --navix-black-85: #262626; --navix-black-75: #404040; --navix-black-50: #808080; --navix-black-25: #bfbfbf; /* Neutral steps derived from Cool Gray */ --navix-gray-100: #f4f4f2; --navix-gray-200: #e0e1dd; --navix-gray-300: #c9cac4; --navix-gray-400: #9b9c96; --navix-gray-500: #6e6f6a; --navix-gray-600: #45463f; /* Red states */ --navix-red-hover: #ed3826; /* darker press/hover */ --navix-red-soft: #ffe5e2; /* tint background */ /* ------------------------------------------------------------------ COLOUR — semantic aliases (reference THESE in components) ------------------------------------------------------------------ */ --bg-page: var(--navix-off-white); /* #fafafa */ --bg-page-inverse: var(--navix-black); /* #000000 */ --surface-card: var(--navix-white); /* #ffffff */ --surface-muted: var(--navix-gray-100); /* #f4f4f2 */ --surface-accent: var(--navix-red); /* #ff4131 */ --surface-cool: var(--navix-cool-gray); /* #e0e1dd */ --surface-soft-blue: var(--navix-blue-violet);/* #bdd4ff */ --text-primary: var(--navix-black); /* #000000 */ --text-secondary: var(--navix-gray-500); /* #6e6f6a */ --text-muted: var(--navix-gray-400); /* #9b9c96 */ --text-inverse: var(--navix-white); /* #ffffff */ --text-accent: var(--navix-red); /* #ff4131 */ --border-default: var(--navix-gray-300); /* #c9cac4 */ --border-strong: var(--navix-black); /* #000000 */ --border-subtle: var(--navix-gray-200); /* #e0e1dd */ --focus-ring: var(--navix-red); /* #ff4131 */ /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ /* Families — Bull-5 is the brand default; fallbacks listed for safety. (Self-host Bull-5 / Bull-5 Mono via @font-face — not bundled here.) */ --font-sans: "Bull-5", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-mono: "Bull-5 Mono", "Bull-5", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Type scale (rem, 16px base) */ --text-display: 5rem; /* 80px — hero statements */ --text-h1: 3.25rem; /* 52px */ --text-h2: 2.25rem; /* 36px */ --text-h3: 1.5rem; /* 24px */ --text-body-lg: 1.25rem; /* 20px — lead paragraphs */ --text-body: 1rem; /* 16px */ --text-small: 0.875rem; /* 14px */ --text-label: 0.75rem; /* 12px — mono labels */ /* Line heights */ --leading-tight: 1.02; /* display & headlines */ --leading-snug: 1.18; --leading-normal: 1.5; /* body copy */ /* Tracking */ --tracking-tight: -0.02em; /* large display */ --tracking-normal: 0; --tracking-label: 0.08em; /* mono labels, uppercase */ /* Weight — Bull-5 ships a single weight */ --weight-regular: 400; /* ------------------------------------------------------------------ SPACING (4px base grid) ------------------------------------------------------------------ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ------------------------------------------------------------------ RADIUS (subtle 8px default; pills for buttons/tags; sharp on bleed) ------------------------------------------------------------------ */ --radius-none: 0px; --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ------------------------------------------------------------------ BORDER (crisp hairlines do the structural work) ------------------------------------------------------------------ */ --border-width: 1px; --border-width-strong: 2px; /* ------------------------------------------------------------------ SHADOW (used sparingly — the brand favours flat surfaces) ------------------------------------------------------------------ */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-lifted: 0 12px 40px rgba(0, 0, 0, 0.12); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1280px; --gutter: var(--space-6); --section-y: var(--space-10); /* ------------------------------------------------------------------ MOTION (calm, precise; no bounce) ------------------------------------------------------------------ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration: 240ms; --duration-slow: 480ms; } /* ============================================================================ DARK MODE — "Charcoal Ink" Neutral charcoal base; surfaces step up in lightness for elevation. Red is nudged brighter so it holds against the dark canvas. Only the semantic aliases are remapped — components referencing them get dark mode for free. Opt in with (or on any subtree). ============================================================================ */ :root { /* Dark surface ramp (charcoal, elevation by lightness) */ --navix-ink-000: #16171a; /* page */ --navix-ink-100: #1e1f22; /* card / raised */ --navix-ink-200: #292b2f; /* muted / hover */ --navix-ink-300: #34363b; /* subtle border */ --navix-ink-400: #3a3c42; /* default border */ --navix-ink-500: #55575e; /* strong border */ /* Dark text ramp */ --navix-ink-text: #f4f4f2; --navix-ink-text-2: #a7a8a2; --navix-ink-text-3: #75766f; /* Red tuned for dark surfaces */ --navix-red-bright: #ff5647; --navix-red-dark-soft: #3a1512; } [data-theme="dark"] { color-scheme: dark; --bg-page: var(--navix-ink-000); /* #16171a */ --bg-page-inverse: var(--navix-off-white); /* #fafafa */ --surface-card: var(--navix-ink-100); /* #1e1f22 */ --surface-muted: var(--navix-ink-200); /* #292b2f */ --surface-accent: var(--navix-red-bright); /* #ff5647 */ --surface-cool: var(--navix-ink-200); /* #292b2f */ --surface-soft-blue: var(--navix-blue-violet);/* #bdd4ff */ --text-primary: var(--navix-ink-text); /* #f4f4f2 */ --text-secondary: var(--navix-ink-text-2); /* #a7a8a2 */ --text-muted: var(--navix-ink-text-3); /* #75766f */ --text-inverse: var(--navix-black); /* #000000 */ --text-accent: var(--navix-red-bright); /* #ff5647 */ --border-default: var(--navix-ink-400); /* #3a3c42 */ --border-strong: var(--navix-ink-500); /* #55575e */ --border-subtle: var(--navix-ink-300); /* #34363b */ --focus-ring: var(--navix-red-bright); /* #ff5647 */ --navix-red-soft: var(--navix-red-dark-soft); /* #3a1512 */ } /* ============================================================================ WEB-ONLY FONT ALTERNATIVE — Chivo + Chivo Mono (SIL OFL) For web apps that can't licence the Bull webfont. Print / decks / export stay Bull-5. html[...] (0,1,1) beats :root (0,1,0) regardless of order; the bare attribute keeps subtree scoping working. ============================================================================ */ html[data-fonts="web-alt"], [data-fonts="web-alt"] { --font-sans: "Chivo", "Helvetica Neue", Arial, sans-serif; --font-mono: "Chivo Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }