/* ================================================================ Olvio Design System — colors & type foundations v1.0 — 2026 Source of truth: olvio-design-system.pdf + widget-src/chat/styles.css ================================================================ */ /* ---- Fonts ---- - DM Sans: locally hosted variable font (opsz + wght axes). - Plus Jakarta Sans: locally hosted variable font (wght axis). */ @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 1000; font-stretch: 75% 125%; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------- CORE BRAND COLORS — always available, both modes ------------------------------------------------------------- */ --olvio-violet: #7B3FE4; /* Primary / CTA / Links */ --olvio-violet-deep: #5F2BC9; /* Hover & focus states */ --olvio-violet-light: #A678FF; /* Gradient end / soft UI */ --olvio-mint: #00D68F; /* Live / Streaming / Success */ --olvio-coral: #FF5252; /* Errors / Alerts / Destructive */ /* ------------------------------------------------------------- DARK MODE — surfaces & text Page bg: Void. Cards: Abyss. Inputs/hover: Deep. ------------------------------------------------------------- */ --olvio-void: #08060F; /* Background principal */ --olvio-abyss: #100D22; /* Cards / Panels */ --olvio-deep: #161228; /* Inputs / Hover */ --olvio-shadow: #1E1A36; /* Borders dark */ --olvio-dusk: #2A2548; /* Borders elevated */ --olvio-ghost: #F0EEF8; /* Primary text dark */ --olvio-haze: #9694B4; /* Secondary text dark */ --olvio-muted: #6E6C8A; /* Tertiary / Labels */ /* ------------------------------------------------------------- LIGHT MODE — surfaces & text Page bg: Cloud. Cards: Pearl. Borders: Mist. ------------------------------------------------------------- */ --olvio-cloud: #F7F6FF; /* Page background */ --olvio-pearl: #FDFCFF; /* Cards / Surfaces */ --olvio-mist: #E3E0F5; /* Borders / Dividers */ --olvio-border-soft: #F0EEF8; /* Subtle dividers */ --olvio-ink: #0E0C1B; /* Text primary */ --olvio-slate: #6E6C8A; /* Text secondary */ /* ------------------------------------------------------------- SEMANTIC TOKENS (default = LIGHT mode) Reassigned under [data-theme="dark"] below. ------------------------------------------------------------- */ --bg: var(--olvio-cloud); --bg-card: var(--olvio-pearl); --bg-input: var(--olvio-pearl); --bg-hover: var(--olvio-border-soft); --fg1: var(--olvio-ink); --fg2: var(--olvio-slate); --fg3: var(--olvio-muted); --fg-on-accent: #FFFFFF; --border: var(--olvio-mist); --border-soft: var(--olvio-border-soft); --border-strong: var(--olvio-dusk); --accent: var(--olvio-violet); --accent-hover: var(--olvio-violet-deep); --accent-light: var(--olvio-violet-light); --success: var(--olvio-mint); --error: var(--olvio-coral); /* ------------------------------------------------------------- SIGNATURE GRADIENT — hero titles, clip to text only Never fill backgrounds with this. ------------------------------------------------------------- */ --grad-hero-text: linear-gradient(135deg, #F0EEF8 0%, #A678FF 100%); /* Brand hero radial — the only "background gradient" allowed, used on dark hero sections only (see _index/styles.module.css). */ --grad-hero-bg: radial-gradient(ellipse 800px 600px at 50% 20%, rgba(123, 63, 228, 0.18), transparent 60%), radial-gradient(ellipse 600px 400px at 80% 80%, rgba( 0, 214, 143, 0.08), transparent 60%), var(--olvio-void); /* ------------------------------------------------------------- SPACING — 4px base grid ------------------------------------------------------------- */ --space-1: 4px; /* icon-to-label, micro gaps */ --space-2: 8px; /* internal element gaps */ --space-3: 12px; /* button padding (V), chip padding */ --space-4: 16px; /* base — text element margins */ --space-5: 24px; /* card padding, component gaps */ --space-6: 32px; /* section internals */ --space-7: 48px; /* between major components */ --space-8: 64px; /* section padding (V) desktop */ --space-9: 96px; /* hero sections, large breaks */ /* ------------------------------------------------------------- RADIUS ------------------------------------------------------------- */ --r-xs: 4px; /* badges, inline tags */ --r-sm: 6px; /* inputs, small components */ --r-md: 12px; /* cards, panels, popovers, bubbles */ --r-lg: 20px; /* modals, large cards, widgets */ --r-pill: 9999px; /* buttons CTA, avatars, chips, inputs*/ /* ------------------------------------------------------------- SHADOWS The brand-correct shadow is violet-tinted, not gray. ------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(14, 12, 27, 0.06); --shadow-md: 0 4px 16px rgba(123, 63, 228, 0.12); --shadow-lg: 0 8px 24px rgba(123, 63, 228, 0.30); --shadow-xl: 0 12px 28px rgba(123, 63, 228, 0.40); --shadow-panel: -8px 0 32px rgba(123, 63, 228, 0.16); /* docked panel */ /* ------------------------------------------------------------- TYPOGRAPHY — base Display: Plus Jakarta Sans (700, 800) Body / UI: DM Sans (400, 500, 600, 700) ------------------------------------------------------------- */ --font-display: "Plus Jakarta Sans", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ------------------------------------------------------------- TYPE SCALE TOKENS ------------------------------------------------------------- */ --display-size: 64px; --display-weight: 800; --display-track: -2.5px; --display-lh: 1.05; --h1-size: 48px; --h1-weight: 800; --h1-track: -1.5px; --h1-lh: 1.10; --h2-size: 36px; --h2-weight: 700; --h2-track: -1px; --h2-lh: 1.15; --h3-size: 28px; --h3-weight: 700; --h3-track: -0.5px; --h3-lh: 1.20; --h4-size: 22px; --h4-weight: 700; --h4-track: -0.3px; --h4-lh: 1.25; --body-l-size: 18px; --body-l-weight: 400; --body-l-lh: 1.65; --body-size: 16px; --body-weight: 400; --body-lh: 1.65; --body-s-size: 14px; --body-s-weight: 400; --body-s-lh: 1.60; --label-size: 12px; --label-weight: 600; --label-track: 1px; --label-lh: 1.5; --button-size: 15px; --button-weight: 600; --button-track: 0.2px; --button-lh: 1; } /* ---------------------------------------------------------------- DARK MODE OVERRIDES Apply with (or body, or any wrapper). The marketing landing + the dark panels in the BO Conversations detail use this. ---------------------------------------------------------------- */ [data-theme="dark"] { --bg: var(--olvio-void); --bg-card: var(--olvio-abyss); --bg-input: var(--olvio-deep); --bg-hover: var(--olvio-deep); --fg1: var(--olvio-ghost); --fg2: var(--olvio-haze); --fg3: var(--olvio-muted); --border: var(--olvio-shadow); --border-soft: var(--olvio-shadow); --border-strong:var(--olvio-dusk); } /* ---------------------------------------------------------------- SEMANTIC ELEMENT STYLES Use these directly OR pull the tokens into your own selectors. ---------------------------------------------------------------- */ html, body { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display { font-family: var(--font-display); color: var(--fg1); margin: 0; text-wrap: balance; } .display { font-size: var(--display-size); font-weight: var(--display-weight); letter-spacing: var(--display-track); line-height: var(--display-lh); } h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); line-height: var(--h1-lh); } h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); line-height: var(--h2-lh); } h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-track); line-height: var(--h3-lh); } h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); letter-spacing: var(--h4-track); line-height: var(--h4-lh); } p { margin: 0 0 var(--space-4); text-wrap: pretty; } p.body-l { font-size: var(--body-l-size); line-height: var(--body-l-lh); color: var(--fg2); } p.body-s, small { font-size: var(--body-s-size); line-height: var(--body-s-lh); color: var(--fg2); } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-hover); } /* Inline label / overline — UPPERCASE 12px */ .label, .overline { font-family: var(--font-body); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); line-height: var(--label-lh); text-transform: uppercase; color: var(--accent); } /* Hero gradient text — H1 on dark only, clipped to text */ .hero-grad { background: var(--grad-hero-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } code, pre, .mono { font-family: var(--font-mono); font-size: 0.94em; } /* Selection */ ::selection { background: var(--accent); color: #fff; }