IKARUS_LABS// Studio
Design Token Library
Production CSS variable system: colour ramp, 8pt spacing, fluid type, radius, elevation
Opens this fall. Join the waitlist and I will email you the day it goes live.
What you get
- 13 art-direction archetypes, compiled from one source
- 305–315 tokens per theme, counted from the flat export
- 6 export files per theme, 5 of them distinct — CSS custom properties, a Tailwind theme.extend object, a flat token JSON, a Figma-shaped copy of that same JSON, a short brand-alias sheet, and a standalone HTML preview board. The Figma copy is byte-identical to the flat JSON, which is why six files are five formats
- Preview boards exist for 15 of the 20 themes; the other five files exist for all 20
- The compiler itself — build, OKLCH ramp generator, contrast linter, preview renderer
- Two agent workflow prompts
- Art-direction notes for 2 of the 20 themes
What it is
A design token layer in CSS custom properties, compiled from JSON source: a 50–950 brand ramp plus neutrals, spacing, a type scale with weights and tracking, radii, elevation and motion. Four component token sets sit on top of it — button, card, input and nav.
How it's used
Drop the token files into any web project, point your components and Tailwind config at the variables, and reskin by overriding the physics layer.
How it looks
16 distinct art directions off one source. Swap two attributes and the ramp, the type stack, the radius and the motion posture all change together — the switcher below this page’s Lab is the same files doing it live.
The Token Lab
The product, running.
Pick a theme. The nav, the card, the input and the buttons below are styled by that theme’s compiled tokens, and the chain beside them shows the same value at all three tiers. Nothing in the markup changes when you switch — only two attributes on one element.
Theme Mode lightSettle 200ms--duration-base
The four components this library ships
Nav, card, input and button. There is no fifth, because there is no fifth set of component tokens in the box.
Every value in this card is a token, resolved by the theme selected below.The theme did not resolve, so nothing is being shown. This is the failure state, not the product.The chain and the readout beside this are values read out of the export files at build time, so they are still shown. The specimen is the browser resolving those same values, and that is what failed.
| Tier | Token | Value |
|---|---|---|
| Primitive | --color-brand-500exports/css/creative-portfolio.css:53 | #5B2EEB |
| Semantic | --primary-defaultexports/css/creative-portfolio.css:307 | #5B2EEB |
| Component | --button-primary-bgexports/css/creative-portfolio.css:346 | #5B2EEB |
Components never reference primitives directly. The source side of the same walk: themes/creative-portfolio/theme.json declares color.brand.500 → semantic/light.json:27 points primary.default at {color.brand.500} → semantic/components/button.json:14 points button.primary.bg at {primary.default}.
The specimen renders 53 of the 305–315 tokens each theme defines. That set is not hand-listed: it is the specimen stylesheet’s own seed list plus everything those values reference through var(), which is how --color-brand-500-rgb and --shadow-ink-rgb got in — dragged in by --input-focus-ring and --card-shadow. That is the dual --token / --token-rgb emit, working, in your browser.
Archetypes · 13
Built on this system · 3
Mode
Built on this system, not in the box.
- kash-the-kreator — The practice’s own brand, forked from creative-portfolio.README.md:33
- ssgc — A client brand, forked from tech-systemic.README.md:34
- golden-tiger — A client theme; its archetype generalization lives in themes/navy-gold-realtor.themes/golden-tiger/theme.json:3
Motion is off. The theme’s transition duration is printed in the readout instead.
Check it yourself. Scoped theming should actually scope. Paste this into your console on this page: getComputedStyle(document.documentElement).getPropertyValue('--button-primary-bg') — it returns an empty string on every theme and every mode, because no component token ever reaches the document root.
16 themes are switchable here; 20 exist on disk. The other 4 are named rather than hidden, and absent from the switcher rather than greyed out, because a disabled row invites a guess about why. The 13 archetypes are the thirteen named at README.md:30.
- espresso-brass, navy-gold-realtor — Each self-declares as an archetype on line 3 of its own theme file, but neither is among the thirteen named in the README. Classifying them is an owner decision, not ours to guess.themes/espresso-brass/theme.json:3 · themes/navy-gold-realtor/theme.json:3 · README.md:30
- liquid-glass-neutral — Not classified as an archetype or a fork by anything in the repo.themes/liquid-glass-neutral/theme.json:3
- ikarus-labs — The one hand-written export. It declares 29 of the 53 token names the specimen renders, so it cannot carry the specimen without inventing 24 values.exports/css/ikarus-labs.css:1
The faces these themes declare are not loaded on this page. The specimen renders whatever your system resolves from the theme’s stack, and the declared stack is printed beside it as its token value, so the substitution is stated rather than silent.
What we ran, and what it does not cover.
Each row is a command you can run against the files you receive, with its real scope and its real output.
$ node scripts/contrast.mjs0 AA TEXT failure(s) across 20 theme(s).Seven named text pairs — body, secondary and muted on page and on card, the button label on primary, and links on page — graded at 4.5:1, or 3.0:1 for muted and large text. Both modes, twenty themes.
This is not a claim that the whole system is WCAG AA. The same run prints 41 informational lines. 40 of them are the border-on-page pair — every one of the 20 themes, in both modes, between 1.50:1 and 2.82:1 — which the script exempts as decorative under WCAG 1.4.11. The remaining line is a focus ring: espresso-brass, light, at 3.00:1. A focus indicator is not decorative, so it is named separately rather than counted with the borders. All of it is printed here because a pass you cannot see the edges of is not a pass.
Seven pairs is seven pairs. Status and state colours are not among them: --status-info on --status-info-surface measures 3.51:1 across all 16 light builds in this switcher, which is under 4.5:1 for text at a chip's size and is not graded by this run. The specimen above does not render that pair — it used to, and that is why the measurement is printed here rather than deleted with it.scripts/contrast.mjs:25-33
$ node scripts/build-token-lab.mjs53 of 53 token names extracted from 16 of 16 compiled themes, 0 missing.The extractor takes the specimen’s seed token list, follows every var() reference inside those values, and demands the closure from each theme’s real export. A theme missing one name is excluded, not filled in.
It excluded one: ikarus-labs, the hand-written export, declares 29 of 53. That is the finding, not a rounding error — the compiled themes hold the naming contract and the hand-written one does not.
Two things have no run, so this page makes no claim about either.
- DTCG conformance. The files carry $type, $value and $description on every token and a genuine three-tier structure, but the declared $schema is a documentation URL rather than a schema document, and no validator has been run against this tree. So this page makes no conformance claim.
- A Figma or Tokens Studio import. Never attempted in the repo, so it is not claimed here in any form, including “designed for”.
What this is not.
Everything below is checkable in the files. It is here so you find it now rather than after you pay.
- Four components, not forty — button, card, input, nav. Eight more are named in the library’s own roadmap and are not built.SYSTEM-PLAN.md:98
- 6 export files per theme, 5 of them distinct. The Figma-shaped file is a byte-identical copy of the flat JSON, and that holds for every theme on disk, not just the sample.scripts/build.mjs:423-425
- Dark mode ships in the CSS export and in the standalone preview board. The flat JSON and the Figma-shaped copy are light-only, because the compiler serialises the light build twice.scripts/build.mjs:421,424 · scripts/preview.mjs:116 · exports/preview/luxury-heritage.html:427,591
- Preview boards exist for 15 of the 20 themes. The 5 without one are espresso-brass, golden-tiger, ikarus-labs, liquid-glass-neutral, navy-gold-realtor.exports/preview/
- Art-direction specs exist for 2 of the 20 themes — creative-portfolio and luxury-heritage — though the README declares a spec.md part of every theme.README.md:19
- A Figma or Tokens Studio import has never been run against these files. Not “supported” — unverified.package.json:7-16
- Version 0.1.0. No changelog, no test suite and no schema validator — the contrast linter, run as npm run check or npm run ci, is the only automated gate the package declares.package.json:3,13-15
- One theme’s CSS export is hand-written rather than compiled, and it declares 29 of the 53 token names this specimen renders. That is why it is named here and not in the switcher.exports/css/ikarus-labs.css:1
- This page has not opened the delivered file. Every filename, byte count and hash it prints is measured from the library’s own exports at build time, and is labelled as such.dashboard/scripts/build-token-lab.mjs
A seller who was lying would not write this section.
Licence
Licence terms are confirmed at purchase. They are not published here, and nothing on this page states or implies what they are.
There is no licence file in the library and no license field in its package manifest, which is marked private — package.json:1-17. Publishing terms this page cannot source would be an invention, so it publishes none.
What's inside
exports/css/luxury-heritage.css
CSS custom properties — light and dark, with an OKLCH fallback block · 34,106 B, measured on luxury-heritage. 20 of 20 themes have this file.
exports/tailwind/luxury-heritage.js
A Tailwind theme.extend object · 8,617 B, measured on luxury-heritage. 20 of 20 themes have this file.
exports/json/luxury-heritage.flat.json
A flat token JSON, one dot-path per token · 27,264 B, measured on luxury-heritage. 20 of 20 themes have this file.
exports/figma/luxury-heritage.tokens.json
A Figma-shaped copy of the flat JSON — byte-identical to it · 27,264 B, measured on luxury-heritage. 20 of 20 themes have this file.
exports/brand/luxury-heritage.brand.css
A short brand-alias sheet · 1,636 B, measured on luxury-heritage. 20 of 20 themes have this file.
exports/preview/luxury-heritage.html
A standalone HTML preview board · 29,912 B, measured on luxury-heritage. 15 of 20 themes have this file.
Made with this
This exact product, out in the wild.
The demo above isn't a mockup — it's shipped work made with Design Token Library, posted for a real brand.
