/* ========================================================================== Avyeni — design tokens -------------------------------------------------------------------------- One file, no build step, no dependencies. Everything downstream is defined in terms of what is here, so a project can reskin itself completely by overriding a handful of custom properties. Colour is authored in OKLCH rather than hex. That matters for a system used across many projects: OKLCH is perceptually uniform, so a ramp built by walking lightness produces steps that *look* evenly spaced, and swapping the brand hue keeps every tint and shade at the same apparent contrast. With hex you would have to hand-tune every step for every new colour. To reskin an entire project: :root { --hue-brand: 265; --hue-accent: 20; } ========================================================================== */ :root { /* ---- hue dials ------------------------------------------------------ */ --hue-brand: 26; /* vivid coral-red */ --hue-accent: 330; /* magenta */ --hue-neutral: 60; /* warmth of the greys */ /* ---- brand ramp ----------------------------------------------------- */ --brand-50: oklch(97.5% 0.020 var(--hue-brand)); --brand-100: oklch(94.5% 0.045 var(--hue-brand)); --brand-200: oklch(90% 0.085 var(--hue-brand)); --brand-300: oklch(84% 0.145 var(--hue-brand)); --brand-400: oklch(76% 0.195 var(--hue-brand)); --brand-500: oklch(66% 0.240 var(--hue-brand)); --brand-600: oklch(58% 0.220 var(--hue-brand)); --brand-700: oklch(50% 0.155 var(--hue-brand)); --brand-800: oklch(40% 0.120 var(--hue-brand)); --brand-900: oklch(30% 0.085 var(--hue-brand)); /* ---- accent ramp ---------------------------------------------------- */ --accent-100: oklch(94% 0.050 var(--hue-accent)); --accent-300: oklch(80% 0.150 var(--hue-accent)); --accent-500: oklch(62% 0.230 var(--hue-accent)); --accent-700: oklch(48% 0.190 var(--hue-accent)); /* ---- neutrals ------------------------------------------------------- Tinted, never pure grey. A neutral with a little chroma in it reads as considered; #888 reads as a default nobody chose. */ --n-0: oklch(99.4% 0.004 var(--hue-neutral)); --n-25: oklch(98.2% 0.006 var(--hue-neutral)); --n-50: oklch(96.5% 0.008 var(--hue-neutral)); --n-100: oklch(93.5% 0.010 var(--hue-neutral)); --n-200: oklch(88% 0.012 var(--hue-neutral)); --n-300: oklch(80% 0.014 var(--hue-neutral)); --n-400: oklch(68% 0.016 var(--hue-neutral)); --n-500: oklch(56% 0.018 var(--hue-neutral)); --n-600: oklch(45% 0.018 var(--hue-neutral)); --n-700: oklch(36% 0.016 var(--hue-neutral)); --n-800: oklch(27% 0.014 var(--hue-neutral)); --n-900: oklch(19% 0.012 var(--hue-neutral)); --n-950: oklch(13% 0.010 var(--hue-neutral)); /* ---- semantic ------------------------------------------------------- */ --ok: oklch(65% 0.16 150); --warn: oklch(75% 0.16 75); --bad: oklch(58% 0.20 27); --info: oklch(62% 0.15 240); /* ---- surfaces (light) ----------------------------------------------- */ --canvas: var(--n-25); --surface: var(--n-0); --surface-alt: var(--n-50); --sunken: var(--n-100); --line: oklch(88% 0.012 var(--hue-neutral) / 0.9); --line-strong: oklch(80% 0.014 var(--hue-neutral)); --ink: var(--n-900); --ink-soft: var(--n-600); --ink-mute: var(--n-500); --ink-on-brand: oklch(99% 0.01 var(--hue-brand)); /* ---- type ----------------------------------------------------------- DM Serif Display for anything meant to be read as a voice, DM Sans for anything meant to be read as an interface. They are drawn as a family, so they sit together without argument. */ --font-display: "DM Serif Display", "Iowan Old Style", Palatino, Georgia, serif; --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Fluid scale, ~1.25 ratio at small sizes opening to ~1.33 at the top. clamp() means no breakpoint ever has to touch a font size again. */ --t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --t-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --t-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --t-md: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); --t-lg: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem); --t-xl: clamp(1.75rem, 1.50rem + 1.20vw, 2.5rem); --t-2xl: clamp(1.875rem, 1.55rem + 1.60vw, 2.75rem); --t-3xl: clamp(2.25rem, 1.75rem + 2.40vw, 3.5rem); --t-4xl: clamp(2.5rem, 1.70rem + 3.60vw, 4.5rem); --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.62; --lh-loose: 1.75; --tr-tight: -0.022em; --tr-snug: -0.012em; --tr-wide: 0.06em; --tr-caps: 0.14em; /* ---- space (4px base) ------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; /* ---- radii ----------------------------------------------------------- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px; /* ---- elevation ------------------------------------------------------- Warm-tinted shadows. Pure black shadows on a warm background look like dirt; matching the shadow hue to the surface keeps them looking like light. */ --shadow-1: 0 1px 2px oklch(30% 0.02 var(--hue-neutral) / 0.06), 0 1px 1px oklch(30% 0.02 var(--hue-neutral) / 0.04); --shadow-2: 0 2px 4px oklch(30% 0.02 var(--hue-neutral) / 0.06), 0 6px 14px oklch(30% 0.02 var(--hue-neutral) / 0.07); --shadow-3: 0 4px 8px oklch(30% 0.02 var(--hue-neutral) / 0.07), 0 16px 32px oklch(30% 0.02 var(--hue-neutral) / 0.10); --shadow-4: 0 8px 16px oklch(30% 0.02 var(--hue-neutral) / 0.08), 0 32px 64px oklch(30% 0.02 var(--hue-neutral) / 0.14); --glow-brand: 0 6px 28px oklch(66% 0.240 var(--hue-brand) / 0.38); /* ---- motion ---------------------------------------------------------- Named by intent. "exit" is faster than "enter" because things leaving should get out of the way, and things arriving should be followed. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --d-fast: 120ms; --d-enter: 260ms; --d-exit: 160ms; --d-slow: 520ms; /* ---- layout ----------------------------------------------------------- */ --measure: 68ch; /* comfortable reading width */ --page: 1180px; --page-wide: 1440px; --gutter: clamp(1.25rem, 4vw, 3rem); } /* ---- dark --------------------------------------------------------------- Only the surface and ink tokens move. Every component below is written against those names, so none of them need a dark-mode rule of their own. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: var(--n-950); --surface: oklch(16% 0.012 var(--hue-neutral)); --surface-alt: oklch(20% 0.014 var(--hue-neutral)); --sunken: oklch(11% 0.010 var(--hue-neutral)); --line: oklch(32% 0.014 var(--hue-neutral) / 0.9); --line-strong: oklch(42% 0.016 var(--hue-neutral)); --ink: var(--n-50); --ink-soft: var(--n-300); --ink-mute: var(--n-400); --brand-500: oklch(74% 0.180 var(--hue-brand)); --brand-600: oklch(68% 0.190 var(--hue-brand)); --ink-on-brand: oklch(16% 0.03 var(--hue-brand)); --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.45); --shadow-3: 0 6px 20px oklch(0% 0 0 / 0.5); --shadow-4: 0 12px 48px oklch(0% 0 0 / 0.6); } } :root[data-theme="dark"] { --canvas: var(--n-950); --surface: oklch(16% 0.012 var(--hue-neutral)); --surface-alt: oklch(20% 0.014 var(--hue-neutral)); --sunken: oklch(11% 0.010 var(--hue-neutral)); --line: oklch(32% 0.014 var(--hue-neutral) / 0.9); --line-strong: oklch(42% 0.016 var(--hue-neutral)); --ink: var(--n-50); --ink-soft: var(--n-300); --ink-mute: var(--n-400); --brand-500: oklch(74% 0.180 var(--hue-brand)); --brand-600: oklch(68% 0.190 var(--hue-brand)); --ink-on-brand: oklch(16% 0.03 var(--hue-brand)); --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.45); --shadow-3: 0 6px 20px oklch(0% 0 0 / 0.5); --shadow-4: 0 12px 48px oklch(0% 0 0 / 0.6); }