Shared design tokens for Aisu.Studio projects — the base every new build starts from.
waffle is still being built out. The tokens on this page (including dark mode, radius, shadow, and motion below) are stable and safe to use directly; components.html has the real component classes; the Patterns page is the rougher quarry they were distilled from.
Click a swatch to try a new color. Nothing here is saved automatically — use Export below to get the file.
The third tier, and a functional one. Above it sit primary (blueberry, grape, lemon — brand and interaction) and secondary (hazelnut, cappuccino, vanilla — surfaces); these carry neither, they only encode meaning in content: sequential scales, heatmaps, intensity or priority coding, categorical series. So don't reach for a flavor to style chrome — a button, a link, a border. Five flavors × five juicyness levels, level 5 full juice and level 1 the most diluted. One level read across flavors gives a categorical series; one flavor read 1 → 5 gives a sequential scale. Fixed values, like the core swatches: they don't repoint in dark mode.
Token names are --color-<flavor>-<1–5>; the bare
--color-<flavor> is an alias for level 5.
Text on a fill: ink (blueberry) clears WCAG AA on pistachio 1–4, mango 1–5,
strawberry 1–3, raspberry 1–4, chocolate 1–2; vanilla clears it on chocolate 3–5. Four levels land
between 3:1 and 4.5:1 — pistachio 5, strawberry 4 and 5, raspberry 5 — so those take large text
(≥24px, or ≥18.7px bold) or no text at all. The hexes printed above use whichever of the two reads
better on that level — which on those four is still below AA, deliberately, so the limit is visible here.
Three priority slots, deliberately numbered rather than named. A name like “sans” or “headline” promises an appearance or a use, and either can change — a priority cannot. Which face sits in which slot is the decision; the slot itself stays.
Paragraphs, buttons, tabs, nav — anything sentence-like or interactive. When in doubt: primary.
Display titles and headings. A characterful serif, Light 300 / Regular 400 only — never body copy, never small sizes.
Small data and label accents: eyebrows, tags, indices, KPI values, code. Not headlines.
Larger body copy for intros and lede paragraphs.
Default body copy for regular reading text.
Caption / eyebrow label
const token = "value";
Every semantic alias below (bg / surface / surface-2 / text / muted / accent / on-accent / on-accent-solid / border,
plus the shadow scale) repoints for dark automatically — via prefers-color-scheme, or force
it with <html data-theme="dark"> / data-theme="light". The raw
--color-* swatches above never change; only the aliases do. Values are the same ones already
proven in production by AisuStudio/spiritsprint, not a new invention.
Try it: toggle your OS or browser color scheme and reload this page.
No horizontal shift by default — straight drop shadows. Opacity is raised automatically in dark mode so they still read against a dark surface.
Easing: --ease-standard (default), --ease-out (entering), --ease-in (exiting).
Reference values only — a media query can't read a CSS custom property, so these aren't functional tokens. Copy the rem value into your own @media rule and keep it in sync with this table by hand.
| Token | Value | Pixels |
|---|---|---|
| --bp-sm | 30rem | 480px |
| --bp-md | 48rem | 768px |
| --bp-lg | 64rem | 1024px |
| --bp-xl | 80rem | 1280px |
Edits above only live in this browser tab. Nothing is written back to the repo automatically — copy or download the file below and commit it yourself when you're happy with it.