/* One Pass — Color tokens * --------------------------------------------------------------------------- * Direction: Teal + green (mark finalist V3c). Teal carries STRUCTURE / CLIENT * meaning (the board, organization names, chrome, handoff & review states). * Green carries WORK / COMPLETION meaning (revision done, client-confirmed). * Amber is the functional REVIEW / CAUTION state — distinct from the mark * colors and never used to imply legal approval, compliance, or enforceability. * * Layers: * 1. Brand ramps — raw hues (teal / green / amber / red) + tints/shades * 2. Neutrals — warm "packet paper" → deep ink ramp * 3. Semantic — role aliases the components and templates actually consume * ------------------------------------------------------------------------- */ :root { /* ---- 1. Brand ramps ---------------------------------------------------- */ /* Teal — structure / client / chrome */ --teal-700: #143847; --teal-600: #1D4E63; /* core teal — mark ring, primary structural color */ --teal-500: #2A6480; --teal-300: #7FA8B9; --teal-100: #D6E5EC; --teal-50: #E1EDF2; /* soft teal surface */ /* Green — work / completion */ --green-700: #1F4A33; --green-600: #2A6043; /* forest green — deep "done", mark alt */ --green-500: #3D7A5A; /* mid green — primary work/completion */ --green-300: #8CBBA1; --green-100: #DCEDE3; --green-50: #E8F3EC; /* soft green surface */ /* Amber — review / caution (functional only, not in the mark) */ --amber-700: #6B4010; --amber-600: #8A4B10; /* deep amber — review text */ --amber-500: #C4771A; /* amber accent — flags, "needs review" */ --amber-300: #E2B071; --amber-100: #F6E1C2; --amber-50: #FAEBD4; /* soft amber surface */ /* Red — error / hard boundary (used sparingly: "do not", out-of-scope) */ --red-700: #6A2020; --red-600: #8B2F2F; --red-100: #F2D8D4; --red-50: #F7E4E1; /* ---- 2. Neutrals — warm paper → ink ----------------------------------- */ --paper: #F7F6F2; /* packet paper — primary background, warm not cold */ --paper-2: #EFEDE6; /* recessed paper — wells, secondary surfaces */ --white: #FFFFFF; /* panels, cards, document surface */ --ink-900: #131D24; --ink-800: #1A2730; /* deep ink — primary text & wordmark */ --ink-700: #2A3740; /* strong — emphasis text, list headings */ --ink-600: #3A4750; --ink-500: #5A6873; /* muted — secondary text, labels */ --ink-400: #8A949C; /* faint — captions, disabled text */ --ink-300: #B9C0C5; /* hairline-on-dark, placeholder text */ --line: rgba(26, 39, 48, 0.12); /* default hairline border */ --line-strong: rgba(26, 39, 48, 0.22); /* emphasized / document border */ --line-soft: rgba(26, 39, 48, 0.06); /* faint internal divider */ /* ---- 3. Semantic aliases ---------------------------------------------- */ /* Surfaces */ --surface-page: var(--paper); --surface-card: var(--white); --surface-well: var(--paper-2); --surface-document: var(--white); --surface-inverse: var(--teal-600); /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-inverse: var(--paper); --text-link: var(--teal-600); --text-on-brand: var(--paper); /* Brand / structural */ --brand-structure: var(--teal-600); /* teal — client/structure/chrome */ --brand-structure-2: var(--teal-500); --brand-work: var(--green-500); /* mid green — work in progress */ --brand-done: var(--green-600); /* forest green — completed */ /* Borders & dividers */ --border-default: var(--line); --border-strong: var(--line-strong); --border-soft: var(--line-soft); /* Status roles * done = work complete / client-confirmed (green — NOT legal approval) * review = needs attention / attorney flag (amber) * info = structural / neutral note (teal) * blocked = out-of-scope / hard boundary (red) */ --status-done-fg: var(--green-600); --status-done-bg: var(--green-50); --status-done-border: rgba(42, 96, 67, 0.25); --status-review-fg: var(--amber-600); --status-review-bg: var(--amber-50); --status-review-border: rgba(138, 75, 16, 0.28); --status-info-fg: var(--teal-600); --status-info-bg: var(--teal-50); --status-info-border: rgba(29, 78, 99, 0.24); --status-blocked-fg: var(--red-600); --status-blocked-bg: var(--red-50); --status-blocked-border: rgba(139, 47, 47, 0.26); /* Interactive (buttons / links) * Default action uses TEAL (structure/chrome). Green is reserved for * confirm/done semantics so it never reads as generic "go". */ --action-primary-bg: var(--teal-600); --action-primary-bg-hover: var(--teal-700); --action-primary-fg: var(--paper); --action-confirm-bg: var(--green-600); --action-confirm-bg-hover: var(--green-700); --action-confirm-fg: var(--paper); --action-secondary-bg: var(--white); --action-secondary-bg-hover: var(--paper-2); --action-secondary-fg: var(--ink-800); --action-secondary-border: var(--line-strong); --action-ghost-fg: var(--teal-600); --action-ghost-bg-hover: var(--teal-50); --focus-ring: rgba(29, 78, 99, 0.45); } /* One Pass — Typography tokens * --------------------------------------------------------------------------- * Three families, three jobs: * --font-serif Spectral Wordmark, display headings, long-form document body * --font-sans Public Sans UI, web copy, headings in app chrome, labels * --font-mono IBM Plex Mono URLs, citation IDs, file names ONLY * * Rule of thumb: the serif gives documents quiet authority; the sans keeps * product/UI surfaces plain and administrative. Don't mix them arbitrarily — * serif for the "paper", sans for the "chrome". * ------------------------------------------------------------------------- */ :root { /* Families */ --font-serif: 'Spectral', Georgia, 'Times New Roman', serif; --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale (1.2 minor-third-ish, tuned for screen) */ --text-2xs: 11px; /* eyebrows, footnotes, disclaimers */ --text-xs: 12px; /* labels, captions, pill text */ --text-sm: 13px; /* dense UI, table cells */ --text-md: 15px; /* base UI / body */ --text-lg: 17px; /* lead paragraphs */ --text-xl: 20px; /* sub-headings */ --text-2xl: 24px; /* section headings, wordmark default */ --text-3xl: 30px; /* page titles */ --text-4xl: 38px; /* display */ --text-5xl: 52px; /* hero display */ /* Line heights */ --leading-tight: 1.18; /* display & headings */ --leading-snug: 1.35; /* sub-heads, UI */ --leading-normal: 1.55; /* body UI */ --leading-relaxed: 1.7; /* long-form document body */ /* Letter spacing */ --tracking-tight: -0.01em; /* large display */ --tracking-normal: 0; --tracking-wide: 0.02em; /* wordmark */ --tracking-eyebrow: 0.1em; /* uppercase eyebrows / labels */ /* Semantic roles */ --font-wordmark: var(--font-serif); --font-display: var(--font-serif); --font-heading: var(--font-sans); /* UI/app headings stay sans */ --font-doc-body: var(--font-serif); /* long-form policy text */ --font-ui: var(--font-sans); --font-eyebrow: var(--font-sans); --font-code: var(--font-mono); } /* One Pass — Spacing, radius, elevation, layout tokens * --------------------------------------------------------------------------- * Spacing is a 4px base grid. The brand reads "organized, careful, calm", so * elevation is restrained — thin hairline borders do most of the work and * shadows stay soft and low. Corners are gently rounded (documents, not chips). * ------------------------------------------------------------------------- */ :root { /* Spacing scale (4px base) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius — soft, document-like, never pill-y on containers */ --radius-xs: 4px; /* code chips, tiny tags */ --radius-sm: 6px; /* inputs, buttons, small cards, status badges */ --radius-md: 8px; /* cards, panels, document preview */ --radius-lg: 12px; /* large surfaces, modals */ /* Borders */ --border-width: 1px; --border-width-strong: 2px; /* document frame, header underline */ /* Elevation — soft & low; the system leans on borders, not drop shadows */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(26, 39, 48, 0.04); --shadow-sm: 0 1px 3px rgba(26, 39, 48, 0.06), 0 1px 2px rgba(26, 39, 48, 0.04); --shadow-md: 0 4px 12px rgba(26, 39, 48, 0.08), 0 1px 3px rgba(26, 39, 48, 0.05); --shadow-lg: 0 12px 32px rgba(26, 39, 48, 0.12), 0 3px 8px rgba(26, 39, 48, 0.06); /* Focus ring offset */ --focus-ring-width: 3px; /* Layout */ --container-prose: 720px; /* one-pager / document column */ --container-content: 1080px; /* marketing content */ --container-wide: 1180px; /* dashboard / wide tables */ --container-doc: 816px; /* US-Letter-ish document width @ ~96dpi */ /* Motion — quiet, no bounce. Fades and short slides only. */ --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --duration-fast: 120ms; /* @kind other */ --duration-base: 200ms; /* @kind other */ --duration-slow: 320ms; /* @kind other */ }