/* ========================================================================== iBOS BRAND SYSTEM — DESIGN TOKENS (master) SINGLE SOURCE OF TRUTH for colour, type, radius, shadow and gradients. Master file: /ibos-brand-kit/tokens.css Identical copies: /wwe-rs-premium/ibos/css/tokens.css · /ibos-deepdive-v3/css/tokens.css (and later the iBOS dashboard). Edit the master, then run /ibos-brand-kit/_build/sync-tokens.sh to copy it everywhere. Rules: /ibos-brand-kit/README.md and /ibos-deepdive-v3/BRAND-SYSTEM.md ========================================================================== */ :root { /* ---------- Neutrals (near-black, no blue/teal tint) ---------- */ --c-bg-0: #07080A; /* deepest — letterbox, modal backdrop base */ --c-bg-1: #0A0B0F; /* page background */ --c-bg-2: #111318; /* raised background / sections */ --c-surface-1: #14161C; /* card base */ --c-surface-2: #1A1C23; /* elevated card / hover */ --c-surface-3: #22252E; /* controls, inputs */ --c-text: #F5F5F7; /* headlines, key numbers */ --c-text-2: #C9CAD1; /* body copy */ --c-text-muted: #9A9CA5; /* secondary copy, headline contrast phrase */ --c-text-dim: #7A7C86; /* tertiary labels (min. 4.5:1 on bg-1) */ --c-hairline: rgba(255, 255, 255, 0.08); /* default 1px card border */ --c-hairline-2: rgba(255, 255, 255, 0.12); /* controls / emphasised border */ --c-hairline-3: rgba(255, 255, 255, 0.20); /* hover / focus border */ /* ---------- Brand hues (colour lives in cards & glows) ---------- */ --c-coral: #FF7A45; --c-coral-rgb: 255, 122, 69; /* warm · content, creative, people */ --c-coral-soft: #FF9D75; /* coral for text on dark */ --c-violet: #6B5BFF; --c-violet-rgb: 107, 91, 255; /* intelligence · data · system */ --c-violet-soft: #9B90FF; /* violet for text / lines on dark */ --c-teal: #2EC4B6; --c-teal-rgb: 46, 196, 182; /* restrained · live / performance data (approved = --c-success) */ /* ---------- Semantic ---------- There is NO gold / yellow in the brand. Management decisions (YOU DECIDE, Approve, awaiting decision, sign-off) use the soft coral accent. */ --c-decision: #FF9D75; --c-decision-rgb: 255, 157, 117; /* = --c-coral-soft · brand accent text + decision colour */ --c-decision-ink: #2A1208; /* dark text on a filled decision button */ --c-danger: #F0616D; --c-danger-rgb: 240, 97, 109; /* risk, decline */ /* ---------- Gradients ---------- */ --g-brand: linear-gradient(90deg, #FF7A45 0%, #C165B8 50%, #6B5BFF 100%); /* bars, progress, dot-matrix */ --g-decision: linear-gradient(180deg, #FFB293 0%, #FF9D75 100%); /* filled Approve / approved state */ --g-card: linear-gradient(180deg, rgba(26, 28, 35, 0.92) 0%, rgba(17, 19, 24, 0.92) 100%); --g-card-solid: linear-gradient(180deg, #1A1C23 0%, #131419 100%); --g-disc: radial-gradient(circle at 50% 30%, #1E2028 0%, #0E0F13 75%); /* Soft radial washes that give each card family its hue */ --wash-coral: radial-gradient(110% 90% at 100% 0%, rgba(255, 122, 69, 0.20) 0%, rgba(255, 122, 69, 0) 58%); --wash-violet: radial-gradient(110% 90% at 100% 0%, rgba(107, 91, 255, 0.24) 0%, rgba(107, 91, 255, 0) 58%); --wash-teal: radial-gradient(110% 90% at 100% 0%, rgba(46, 196, 182, 0.15) 0%, rgba(46, 196, 182, 0) 55%); --wash-decision: radial-gradient(110% 90% at 100% 0%, rgba(255, 157, 117, 0.16) 0%, rgba(255, 157, 117, 0) 58%); --wash-mix: radial-gradient(90% 80% at 100% 0%, rgba(255, 122, 69, 0.17) 0%, rgba(255, 122, 69, 0) 55%), radial-gradient(90% 80% at 0% 100%, rgba(107, 91, 255, 0.20) 0%, rgba(107, 91, 255, 0) 55%); /* Halftone dot texture (used in a card corner) */ --halftone: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px); --halftone-size: 9px 9px; /* ---------- Radius ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; /* default card */ --r-xl: 28px; --r-pill: 999px; /* ---------- Shadow ---------- */ --sh-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 10px 24px -12px rgba(0, 0, 0, 0.6); --sh-float: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 50px 110px -40px rgba(0, 0, 0, 0.95); --sh-glow-violet: 0 0 0 1px rgba(107, 91, 255, 0.35), 0 0 48px -8px rgba(107, 91, 255, 0.55); --sh-glow-coral: 0 0 0 1px rgba(255, 122, 69, 0.35), 0 0 48px -8px rgba(255, 122, 69, 0.5); --sh-glow-decision: 0 0 0 1px rgba(255, 157, 117, 0.45), 0 0 56px -6px rgba(255, 157, 117, 0.5); /* ---------- Type ---------- */ --f-display: 'Syne', 'Plus Jakarta Sans', system-ui, sans-serif; /* headlines 700, wordmark 800 */ --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(.22, .8, .2, 1); /* ---------- Success / approved (muted green) ---------- Rule: CORAL = a decision is needed (YOU DECIDE, awaiting, sign-off counts) GREEN = approved / confirmed (Approve buttons, "Approved", checkmarks, approved timeline steps, approved items moving on). */ --c-success: #4FD18B; --c-success-rgb: 79, 209, 139; /* text, icons, borders on dark */ --c-success-ink: #06240F; /* dark text on a filled green (approved) button */ --g-success: linear-gradient(180deg, #7FDBA5 0%, #4FD18B 100%); /* filled approved state */ --sh-glow-success: 0 0 0 1px rgba(79, 209, 139, 0.40), 0 0 48px -8px rgba(79, 209, 139, 0.50); --wash-success: radial-gradient(110% 90% at 100% 0%, rgba(79, 209, 139, 0.14) 0%, rgba(79, 209, 139, 0) 58%); /* ---------- Colour roles (applied on the website; the rules for every surface) ---------- TEXT white (primary) + grey (secondary) only; closing lines = white part + grey part. The one coral word: "Control" in the hero module list. ACTION coral: the primary "Book a demo" button, eyebrow dots, scroll progress line, card background glows, chart / data accents. INTERACT violet: active tab / chip, "Explore output" links, completed timeline steps, focus. OUTCOME green only after an approval, red only after a decline, neutral after defer. DATA teal only as a data colour inside charts. BADGES status badges / chips neutral (grey outline, light text); only the active one is coloured. DECISIONS Approve / Decline / Defer neutral outline until hover or click. */ --role-text: var(--c-text); --role-text-2: var(--c-text-muted); --role-action: var(--c-coral); --role-interaction: var(--c-violet-soft); --role-approved: var(--c-success); --role-declined: var(--c-danger); --role-badge-border: var(--c-hairline-2); --role-badge-text: var(--c-text-2); --w-content: 1240px; /* website content width (the Wix site container) */ /* ---------- Tint / shade scales (OKLab; 500 = brand value) ---------- */ --c-coral-50: #FFF2ED; --c-coral-100: #FFE3D8; --c-coral-200: #FFCCB8; --c-coral-300: #FFB294; --c-coral-400: #FF976E; --c-coral-500: #FF7A45; --c-coral-600: #CD653D; --c-coral-700: #9D5034; --c-coral-800: #6F3C2B; --c-coral-900: #492A22; --c-violet-50: #EEF0FF; --c-violet-100: #DADEFF; --c-violet-200: #BDC2FF; --c-violet-300: #9FA2FF; --c-violet-400: #8381FF; --c-violet-500: #6B5BFF; --c-violet-600: #574CCE; --c-violet-700: #443E9F; --c-violet-800: #322F72; --c-violet-900: #23234D; /* ---------- Alpha colours (glass cards, borders, glows) ---------- */ --a-white-03: rgba(255, 255, 255, 0.03); --a-white-05: rgba(255, 255, 255, 0.05); --a-white-08: rgba(255, 255, 255, 0.08); --a-white-12: rgba(255, 255, 255, 0.12); --a-white-20: rgba(255, 255, 255, 0.20); --a-white-40: rgba(255, 255, 255, 0.40); --a-black-40: rgba(0, 0, 0, 0.40); --a-black-60: rgba(0, 0, 0, 0.60); --a-black-80: rgba(0, 0, 0, 0.80); --a-coral-10: rgba(255, 122, 69, 0.10); --a-coral-20: rgba(255, 122, 69, 0.20); --a-coral-35: rgba(255, 122, 69, 0.35); --a-coral-55: rgba(255, 122, 69, 0.55); --a-violet-10: rgba(107, 91, 255, 0.10); --a-violet-24: rgba(107, 91, 255, 0.24); --a-violet-35: rgba(107, 91, 255, 0.35); --a-violet-55: rgba(107, 91, 255, 0.55); --a-teal-10: rgba(46, 196, 182, 0.10); --a-teal-35: rgba(46, 196, 182, 0.35); --a-danger-10: rgba(240, 97, 109, 0.10); --a-danger-40: rgba(240, 97, 109, 0.40); --a-success-10: rgba(79, 209, 139, 0.10); --a-success-35: rgba(79, 209, 139, 0.35); --a-success-55: rgba(79, 209, 139, 0.55); /* ---------- Light-background palette (PDFs, documents, print) ---------- Contrast-checked (WCAG) on --l-bg-2 #F6F6F8. Use the *-ink colours for text. */ --l-bg-1: #FFFFFF; /* page / paper */ --l-bg-2: #F6F6F8; /* section background */ --l-surface: #EEEFF3; /* cards / table header */ --l-hairline: rgba(10, 11, 15, 0.10); --l-hairline-2: rgba(10, 11, 15, 0.18); --l-text: #0A0B0F; /* 18.2 : 1 */ --l-text-2: #3B3D46; /* 10.0 : 1 */ --l-text-muted: #5E6070; /* 5.8 : 1 */ --l-text-dim: #6B6D7A; /* 4.8 : 1 (minimum for small text) */ --l-coral-ink: #AD5737; /* 4.6 : 1 — coral TEXT on light (brand coral #FF7A45 only for fills / large graphics) */ --l-violet-ink: #6557F1; /* 4.7 : 1 */ --l-teal-ink: #297A74; /* 4.7 : 1 */ --l-danger-ink: #B54D56; /* 4.7 : 1 */ --l-success-ink: #357956; /* 4.8 : 1 — approved / confirmed text on light */ /* ---------- Type scale ---------- */ --fs-display: clamp(44px, 7vw, 118px); /* hero headline */ --fs-h1: clamp(36px, 5vw, 76px); /* section headline */ --fs-h2: clamp(28px, 3.4vw, 52px); --fs-h3: clamp(21px, 2vw, 30px); --fs-lead: clamp(18px, 1.6vw, 24px); --fs-body: clamp(16px, 1.15vw, 19px); --fs-small: 15px; --fs-label: 13px; /* DM Mono eyebrow / labels, uppercase, tracking .2em */ --lh-tight: 1.04; --lh-snug: 1.2; --lh-body: 1.55; } /* Optional light theme for documents: remaps the core tokens. (never used by the dark deck or website). */ .ibos-light { --c-bg-0: #EEEFF3; --c-bg-1: #FFFFFF; --c-bg-2: #F6F6F8; --c-surface-1: #FFFFFF; --c-surface-2: #F6F6F8; --c-surface-3: #EEEFF3; --c-text: #0A0B0F; --c-text-2: #3B3D46; --c-text-muted: #5E6070; --c-text-dim: #6B6D7A; --c-hairline: rgba(10, 11, 15, 0.10); --c-hairline-2: rgba(10, 11, 15, 0.18); --c-hairline-3: rgba(10, 11, 15, 0.28); --c-coral-soft: #AD5737; --c-decision: #AD5737; --c-violet-soft: #6557F1; --c-danger: #B54D56; --c-success: #357956; }