/* ============================================================ INTELLABEL — Design Tokens Unified Data Operations Platform for Computer Vision ============================================================ */ /* ---------- Fonts ---------- Sourced to match intellabel.com: - Sora for UI + display (matches the Webflow Flock Ramp template the site is built on) - Jura for the logo lockup (matches the hairline geometric wordmark + disconnected-E glyph) - JetBrains Mono for product metrics / IDs / code */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=Jura:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ============================================================ COLOR SYSTEM The logo is monochrome. The palette honors this by leading with a near-black + clean neutrals. Accents are reserved and functional — a signal cyan for interactive/AI, an amber for annotation in-progress, a green for validated. ============================================================ */ /* --- Core ink / ground --- */ --ink-0: #000000; /* pure black — logo primary */ --ink-1: #0B0C0E; /* app bg, darkest surface */ --ink-2: #15171A; /* raised surface on dark */ --ink-3: #1E2125; /* higher surface */ --ink-4: #2A2E33; /* hover on dark */ --ink-5: #3A3F46; /* divider on dark */ /* --- Paper / light neutrals --- */ --paper-0: #FFFFFF; /* pure white */ --paper-1: #FAFAFA; /* app bg (light) */ --paper-2: #F2F3F4; /* subtle fill */ --paper-3: #E6E8EB; /* border / divider */ --paper-4: #CFD3D8; /* stronger border */ /* --- Neutral scale (warm graphite, matches logo gray) --- */ --n-50: #F7F8F9; --n-100: #EDEEF0; --n-200: #DCDEE2; --n-300: #B9BDC4; --n-400: #8A8F97; /* matches logo-gray variant */ --n-500: #626870; --n-600: #464B52; --n-700: #2F3338; --n-800: #1E2125; --n-900: #0F1114; /* --- Brand (from intellabel.com style guide) --- */ --brand: #6958E2; /* primary purple — the Intellabel brand color */ --brand-d: #4E3ED0; /* pressed / hover-darker */ --brand-l: #8A7BEC; /* hover-lighter / tints */ --brand-50: #F0EEFC; /* soft brand tint for backgrounds */ --brand-ink: #171E2C; /* dark navy ink — used in text and surfaces */ --brand-night: #050A14; /* near-black background */ /* --- Signal accents (reserved, functional) --- */ --signal-red: #FF2626; /* error / rejected — from brand guide */ --signal-cyan: #00D4FF; /* AI / interactive / focus */ --signal-cyan-d: #00A8CC; --signal-cyan-l: #7FEFFF; --signal-amber: #FFB020; /* in-progress */ --signal-green: #22C55E; /* validated */ --signal-violet: #8B5CF6; /* auto-generated */ /* --- Annotation palette (for bounding boxes, masks, classes) --- */ --anno-1: #00D4FF; --anno-2: #FF3D71; --anno-3: #22C55E; --anno-4: #FFB020; --anno-5: #8B5CF6; --anno-6: #00E5A0; --anno-7: #FF6B2B; --anno-8: #4A7BFF; /* ============================================================ SEMANTIC TOKENS — light theme (default) ============================================================ */ --bg: var(--paper-1); --bg-elevated: var(--paper-0); --bg-sunken: var(--paper-2); --bg-inverse: var(--ink-1); --fg-1: var(--ink-1); /* primary text */ --fg-2: var(--n-600); /* secondary text */ --fg-3: var(--n-500); /* tertiary / captions */ --fg-4: var(--n-400); /* disabled / hint */ --fg-inverse: var(--paper-0); --border: var(--paper-3); --border-strong: var(--paper-4); --border-focus: var(--signal-cyan); --accent: var(--brand); --accent-fg: #FFFFFF; --success: var(--signal-green); --warning: var(--signal-amber); --danger: var(--signal-red); --ai: var(--signal-violet); /* ============================================================ TYPOGRAPHY — matches intellabel.com style guide ============================================================ */ --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Sora', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --font-wordmark: 'Jura', 'Sora', ui-sans-serif, sans-serif; /* Type scale — pulled directly from the style guide */ --fs-link: 14px; /* Link Text · Regular */ --fs-p3: 16px; /* Paragraph 03 · Medium */ --fs-p2: 18px; /* Paragraph 02 · Regular */ --fs-p1: 20px; /* Paragraph 01 · Medium */ --fs-h6: 22px; /* H6 · Medium */ --fs-h5: 24px; /* H5 · Medium */ --fs-h4: 30px; /* H4 · Medium */ --fs-h3: 36px; /* H3 · Medium */ --fs-h2: 56px; /* H2 · Bold */ --fs-h1: 86px; /* H1 · Bold */ /* Back-compat aliases used by earlier preview cards */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 36px; --fs-4xl: 56px; --fs-5xl: 86px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; /* for display, matching logo */ --tracking-widest: 0.22em; /* for labels / eyebrows */ /* ============================================================ SPACING (4px base) ============================================================ */ --s-0: 0; --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 64px; --s-12: 80px; --s-13: 120px; /* ============================================================ RADII — restrained. Technical tools don't over-round. ============================================================ */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --radius-4: 8px; --radius-5: 12px; --radius-pill: 999px; /* ============================================================ SHADOWS — subtle, technical. No big drop shadows. ============================================================ */ --shadow-1: 0 1px 2px rgba(11, 12, 14, 0.04), 0 0 0 1px rgba(11, 12, 14, 0.04); --shadow-2: 0 2px 4px rgba(11, 12, 14, 0.06), 0 0 0 1px rgba(11, 12, 14, 0.05); --shadow-3: 0 8px 20px rgba(11, 12, 14, 0.08), 0 0 0 1px rgba(11, 12, 14, 0.06); --shadow-4: 0 16px 40px rgba(11, 12, 14, 0.12), 0 0 0 1px rgba(11, 12, 14, 0.06); --shadow-glow: 0 0 0 2px rgba(0, 212, 255, 0.25); /* ============================================================ MOTION — snappy, technical. No bounce. ============================================================ */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.3, 1); --ease-linear: linear; --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; /* ============================================================ LAYOUT ============================================================ */ --grid-unit: 8px; --container-sm: 720px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1440px; } /* ============================================================ DARK THEME (the app's primary working theme) ============================================================ */ [data-theme="dark"] { --bg: var(--ink-1); --bg-elevated: var(--ink-2); --bg-sunken: var(--ink-0); --bg-inverse: var(--paper-0); --fg-1: #F2F3F4; --fg-2: #B9BDC4; --fg-3: #8A8F97; --fg-4: #626870; --fg-inverse: var(--ink-1); --border: #2A2E33; --border-strong: #3A3F46; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-4: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08); } *, *::before, *::after { box-sizing: border-box; }