/* ============================================================ AUXIN — Design System Foundations colors_and_type.css Governance technology · "directed growth" ------------------------------------------------------------ Typeface: Courier Prime (Google Fonts). Courier New is the approved system fallback. No other typeface is permitted in brand-facing materials. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ---------- BRAND PALETTE (refined slate-violet ramp) ---------- Violet identity preserved but chroma pulled back from v1 so the mid stop reads as a composed slate-violet, not a vivid purple. Hue holds at ~287. */ --purple-black: #0A0916; /* primary background */ --periwinkle: #CBC9FD; /* wordmark — replaces white */ --lavender: #A9A6D8; /* dot matrix on dark; body */ --purple-mid: #7D79AD; /* accents, sub-labels */ --purple-deep: #625E8B; /* meta, captions, dot on light */ --purple-darkest: #2C284A; /* hairline borders */ /* ---------- SURFACE / BACKGROUND TOKENS ---------- */ --bg: #0A0916; /* page ground */ --bg-deep: #05050D; /* deepest wells, code */ --bg-section: #131221; /* alternate section band */ --bg-card: #201F32; /* cards, raised surfaces */ --bg-card-2: #181728; /* nested / inset surfaces */ /* ---------- SEMANTIC FOREGROUND ---------- */ --fg1: #CBC9FD; /* periwinkle — headings, primary text (NOT for UI fills) */ --fg2: #A9A6D8; /* lavender — body copy */ --fg3: #7D79AD; /* mid slate-violet — secondary / labels */ --fg4: #625E8B; /* deep slate-violet — meta, captions, disabled */ /* ---------- LINES & STROKES ---------- */ --line: #2C284A; /* standard hairline (0.5px) */ --line-strong: #625E8B; /* emphasised divider */ --line-faint: rgba(44,40,74,.5); /* whisper rule */ /* ---------- STATUS (muted, never saturated — kept in-family except where audit semantics genuinely require it) ---------- */ --ok: #7FC8A9; /* verified / approved (sparing) */ --warn: #C8B27F; /* flagged / review */ --alert: #C87F7F; /* rejected / misuse */ --ok-bg: rgba(127,200,169,.10); --warn-bg: rgba(200,178,127,.10); --alert-bg: rgba(200,127,127,.10); --ok-br: #2E4A3E; --warn-br: #4A452E; --alert-br: #4A2E2E; --info: #A9A6D8; /* neutral status (disbursed/open) */ --info-bg: rgba(169,166,216,.08); --info-br: var(--line); /* ---------- ACCENT (primary action fill) ---------- */ --accent: #CBC9FD; /* periwinkle fill */ --accent-ink: #2C284A; /* text on accent */ --accent-hover: #D9D7FF; /* ---------- TYPE FAMILY ---------- */ --font-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace; --font: var(--font-mono); /* there is only one family */ /* ---------- TYPE SCALE (px) ---------- */ --t-display: 48px; /* hero statements */ --t-h1: 42px; /* section titles */ --t-h2: 28px; /* headings */ --t-h3: 20px; /* sub-headings */ --t-label: 16px; /* uppercase sub-heads */ --t-body: 14px; /* body copy */ --t-small: 12px; /* notes, secondary */ --t-caption: 10px; /* captions, eyebrows */ /* ---------- TRACKING (letter-spacing) ---------- */ --track-display: 2px; --track-heading: 1px; --track-label: 3px; /* uppercase sub-heads min */ --track-body: .3px; --track-caption: 4px; /* uppercase captions */ --track-eyebrow: 5px; /* section labels */ /* ---------- LINE HEIGHT ---------- */ --lh-display: 1.1; --lh-heading: 1.2; --lh-body: 1.7; /* never tighter than 1.0 */ --lh-loose: 1.9; /* ---------- WEIGHT ---------- */ --w-regular: 400; --w-bold: 700; /* single statements only, never paragraphs */ /* ---------- SPACING (8px base grid) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; /* ---------- RADII (minimal — brand is precise, not soft) ---------- */ --r-0: 0px; /* default — most surfaces are square */ --r-1: 2px; /* inputs, chips */ --r-2: 4px; /* cards, swatches */ --r-pill: 999px; /* dots only */ /* ---------- ELEVATION (subtle — light comes from value, not glow) ---------- */ --shadow-1: 0 1px 0 0 rgba(44,40,74,.6); /* hairline lift */ --shadow-2: 0 8px 24px -12px rgba(0,0,0,.7); /* raised card */ --shadow-3: 0 24px 64px -24px rgba(0,0,0,.85); /* modal / overlay */ --inset-1: inset 0 0 0 .5px var(--line); /* stroke as inset */ /* ---------- MOTION ---------- */ --ease: cubic-bezier(.2,.6,.2,1); /* calm, no bounce */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms; } /* ============================================================ LIGHT THEME (variant) Auxin is dark-primary. Light is the *specified variant* — the periwinkle-ground / deep-purple-dot world from the guidelines. Apply by setting data-theme="light" on or any container. Pure white is never used; the lightest surface is purple-tinted. ============================================================ */ [data-theme="light"] { --bg: #EAE9F4; /* page ground (cool violet off-white) */ --bg-deep: #D9D7E8; /* wells, inset */ --bg-section: #E1DFEE; /* alternate band */ --bg-card: #F7F6FD; /* raised card (lightest) */ --bg-card-2: #EEEDF7; /* nested surface */ --fg1: #1B1933; /* headings — near purple-black */ --fg2: #34324C; /* body */ --fg3: #625E8B; /* secondary / labels (deep slate-violet) */ --fg4: #7D79AD; /* meta / captions / disabled */ --line: #C7C5DA; /* hairline on light */ --line-strong: #A6A3C2; /* emphasised divider */ --line-faint: rgba(199,197,218,.6); /* On light grounds the dot matrix & wordmark flip to deep slate-violet */ --periwinkle: #1B1933; /* wordmark goes dark on light */ --lavender: #625E8B; /* dot matrix = deep slate-violet */ --shadow-2: 0 8px 24px -12px rgba(44,40,74,.25); --shadow-3: 0 24px 64px -24px rgba(44,40,74,.35); /* status — darkened for contrast on light grounds */ --ok: #2F7D5C; --warn: #8A6D24; --alert: #A24A4A; --ok-bg: rgba(47,125,92,.12); --warn-bg: rgba(138,109,36,.12); --alert-bg: rgba(162,74,74,.12); --ok-br: #BFD8CC; --warn-br: #D8CDB0; --alert-br: #D8B8B8; --info: #625E8B; --info-bg: rgba(98,94,139,.10); --info-br: #C7C5DA; /* accent — deep slate-violet fill, light ink */ --accent: #2E2A52; --accent-ink: #F6F6FC; --accent-hover: #4B4772; } /* ============================================================ SEMANTIC ELEMENT STYLES Apply via class or by element. All upright — never italic. ============================================================ */ .auxin-display { font-family: var(--font); font-size: var(--t-display); font-weight: var(--w-regular); letter-spacing: var(--track-display); line-height: var(--lh-display); color: var(--fg1); } .auxin-h1 { font-family: var(--font); font-size: var(--t-h1); font-weight: var(--w-regular); letter-spacing: var(--track-display); line-height: var(--lh-heading); color: var(--fg1); } .auxin-h2 { font-family: var(--font); font-size: var(--t-h2); font-weight: var(--w-regular); letter-spacing: var(--track-heading); line-height: var(--lh-heading); color: var(--fg1); } .auxin-h3 { font-family: var(--font); font-size: var(--t-h3); font-weight: var(--w-regular); letter-spacing: var(--track-heading); line-height: var(--lh-heading); color: var(--fg1); } /* Uppercase sub-heading / label */ .auxin-label { font-family: var(--font); font-size: var(--t-label); font-weight: var(--w-regular); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg2); } /* Section eyebrow ("01 — The idea") */ .auxin-eyebrow { font-family: var(--font); font-size: var(--t-caption); font-weight: var(--w-regular); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg3); } .auxin-body { font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-regular); letter-spacing: var(--track-body); line-height: var(--lh-loose); color: var(--fg2); } .auxin-small { font-family: var(--font); font-size: var(--t-small); letter-spacing: var(--track-body); line-height: var(--lh-body); color: var(--fg4); } /* Caption / eyebrow */ .auxin-caption { font-family: var(--font); font-size: var(--t-caption); font-weight: var(--w-regular); letter-spacing: var(--track-caption); text-transform: uppercase; color: var(--fg3); } /* Single bold statement — never a paragraph */ .auxin-strong { font-family: var(--font); font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: .5px; color: var(--fg1); } /* The wordmark — periwinkle, reserved */ .auxin-wordmark { font-family: var(--font); font-weight: var(--w-regular); letter-spacing: 2px; color: var(--periwinkle); }