/* ix-brand-v1.0.0.css */ /* ============================================================ ix-brand-v1.0.0.css INBXIFY — CORPORATE BRAND TOKENS LOAD THIS FIRST on any corporate-facing surface. Quill is the first consumer. Publisher-facing pages will follow. ════════════════════════════════════════════════════════════ WHY THIS FILE IS SEPARATE FROM ix-tokens ════════════════════════════════════════════════════════════ ix-tokens owns the PUBLISHER/STUDIO palette: teal #1A3A3A, gold #C4A35A, cream #FAF9F5, Fraunces. Those are the T-A and Studio look, and on WLN they are literally the publisher's brand. INBXIFY is blue and white. A corporate surface wearing teal and gold is wearing a publisher's colours. This file exists so that stops happening by construction rather than by discipline. PREFIX IS --bx-*, NOT --ix-*. Deliberate. A page can load both files without either one overwriting the other. That is the whole lesson of the title-admin-page-design rival :root block which cost 28 conflicting tokens and six months of white-on- white bugs. Two palettes are fine. Two palettes fighting over one namespace is not. DO NOT add --ix-* tokens here. DO NOT add --bx-* tokens to ix-tokens. ════════════════════════════════════════════════════════════ CONTRAST IS AUDITED, NOT EYEBALLED ════════════════════════════════════════════════════════════ Every pair below was computed before shipping. Ratios are in the comments and are facts, not intentions. ── THE LOAD-BEARING CONSTRAINT ── --bx-blue #5B7FFF measures 3.54:1 on white. That is LARGE-TEXT ONLY under WCAG AA. It is legal for: fills, borders, rules, icons, and text at 19px+ / bold 14px+. It is ILLEGAL for: body copy, labels, small mono, meta rows, any 11px text. Small text on light surfaces uses --bx-blue-deep (6.56:1). This is the same failure class as --ix-text-light, which sat at 3.27:1 in 61 places before v1.0.4 caught it. Do not repeat it by reaching for the brand blue because it looks nicer. ============================================================ */ :root { /* ── Brand blue ramp ────────────────────────────────────── One hue, five stops. The palette is built OUT of the brand colour rather than around it, which is what keeps it recognisably INBXIFY instead of generic dashboard blue. */ --bx-blue: #5B7FFF; /* 3.54:1 on white — LARGE TEXT / FILLS ONLY */ --bx-blue-deep: #3F57B0; /* 6.56:1 on white — the text-safe blue */ --bx-blue-lift: #93A9FF; /* 7.58:1 on --bx-ink — blue for dark beds */ --bx-blue-pale: #E6EBFF; /* tint surface, active wash, code chips */ --bx-blue-shadow: rgba(91,127,255,.22); /* ── Ink — the dark surface. NAVY, never teal ───────────── Quill's app bar is this colour. It reads as the same family as the brand blue, which teal never could. */ --bx-ink: #141B33; /* 17.01:1 on white */ --bx-ink-mid: #2A3457; /* 12.16:1 on white */ /* ── Cool neutrals. NO CREAM ────────────────────────────── Greys are blue-tinted so they sit with the brand hue instead of fighting it. */ --bx-surface: #FFFFFF; --bx-mist: #F5F7FF; /* page canvas */ --bx-mist-deep: #EAEEF9; /* page backdrop */ --bx-border: #DDE3F5; /* card + control edges */ --bx-border-soft: #EAEEF9; /* internal hairlines */ --bx-text: #1A293B; /* body ink */ --bx-text-mid: #6B7280; /* 4.83:1 white, 4.52:1 mist */ /* ── Accent — CORAL ─────────────────────────────────────── Replaces the job gold used to do. Two-tone by necessity: no single value clears 4.5:1 on BOTH white and ink, so -deep is for light surfaces and the plain token is for dark ones. Using the wrong one is a contrast failure, not a style preference. */ --bx-accent-deep: #B83E1C; /* 5.61:1 on white, 5.24:1 on mist */ --bx-accent: #FF8A6E; /* 7.38:1 on --bx-ink */ --bx-accent-tint: #FDECE7; /* 5.61:1 carrying accent-deep */ --bx-accent-line: rgba(184,62,28,.38); /* ── Status ───────────────────────────────────────────────*/ --bx-ok: #1F7A5C; /* 5.25:1 on white */ --bx-ok-tint: #E6F4EE; /* 4.64:1 carrying --bx-ok */ --bx-ok-line: #8FC4AE; --bx-idle: #9AA3B8; /* NON-TEXT ONLY. Dots, rules. */ --bx-danger: #C0392B; /* ── Editing state ──────────────────────────────────────── Corporate-surface equivalent of --ix-changed-border. A control holding an unsaved selection carries this border. Gold is NOT used here; the accent takes the job. */ --bx-changed-border: var(--bx-accent-deep); --bx-changed-shadow: rgba(184,62,28,.20); /* ── Type ───────────────────────────────────────────────── Display is Space Grotesk, NOT Fraunces. Fraunces is WLN's typeface. A platform surface wearing a publisher's face is the same error as wearing its colours. */ --bx-font-display: 'Space Grotesk', system-ui, sans-serif; --bx-font-body: 'DM Sans', system-ui, sans-serif; --bx-font-mono: 'DM Mono', ui-monospace, monospace; --bx-text-tiny: 11px; /* ── Radius ───────────────────────────────────────────────*/ --bx-radius-sharp: 4px; --bx-radius-sm: 8px; --bx-radius: 12px; --bx-radius-pill: 20px; /* ── Shadow ───────────────────────────────────────────────*/ --bx-shadow-sm: 0 1px 2px rgba(20,27,51,.06); --bx-shadow-md: 0 4px 20px rgba(20,27,51,.07); --bx-shadow-lg: 0 10px 34px rgba(20,27,51,.14); --bx-shadow-blue: 0 0 0 3px rgba(91,127,255,.22); --bx-shadow-accent: 0 0 0 3px rgba(184,62,28,.20); /* ── Motion ───────────────────────────────────────────────*/ --bx-ease: .15s ease; /* ── Stacking ───────────────────────────────────────────── Kept below the ix modal/lightbox band so a surface loading both files never has a Quill element cover an ix modal. */ --bx-z-dropdown: 5000; --bx-z-toast: 9000; }