/** * Edgeless Lab Design System -- CSS Custom Properties * * Self-contained token file. Drop into any project for the full palette, * typography, spacing, radius, shadows, motion, z-index, and breakpoints. * * Dark-first: :root IS the dark theme. A [data-theme="light"] override * is provided but the system is designed dark-default. * * Reference quality: Vercel, Linear, Raycast * Principles: High contrast, generous whitespace, purposeful motion */ /* ── Fonts ──────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Dark Theme (default) ───────────────────────────────────────────── */ :root { /* ── Colors / Background ─────────────────────────────────────────── */ --color-bg-primary: #0a0a0a; /* Void Black — deepest surface */ --color-bg-secondary: #111111; /* Elevated surfaces */ --color-bg-tertiary: #1a1a1a; /* Subtle distinction */ --color-bg-elevated: #222222; /* Cards, modals */ /* ── Colors / Foreground ─────────────────────────────────────────── */ --color-fg-primary: #ffffff; /* 100 % luminance */ --color-fg-secondary: rgba(255, 255, 255, 0.7); /* Body text */ --color-fg-tertiary: rgba(255, 255, 255, 0.5); /* Muted */ --color-fg-quaternary: rgba(255, 255, 255, 0.25); /* Disabled, hints */ /* ── Colors / Accent ─────────────────────────────────────────────── */ --color-accent-primary: #6366f1; /* Indigo 500 */ --color-accent-secondary: #8b5cf6; /* Violet 500 */ --color-accent-tertiary: #06b6d4; /* Cyan 500 */ --color-accent-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%); /* ── Colors / Nous Blue Palette (Brand Booklet 2024) ───────────── */ --color-nous-deepest: #0b1628; /* Very dark navy/black */ --color-nous-midnight: #101a30; /* Midnight navy */ --color-nous-deep-ocean: #0a1f38; /* Deep ocean blue */ --color-nous-dark-teal-navy: #0f2838; /* Dark teal-navy */ --color-nous-very-dark-teal: #0a2a38; /* Very dark teal */ --color-nous-deep-cyan-teal: #0a3a4a; /* Deep cyan-teal */ --color-nous-dark-navy-teal: #0e2f4a; /* Dark navy-teal */ --color-nous-dusty-steel: #1e3a5a; /* Dusty steel blue */ --color-nous-muted-grayish: #2a4a5a; /* Muted grayish blue */ --color-nous-muted-dusty: #1a3a5a; /* Muted dusty blue */ --color-nous-medium-teal: #1a5a6a; /* Medium teal-cerulean */ --color-nous-medium-cyan: #1a5a6a; /* Medium cyan-teal */ --color-nous-bright-cerulean: #0a6a8a; /* Bright cerulean */ --color-nous-sky: #4a9aba; /* Light bright sky blue */ --color-nous-very-light-sky: #6aacca; /* Very light sky blue */ --color-nous-pale-icy: #8abada; /* Pale icy blue */ --color-nous-pale-blue-gray: #aacada; /* Pale blue-gray */ --color-nous-very-pale: #c8dce8; /* Very pale gray-blue */ --color-nous-frost: #e0eef0; /* Lightest frost */ /* ── Colors / Nous Duotone (Cyanotype Filter) ──────────────────── */ --color-nous-duotone-shadow: #0f1f3d; /* Shadow side */ --color-nous-duotone-highlight: #6abfdf; /* Highlight side */ /* ── Colors / Semantic ───────────────────────────────────────────── */ --color-success: #22c55e; /* Green 500 */ --color-warning: #f59e0b; /* Amber 500 */ --color-error: #ef4444; /* Red 500 */ --color-info: #3b82f6; /* Blue 500 */ /* ── Colors / Border ─────────────────────────────────────────────── */ --color-border-subtle: rgba(255, 255, 255, 0.08); /* 8 % */ --color-border-default: rgba(255, 255, 255, 0.12); /* 12 % */ --color-border-strong: rgba(255, 255, 255, 0.2); /* 20 % */ /* ── Typography / Font Families ──────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-display: 'Cal Sans', 'Inter', sans-serif; --font-intel: 'Courier New', 'Courier Prime', monospace; --font-editorial: 'Helvetica Now Text', 'Inter Tight', sans-serif; --font-serif: 'Playfair Display', 'Instrument Serif', Georgia, serif; --font-bitmap: 'Chicago', 'ChicagoFLF', monospace; /* ── Typography / Font Sizes & Line Heights ──────────────────────── */ --text-xs: 0.75rem; /* 12 px */ --text-xs-lh: 1rem; --text-sm: 0.875rem; /* 14 px */ --text-sm-lh: 1.25rem; --text-base: 1rem; /* 16 px */ --text-base-lh: 1.5rem; --text-lg: 1.125rem; /* 18 px */ --text-lg-lh: 1.75rem; --text-xl: 1.25rem; /* 20 px */ --text-xl-lh: 1.75rem; --text-2xl: 1.5rem; /* 24 px */ --text-2xl-lh: 2rem; --text-3xl: 1.875rem; /* 30 px */ --text-3xl-lh: 2.25rem; --text-4xl: 2.25rem; /* 36 px */ --text-4xl-lh: 2.5rem; --text-5xl: 3rem; /* 48 px */ --text-5xl-lh: 1.1; --text-6xl: 3.75rem; /* 60 px */ --text-6xl-lh: 1.1; --text-7xl: 4.5rem; /* 72 px */ --text-7xl-lh: 1.05; /* ── Typography / Font Weights ───────────────────────────────────── */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ── Typography / Letter Spacing ─────────────────────────────────── */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* ── Spacing (4 px base grid) ────────────────────────────────────── */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2 px */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.25rem; /* 20 px */ --space-6: 1.5rem; /* 24 px */ --space-8: 2rem; /* 32 px */ --space-10: 2.5rem; /* 40 px */ --space-12: 3rem; /* 48 px */ --space-16: 4rem; /* 64 px */ --space-20: 5rem; /* 80 px */ --space-24: 6rem; /* 96 px */ --space-32: 8rem; /* 128 px */ --space-40: 10rem; /* 160 px */ --space-48: 12rem; /* 192 px */ --space-56: 14rem; /* 224 px */ --space-64: 16rem; /* 256 px */ /* ── Border Radius ───────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 0.25rem; /* 4 px */ --radius-md: 0.5rem; /* 8 px */ --radius-lg: 0.75rem; /* 12 px */ --radius-xl: 1rem; /* 16 px */ --radius-2xl: 1.5rem; /* 24 px */ --radius-full: 9999px; /* Pills, circles */ /* ── Shadows (tuned for dark backgrounds) ────────────────────────── */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); --shadow-glow-lg: 0 0 40px rgba(99, 102, 241, 0.4); /* ── Motion / Duration ───────────────────────────────────────────── */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; /* ── Motion / Easing ─────────────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-Index Scale ───────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-popover: 400; --z-toast: 500; --z-tooltip: 600; /* ── Breakpoints (reference values for media queries) ────────────── */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; } /* ── Light Theme Override ───────────────────────────────────────────── */ [data-theme="light"] { --color-bg-primary: #ffffff; --color-bg-secondary: #f5f5f5; --color-bg-tertiary: #e5e5e5; --color-bg-elevated: #ffffff; --color-fg-primary: #0a0a0a; --color-fg-secondary: rgba(0, 0, 0, 0.7); --color-fg-tertiary: rgba(0, 0, 0, 0.5); --color-fg-quaternary: rgba(0, 0, 0, 0.25); --color-border-subtle: rgba(0, 0, 0, 0.06); --color-border-default: rgba(0, 0, 0, 0.12); --color-border-strong: rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15); --shadow-glow-lg: 0 0 40px rgba(99, 102, 241, 0.2); }