Three systems, one pipeline
Orbit is the Leisson Creative design system: one DTCG token file that generates CSS, Tailwind v4, TypeScript and Figma variables. Alongside it two product systems: AgroNutikas Design System V8.1 and AxonDeck Design DNA v2.0.
Leisson Creative
102 semantic tokens (DTCG) → CSS, Tailwind v4 @theme, TypeScript, Figma variables. Gates: 28/28 contrast, monochrome, drift, no-raw-hex.
AgroNutikas
Estonian-named tokens (rukkilill, mets, talinisu, oht, muld). Canonical export + skill generators (hero, pricing, invoice, VAT return). The token-drift gate measures rendered values, not files.
AxonDeck
One token file (tokens.css · presets.ts · Colors.xaml) for two renderers: React 19 + WPF. Axon Cyan on Abyss, 15:1 contrast, Sentient UI.
Color — Night and Day side by side
#FFFFFF
#F0F0FA
#E6E6F0
#000000
rgba(0,0,0,0.72)
rgba(0,0,0,0.55)
rgba(0,0,0,0.38)
rgba(0,0,0,0.12)
rgba(0,0,0,0.24)
#1F5FD1
rgba(31,95,209,0.10)
#2E7D32
#945700
#C62828
#000000
#FAFAFA
rgba(0,0,0,0.40)
Signal is the only chromatic token: focus ring, active nav, one emphasised number. All other color comes from product screens.
The type scale
| Token | Size | Weight | Line height | Typeface |
|---|---|---|---|---|
| type.display | 72px | 800 | 0.98 | Barlow Condensed |
| type.h1 | 56px | 700 | 1 | Barlow Condensed |
| type.h2 | 44px | 700 | 1.05 | Barlow Condensed |
| type.h3 | 28px | 700 | 1.15 | Barlow Condensed |
| type.h4 | 20px | 600 | 1.2 | Barlow Condensed |
| type.lede | 19px | 400 | 1.5 | Barlow |
| type.body | 16px | 400 | 1.55 | Barlow |
| type.body-sm | 14px | 400 | 1.5 | Barlow |
| type.button | 14px | 700 | 1 | Barlow |
| type.label | 12px | 400 | 1.4 | IBM Plex Mono |
| type.micro | 12px | 400 | 1.4 | IBM Plex Mono |
| type.data | 13px | 400 | 1.5 | IBM Plex Mono |
| type.stat | 40px | 700 | 1 | Barlow Condensed |
What is Orbit?
Orbit is the design system of Leisson Creative (LEISSON OÜ, Tallinn). It is one token file in DTCG format that generates four outputs: CSS custom properties, Tailwind v4 @theme, TypeScript types and Figma variables. The version is v1.0.0 and there are 102 tokens in total (source: packages/orbit-tokens/orbit.tokens.json, counted at build time). Orbit is not a UI library you install — it is the source of truth the libraries are generated from.
This page is itself rendered from those tokens. When a token changes, this page changes with the next release; there is no manual step in between.
How does a token reach the screen?
The pipeline has five steps and every step is scripted:
- Source.
orbit.tokens.json— DTCG structure, semantic names (color.canvas,type.h1,motion.spring.default). A raw hex value in a component is not allowed. - Build.
packages/orbit-tokens/build.mjsemits all four outputs at once. The script has no npm dependencies, so the build cannot fail because of a registry. - Verify.
verify.mjsmeasures contrast, monochrome compliance, drift and raw hex. It fails before a wrong value can reach a component. - Sync.
site/sync-orbit.mjscopies the flattened tokens into the site build. The site keeps no second copy of the values. - Gates. CI runs the token check, the content gates, type checking, the Playwright gates and an axe-core audit before code reaches production.
How do the three systems differ?
| System | Where it runs | Token source | Outputs | Renderers |
|---|---|---|---|---|
| Orbit v1.0.0 | leisson.eu, studio work | orbit.tokens.json (DTCG) | CSS, Tailwind v4, TypeScript, Figma | React |
| AgroNutikas DS V8.1 | agronutikas.ee, app, accounting | canonical CSS export | CSS tokens + skill generators | React |
| AxonDeck DNA v2.0 | AxonDeck WebUI and desktop app | tokens.css | tokens.css, presets.ts, Colors.xaml | React 19 and WPF |
The AgroNutikas tokens carry Estonian names (rukkilill, mets, talinisu, oht, muld) because a farmer reading a report also reads them. The only purpose of the AxonDeck system is to keep two renderers — React on the web and WPF on the desktop — on a single source of truth.
What are the tokens made of?
| Group | Tokens | Example |
|---|---|---|
| primitive | 17 | black, white, grey steps |
| color | 17 | color.canvas, color.ink, color.signal |
| type | 13 | type.h1, type.lede, type.micro |
| space | 14 | space.gutter, space.measure |
| motion | 11 | motion.spring.default, motion.ease.out |
| font, size, breakpoint, radius, elevation, z | 30 | font.display, breakpoint.md, z.topbar |
That is 102 tokens. Spacing runs in 4 px steps up to 128 px and space.measure is 68ch, which is why no paragraph on this site grows wider than a readable line (source: site/orbit/orbit.flat.json, the same file this page renders from).
Why monochrome and a single signal colour?
Because the studio portfolio contains products whose own brand is yellow, green or cyan. If the site chrome were chromatic it would fight every product screenshot. In Orbit the whole chrome is black and white and color.signal is the only chromatic token: focus ring, active navigation, one emphasised number. Every other colour on the page comes from a product screenshot.
The same rule makes the contrast gate measurable: in the token check 28 pairs out of 28 pass the contrast requirement (source: packages/orbit-tokens/verify.mjs output in CI).
What do the gates actually measure?
| Gate | What it measures | When it fails |
|---|---|---|
verify:tokens | contrast, monochrome, drift, raw hex | a wrong value in tokens or a component |
gates.mjs | horizontal scroll at 390 px (source: tests/gates.mjs), a11y, visible content, SEO meta, CTA hierarchy | broken layout or missing meta |
claims.mjs | every number links to a source, ET/EN parity, Estonian typography | an unsourced number or the languages drifting apart |
axe-core | accessibility as a full audit | one serious or critical finding |
| Lighthouse | performance, a11y, best practices, SEO | below the CI threshold |
Source: .github/workflows/orbit-gates.yml.
The gates run on every push. A production release happens on a separate branch and only with green gates.
Can Orbit be used outside the studio?
Not as a public package today — Orbit is not published to npm, and v1.0.0 means the first internally stable version, not a public release. If your team wants the same pipeline for your own brand, that is exactly what the studio builds: tokens, gates and components in your repository, owned by you.