/* ============================================================ CONTROL DESIGN SYSTEM — Colors & Type tokens Source of truth: /control_marketing_designsystem.fig ============================================================ */ /* ---- Fonts ---- ONE family across the entire system: **Outfit** (loaded from Google Fonts in index.html). Display + UI + numerics all share weights from the same family. */ :root { /* ============================================================ COLOR — NEUTRALS (the dark spine of the product) The product is dark-first; these are layered to build depth. ============================================================ */ --ctrl-neutral-900: #131313; /* BG (app background) */ --ctrl-neutral-800: #1A1919; /* Side menu (panels & rails) */ --ctrl-neutral-700: #262626; /* Surface (cards, modals) */ --ctrl-neutral-600: #373737; /* Input (fields, inset chips) */ --ctrl-neutral-500: #4F4F4F; /* Buttons (secondary buttons) */ --ctrl-neutral-400: #535353; /* Tooltips */ --ctrl-neutral-300: #606060; /* Stroke / btn hover */ --ctrl-neutral-200: #929292; /* Text gray (labels, subtle text) */ --ctrl-neutral-100: #E0E0E0; /* Text (body on dark) */ --ctrl-white: #FFFFFF; --ctrl-black: #000000; /* ============================================================ COLOR — PRIMARY (the only "interactive" hue) Use sparingly: brand mark backplate, primary CTAs, links. ============================================================ */ --ctrl-primary-700: #7A4ED9; /* Buttons (default CTA) */ --ctrl-primary-600: #8F69E3; /* Buttons hover */ --ctrl-primary-500: #BFA1FF; /* Mid lavender (chips, surfaces) */ --ctrl-primary-100: #DBD0FF; /* Pale lavender (large widget surfaces) */ /* ============================================================ COLOR — BRAND ACCENTS (6) Reserved for MARKETING surfaces — section blocks, social cards, badges, hero illustrations. **NEVER on widget tiles or app chrome.** Always paired with near-black text. ============================================================ */ --ctrl-accent-violet: #AC86FF; --ctrl-accent-blue: #A3BEFF; --ctrl-accent-yellow: #F0FF31; --ctrl-accent-cyan: #B2FFFE; --ctrl-accent-coral: #F88468; --ctrl-accent-pink: #DA9CFF; /* ============================================================ SEMANTIC / FOREGROUND ============================================================ */ --ctrl-bg: var(--ctrl-neutral-900); --ctrl-bg-elevated: var(--ctrl-neutral-700); --ctrl-bg-input: var(--ctrl-neutral-600); --ctrl-fg: var(--ctrl-neutral-100); --ctrl-fg-muted: var(--ctrl-neutral-200); --ctrl-fg-subtle: #606060; --ctrl-fg-on-accent: var(--ctrl-neutral-900); --ctrl-border: var(--ctrl-neutral-300); --ctrl-border-faint: rgba(255,255,255,0.06); /* ============================================================ RADIUS — 8px is the workhorse; smaller for inset chips ============================================================ */ --ctrl-radius-xs: 3px; /* tiny inner chips */ --ctrl-radius-sm: 5px; /* menu items, small tabs */ --ctrl-radius-md: 8px; /* buttons, primary chips */ --ctrl-radius-lg: 10px; /* modals, settings panels */ --ctrl-radius-xl: 13px; /* widget cards, dialogs */ --ctrl-radius-2xl: 16px; /* marketing surfaces, logo */ --ctrl-radius-pill: 999px; /* ============================================================ SHADOWS — soft directional lift; only on floating chrome ============================================================ */ --ctrl-shadow-pop: -13px 16px 27px 0 rgba(0,0,0,0.3); /* menus, modals */ --ctrl-shadow-flat: 0 4px 4px 0 rgba(0,0,0,0.25); /* white-on-dark */ --ctrl-shadow-switch: 0 4px 10px 0 rgba(0,0,0,0.15); /* knobs */ /* ============================================================ SPACING — 4 / 6 / 8 / 12 / 15 / 20 / 24 (Figma uses 15/20) ============================================================ */ --ctrl-space-1: 4px; --ctrl-space-2: 6px; --ctrl-space-3: 8px; --ctrl-space-4: 12px; --ctrl-space-5: 15px; /* primary gap inside cards */ --ctrl-space-6: 20px; /* gutter between widgets */ --ctrl-space-7: 24px; /* between groups */ --ctrl-space-8: 32px; --ctrl-space-12: 48px; --ctrl-space-16: 64px; --ctrl-space-24: 96px; /* ============================================================ TYPOGRAPHY — ONE family, single source of truth. Outfit handles display, UI, body, captions — separation comes from weight (700 vs 500 vs 400) and size, not from family. ============================================================ */ --ctrl-font-display: "Outfit", system-ui, sans-serif; --ctrl-font-ui: "Outfit", system-ui, sans-serif; --ctrl-font-mono: "Outfit", ui-monospace, monospace; /* DISPLAY scale — for marketing & hero blocks Letter-spacing always +3%; line-height 0.98 for stacked impact. */ --ctrl-display-xxl: 192px; --ctrl-display-xl: 132px; --ctrl-display-lg: 96px; --ctrl-display-md: 64px; --ctrl-display-sm: 48px; /* HEADING scale */ --ctrl-h1: 36px; --ctrl-h2: 28px; --ctrl-h3: 20px; --ctrl-h4: 16px; /* BODY scale */ --ctrl-body-lg: 16px; --ctrl-body: 15px; --ctrl-body-sm: 13px; --ctrl-caption: 11px; } /* ------------------------------------------------------------ SEMANTIC TYPE — drop on any element to inherit role styling ------------------------------------------------------------ */ .ctrl-display-xxl, .ctrl-display-xl, .ctrl-display-lg, .ctrl-display-md, .ctrl-display-sm { font-family: var(--ctrl-font-display); font-weight: 500; line-height: 0.98; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; } .ctrl-display-xxl { font-size: var(--ctrl-display-xxl); } .ctrl-display-xl { font-size: var(--ctrl-display-xl); } .ctrl-display-lg { font-size: var(--ctrl-display-lg); } .ctrl-display-md { font-size: var(--ctrl-display-md); } .ctrl-display-sm { font-size: var(--ctrl-display-sm); } .ctrl-h1, .ctrl-h2, .ctrl-h3, .ctrl-h4 { font-family: var(--ctrl-font-ui); font-weight: 500; line-height: 1.15; letter-spacing: 0.005em; margin: 0; } .ctrl-h1 { font-size: var(--ctrl-h1); line-height: 1.1; } .ctrl-h2 { font-size: var(--ctrl-h2); } .ctrl-h3 { font-size: var(--ctrl-h3); letter-spacing: 0.015em; } .ctrl-h4 { font-size: var(--ctrl-h4); } .ctrl-body, .ctrl-body-lg, .ctrl-body-sm { font-family: var(--ctrl-font-ui); font-weight: 500; line-height: 1.4; margin: 0; } .ctrl-body-lg { font-size: var(--ctrl-body-lg); } .ctrl-body { font-size: var(--ctrl-body); } .ctrl-body-sm { font-size: var(--ctrl-body-sm); } .ctrl-label { font-family: var(--ctrl-font-ui); font-weight: 700; font-size: var(--ctrl-body); line-height: 1; color: var(--ctrl-neutral-200); } .ctrl-caption { font-family: var(--ctrl-font-ui); font-weight: 500; font-size: var(--ctrl-caption); line-height: 1; letter-spacing: 0.01em; color: var(--ctrl-neutral-200); } .ctrl-button-text { font-family: var(--ctrl-font-ui); font-weight: 700; font-size: var(--ctrl-body); line-height: 1; } /* ------------------------------------------------------------ DEFAULTS — when this file is the only stylesheet on a page ------------------------------------------------------------ */ html, body { background: var(--ctrl-bg); color: var(--ctrl-fg); font-family: var(--ctrl-font-ui); font-weight: 500; font-size: var(--ctrl-body); line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }