/* Up Level — ecosystem design tokens · SOURCE OF TRUTH * * Extracted 2026-08-07 from up-level-pkm-deck/src/app/globals.css (the palette * Champ locked on 2026-06-15). Values are unchanged — this file only gives them * one home, canonical OKLCH values, and role names so pages stop hard-coding hex. * * Two naming layers, same colours: * role names (--color-paper, --color-ink, --color-accent …) — what a page means * brand names (--color-cream, --color-orange …) — what Champ calls it * Both resolve to the same value. Use role names in new work; brand names stay so * the 45 existing landing pages keep working untouched. * * Usage — static pages: (before page CSS) * Next.js apps: @import "../../tokens.css"; above @import "tailwindcss" * * See design.md for the system rules and the Tailwind / DTCG / shadcn exports. */ :root { /* ---- paper (surfaces, lightest → deepest) ---------------------------- */ --color-paper: oklch(99.3% 0.011 95); /* #FFFDF5 cream · body base */ --color-paper-2: oklch(98.0% 0.024 88); /* #FFF8E7 cream-2 · raised */ --color-paper-3: oklch(95.3% 0.022 239); /* #E3F2FD sky · cool band */ --color-paper-4: oklch(91.9% 0.038 236); /* #CDE9FB sky-2 · deep band */ /* ---- ink (text) ------------------------------------------------------ */ --color-ink: oklch(31.7% 0.031 274); /* #2D3142 · 12.65:1 on paper ✓ */ --color-ink-2: oklch(48.9% 0.046 283); /* #5C5D7A · 6.25:1 on paper ✓ */ --color-muted: oklch(48.9% 0.046 283); /* alias of ink-2 */ /* ---- rules / borders ------------------------------------------------- */ --color-rule: oklch(86.7% 0.097 66 / 0.25); /* sun @25% — the hairline */ --color-rule-2: oklch(86.7% 0.097 66 / 0.45); /* sun @45% — button edge */ /* ---- accent ---------------------------------------------------------- */ /* accent = the brand orange. DECORATIVE ONLY — icons, dots, fills, * borders, chip backgrounds. 2.27:1 on paper, so it must never * carry body text or a small label on its own. * accent-deep = same hue, dark enough to pass WCAG AA both ways: * 4.80:1 with white on top, 4.71:1 as text on paper. * Use for button fills that carry text, and for orange text. * accent-soft = the light end of the brand gradient. Fill only, never text. */ --color-accent: oklch(75.4% 0.164 50); /* #FF8C42 */ --color-accent-deep: oklch(56.6% 0.145 48); /* #B85614 */ --color-accent-soft: oklch(86.7% 0.097 66); /* #FFC78E sun */ --color-accent-ink: oklch(100% 0 0); /* #FFFFFF — only on accent-deep */ --color-focus: oklch(56.6% 0.145 48); /* accent-deep — visible on paper */ /* CTA gradient. Deliberately narrow: white has to clear 4.5:1 at BOTH stops, * and anything lighter than cta-2 drops the pale end back under — which is * exactly how the old orange→sun button failed at 1.52:1. */ --color-cta-1: oklch(52.8% 0.137 48); /* #A84D11 · white 5.62:1 */ --color-cta-2: oklch(58.5% 0.150 48); /* #BC5915 · white 4.59:1 */ /* ---- support hues ---------------------------------------------------- */ --color-grape: oklch(79.3% 0.111 288); /* #B8B0FF secondary accent */ --color-mint: oklch(88.3% 0.069 151); /* #B8E6C1 success / tertiary */ --color-peach: oklch(89.3% 0.057 12); /* #FFCDD2 */ /* ---- brand aliases (what the existing 45 pages already say) ---------- */ --color-cream: var(--color-paper); --color-cream-2: var(--color-paper-2); --color-sky: var(--color-paper-3); --color-sky-2: var(--color-paper-4); --color-sun: var(--color-accent-soft); --color-orange: var(--color-accent); --color-ink-soft: var(--color-ink-2); /* ---- type ------------------------------------------------------------ */ /* Mitr is Thai-first and carries display well. It is NOT a body face — * see design.md § Typography for the pairing rule and the open question. */ --font-display: 'Mitr', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; --font-body: 'Mitr', 'Noto Sans Thai', system-ui, -apple-system, sans-serif; --font-outlier: ui-monospace, 'SF Mono', Menlo, monospace; --tracking-display: -0.01em; --tracking-label: 0.20em; /* .eyebrow */ /* ---- type scale (matches what the landing pages already render) ------ */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.875rem; /* section h2 mobile */ --text-3xl: 2.25rem; /* section h2 desktop */ --text-display: clamp(2.25rem, 5vw + 0.5rem, 3.75rem); /* hero h1 */ /* ---- 4-pt spacing scale ---------------------------------------------- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* section py mobile */ --space-3xl: 6rem; /* section py desktop */ --space-4xl: 9rem; /* ---- radii ----------------------------------------------------------- */ --radius-input: 12px; --radius-card: 18px; /* .soft-card */ --radius-panel: 24px; --radius-pill: 999px; /* .btn-cute / .btn-soft */ /* ---- rules ----------------------------------------------------------- */ --rule-hair: 1px; --rule-fine: 2px; /* ---- motion ---------------------------------------------------------- */ --dur-micro: 180ms; /* button press, colour shift */ --dur-short: 250ms; /* card hover */ --dur-long: 450ms; /* tilt release, panel */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* tilt release only */ /* ---- elevation ------------------------------------------------------- */ --shadow-card: 0 4px 14px oklch(31.7% 0.031 274 / 0.06); --shadow-lift: 0 12px 28px oklch(31.7% 0.031 274 / 0.12), 0 4px 10px oklch(31.7% 0.031 274 / 0.08); --shadow-cta: 0 6px 16px oklch(56.6% 0.145 48 / 0.32); } /* Grand Opening blue paper. */ :root { --color-go-blue-paper: oklch(43% 0.18 262); }