/** * ============================================================ * NEXORA — ROOT DESIGN TOKENS * ============================================================ * * Single source of truth for color, type, spacing, and motion * across the Nexora web platform. Every value a component uses * should trace back to a token in this file — nothing hardcoded. * * STRUCTURE (8 sections, in dependency order): * 1. Primitive colors — raw hue ramps (17 steps each, 50→850). * Never used directly in components. * 2. Semantic colors — the only color layer components touch * (--color-background, --color-primary, etc). * Swap a value here to re-theme everything * that references it, all at once. * 3. Typography — 4 font roles (sans/display/serif/mono), * size scale, weight, leading, tracking. * 4. Spacing — 4px base grid. * 5. Radius — named by role, not pixel value. * 6. Shadow — elevation + primary-glow + glass, all * derived from semantic RGB mirrors so * they stay correct if the theme changes. * 7. Motion — duration + easing curves. * 8. Layout — containers, fixed chrome sizes, borders. * * RULE: always reference Section 2+ (semantic) in actual CSS — * never a Section 1 primitive directly. This is what makes * re-theming and future dark-mode support a one-file change * instead of a find-and-replace across the whole codebase. * * PROVENANCE: the cream background, sage-green accent, and solid * black button values are anchored to real pixels sampled from * the live login and landing-page screenshots — not guessed. * ============================================================ */ :root { /* --------------------------------------------------------- 1. PRIMITIVE COLOR TOKENS Raw hue ramps, 17 steps each (50→850, light to dark). Never used directly in components — always referenced through a Section 2 semantic token. --------------------------------------------------------- */ /* Gray Shades */ --color-gray-50: rgba(250, 250, 250, 1); --color-gray-100: rgba(232, 232, 232, 1); --color-gray-150: rgba(213, 213, 213, 1); --color-gray-200: rgba(196, 196, 196, 1); --color-gray-250: rgba(178, 178, 178, 1); --color-gray-300: rgba(161, 161, 161, 1); --color-gray-350: rgba(144, 144, 144, 1); --color-gray-400: rgba(127, 127, 127, 1); --color-gray-450: rgba(111, 111, 111, 1); --color-gray-500: rgba(95, 95, 95, 1); --color-gray-550: rgba(80, 80, 80, 1); --color-gray-600: rgba(65, 65, 65, 1); --color-gray-650: rgba(51, 51, 51, 1); --color-gray-700: rgba(37, 37, 37, 1); --color-gray-750: rgba(24, 24, 24, 1); --color-gray-800: rgba(12, 12, 12, 1); --color-gray-850: rgba(3, 3, 3, 1); /* Cream Shades */ --color-cream-50: rgba(253, 249, 245, 1); --color-cream-100: rgba(238, 230, 222, 1); --color-cream-125: rgba(230, 221, 211, 1); --color-cream-150: rgba(222, 212, 200, 1); --color-cream-200: rgba(207, 193, 179, 1); --color-cream-250: rgba(191, 175, 158, 1); --color-cream-300: rgba(175, 158, 138, 1); --color-cream-350: rgba(160, 140, 119, 1); --color-cream-400: rgba(144, 124, 101, 1); --color-cream-450: rgba(128, 107, 84, 1); --color-cream-500: rgba(112, 91, 68, 1); --color-cream-550: rgba(96, 76, 54, 1); --color-cream-600: rgba(80, 62, 41, 1); --color-cream-650: rgba(64, 48, 29, 1); --color-cream-700: rgba(48, 34, 18, 1); --color-cream-750: rgba(33, 22, 8, 1); --color-cream-800: rgba(19, 10, 2, 1); --color-cream-850: rgba(6, 3, 0, 1); /* Rolex Green Shades */ --color-rolex-green-50: rgba(240, 247, 242, 1); --color-rolex-green-100: rgba(217, 231, 222, 1); --color-rolex-green-150: rgba(195, 216, 202, 1); --color-rolex-green-200: rgba(173, 200, 183, 1); --color-rolex-green-250: rgba(152, 185, 164, 1); --color-rolex-green-300: rgba(130, 169, 145, 1); --color-rolex-green-350: rgba(108, 154, 127, 1); --color-rolex-green-400: rgba(87, 140, 109, 1); --color-rolex-green-450: rgba(64, 125, 91, 1); --color-rolex-green-500: rgba(40, 110, 74, 1); --color-rolex-green-550: rgba(0, 96, 57, 1); --color-rolex-green-575: rgba(0, 87, 51, 1); --color-rolex-green-600: rgba(0, 78, 45, 1); --color-rolex-green-650: rgba(0, 61, 33, 1); --color-rolex-green-700: rgba(0, 44, 22, 1); --color-rolex-green-750: rgba(0, 28, 11, 1); --color-rolex-green-800: rgba(0, 14, 3, 1); --color-rolex-green-850: rgba(0, 3, 0, 1); /* RGB channel mirrors — for rgba()-driven opacity control */ /* Gray RGB Shades */ --color-gray-50-rgb: 250, 250, 250; --color-gray-100-rgb: 232, 232, 232; --color-gray-150-rgb: 213, 213, 213; --color-gray-200-rgb: 196, 196, 196; --color-gray-250-rgb: 178, 178, 178; --color-gray-300-rgb: 161, 161, 161; --color-gray-350-rgb: 144, 144, 144; --color-gray-400-rgb: 127, 127, 127; --color-gray-450-rgb: 111, 111, 111; --color-gray-500-rgb: 95, 95, 95; --color-gray-550-rgb: 80, 80, 80; --color-gray-600-rgb: 65, 65, 65; --color-gray-650-rgb: 51, 51, 51; --color-gray-700-rgb: 37, 37, 37; --color-gray-750-rgb: 24, 24, 24; --color-gray-800-rgb: 12, 12, 12; --color-gray-850-rgb: 3, 3, 3; /* Cream RGB Shades */ --color-cream-50-rgb: 253, 249, 245; --color-cream-100-rgb: 238, 230, 222; --color-cream-125-rgb: 230, 221, 211; --color-cream-150-rgb: 222, 212, 200; --color-cream-200-rgb: 207, 193, 179; --color-cream-250-rgb: 191, 175, 158; --color-cream-300-rgb: 175, 158, 138; --color-cream-350-rgb: 160, 140, 119; --color-cream-400-rgb: 144, 124, 101; --color-cream-450-rgb: 128, 107, 84; --color-cream-500-rgb: 112, 91, 68; --color-cream-550-rgb: 96, 76, 54; --color-cream-600-rgb: 80, 62, 41; --color-cream-650-rgb: 64, 48, 29; --color-cream-700-rgb: 48, 34, 18; --color-cream-750-rgb: 33, 22, 8; --color-cream-800-rgb: 19, 10, 2; --color-cream-850-rgb: 6, 3, 0; /* Rolex Green RGB Shades */ --color-rolex-green-50-rgb: 240, 247, 242; --color-rolex-green-100-rgb: 217, 231, 222; --color-rolex-green-150-rgb: 195, 216, 202; --color-rolex-green-200-rgb: 173, 200, 183; --color-rolex-green-250-rgb: 152, 185, 164; --color-rolex-green-300-rgb: 130, 169, 145; --color-rolex-green-350-rgb: 108, 154, 127; --color-rolex-green-400-rgb: 87, 140, 109; --color-rolex-green-450-rgb: 64, 125, 91; --color-rolex-green-500-rgb: 40, 110, 74; --color-rolex-green-550-rgb: 0, 96, 57; --color-rolex-green-575-rgb: 0, 87, 51; --color-rolex-green-600-rgb: 0, 78, 45; --color-rolex-green-650-rgb: 0, 61, 33; --color-rolex-green-700-rgb: 0, 44, 22; --color-rolex-green-750-rgb: 0, 28, 11; --color-rolex-green-800-rgb: 0, 14, 3; --color-rolex-green-850-rgb: 0, 3, 0; /* --------------------------------------------------------- 2. SEMANTIC COLOR TOKENS The only layer components should reference. Re-pointing a value here (e.g. for a dark theme) cascades everywhere automatically. Themes override this layer only. Current theme: Rolex-inspired light — warm cream surfaces, deep green brand accent. Every value below traces back to a Section 1 primitive; never hand a component a raw hex. --------------------------------------------------------- */ /* Backgrounds */ --color-background: var(--color-cream-125); --color-surface: var(--color-cream-150); /* Text */ --color-text: var(--color-gray-800); --color-text-secondary: var(--color-cream-500); --color-text-third: var(--color-rolex-green-600); --color-text-on-primary: var(--color-gray-100); /* Borders */ --color-border: var(--color-cream-200); /* Brand / Primary (Rolex green) — darkens on interaction */ --color-primary: var(--color-rolex-green-550); --color-primary-hover: var(--color-rolex-green-575); --color-primary-active: var(--color-rolex-green-600); /* Dark surfaces — for hero/cta bands that break from the light page */ --color-surface-dark-1: var(--color-rolex-green-600); --color-surface-dark-2: var(--color-rolex-green-800); /* Text on dark surfaces — for hero/platform-hero/cta bands. Three tiers by emphasis, all traced to Section 1 cream primitives so re-theming the dark bands is still a one-file change. */ --color-text-on-dark: var(--color-cream-50); --color-text-on-dark-secondary: var(--color-cream-150); --color-text-on-dark-tertiary: var(--color-cream-200); /* RGB mirrors — feed the rgba()-based shadow/glow tokens below. Keep these in lockstep with the primitives they mirror; a drift here silently breaks every shadow that depends on it (rgba() with an unresolved custom property is invalid at computed-value time). */ --color-text-rgb: var(--color-gray-800-rgb); --color-background-rgb: var(--color-cream-125-rgb); --color-surface-rgb: var(--color-cream-150-rgb); --color-primary-rgb: var(--color-rolex-green-500-rgb); --color-info-rgb: var(--color-rolex-green-500-rgb); /* --------------------------------------------------------- 3. TYPOGRAPHY TOKENS --------------------------------------------------------- */ /* Font Types */ --font-family-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-family-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Font Sizes */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px; --font-size-md: 18px; --font-size-lg: 20px; --font-size-xl: 24px; --font-size-2xl: 30px; --font-size-3xl: 36px; --font-size-4xl: 48px; --font-size-5xl: 60px; /* Font Weight */ --font-weight-100: 100; --font-weight-200: 200; --font-weight-300: 300; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; --font-weight-800: 800; --font-weight-900: 900; --font-weight-1000: 1000; /* Leading (line-height) */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Tracking (letter-spacing) */ --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; /* --------------------------------------------------------- 4. SPACING SCALE --------------------------------------------------------- */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-64: 64px; --space-80: 80px; --space-96: 96px; /* --------------------------------------------------------- 5. RADIUS SCALE --------------------------------------------------------- */ --radius-2xs: 2px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; --radius-circle: 50%; /* --------------------------------------------------------- 6. SHADOW TOKENS All ink-based shadows derive from --color-text-rgb so they stay correct if the theme changes. Primary-glow variants use --color-primary-rgb for "lit up" premium surfaces. --------------------------------------------------------- */ /* Elevation — neutral, ink-based (matches cream/gray background) */ --shadow-xs: 0 1px 2px rgba(var(--color-text-rgb), 0.04); --shadow-sm: 0 2px 6px rgba(var(--color-text-rgb), 0.06); --shadow-md: 0 6px 16px rgba(var(--color-text-rgb), 0.08); --shadow-lg: 0 12px 32px rgba(var(--color-text-rgb), 0.10); --shadow-xl: 0 24px 56px rgba(var(--color-text-rgb), 0.14); /* Inner shadow — pressed states, inset panels */ --shadow-inset: inset 0 1px 3px rgba(var(--color-text-rgb), 0.08); /* Focus ring — keyboard focus, matches --color-border-focus */ --shadow-focus-ring: 0 0 0 4px rgba(var(--color-info-rgb), 0.18); /* Primary glow — sage green, for buttons/cards that need to feel "lit" */ --shadow-glow-primary-sm: 0 0 24px rgba(var(--color-primary-rgb), 0.25); --shadow-glow-primary-md: 0 0 0 1px rgba(var(--color-primary-rgb), 0.2), 0 12px 32px -12px rgba(var(--color-primary-rgb), 0.45); --shadow-glow-primary-lg: 0 0 0 1px rgba(var(--color-primary-rgb), 0.3), 0 16px 48px -12px rgba(var(--color-primary-rgb), 0.6); /* Glass — for glassmorphism panels, pairs with --color-surface-glass */ --shadow-glass: 0 8px 32px rgba(var(--color-text-rgb), 0.10), inset 0 1px 0 rgba(var(--color-background-rgb), 0.6); /* --------------------------------------------------------- 7. MOTION TOKENS --------------------------------------------------------- */ /* Duration */ --duration-instant: 100ms; /* toggles, checkboxes, tiny state flips */ --duration-fast: 150ms; /* hover, button press feedback */ --duration-base: 200ms; /* default — most transitions */ --duration-slow: 300ms; /* dropdowns, tab switches, accordions */ --duration-slower: 380ms; /* modals, drawers, page-level transitions */ /* Easing */ --ease-standard: ease; /* CSS default — use sparingly */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* fast start, gentle stop — most UI motion, elements entering */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric — modals/panels appearing + disappearing */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot — use sparingly, e.g. success checkmarks */ /* --------------------------------------------------------- 8. LAYOUT TOKENS --------------------------------------------------------- */ /* Containers */ --container-max-narrow: 768px; /* text-heavy pages — docs, blog posts, long-form reading */ --container-max: 1280px; /* default page width */ --container-max-wide: 1440px; /* wide layouts — dashboards, tables */ /* Fixed chrome dimensions */ --size-nav-height: 72px; --size-sidebar-width: 280px; --size-footer-height: 240px; /* Border widths */ --border-width-thin: 1px; /* default hairline — cards, inputs, dividers */ --border-width-medium: 2px; /* emphasized dividers, active tab underline */ --border-width-thick: 4px; /* rare — strong focus states, callout borders */ }