# How we build systems

> The Orbit tokens, type scale and gates we use to build Leisson systems and check them before release.

Updated: 2026-10-20. Canonical: https://www.leisson.eu/en/systems/how · Language: en · Publisher: Leisson Creative (LEISSON OÜ, reg. 16952932, Tallinn, Estonia)

Versioned token artifact: Orbit v1.0.0 · @leisson/shared v2.7.0 · 116 tokens

## Color — Night and Day side by side

| Token | Night | Day |
|---|---|---|
| color.canvas | #000000 | #FFFFFF |
| color.paper | #121214 | #F0F0FA |
| color.raised | #1A1A1E | #E6E6F0 |
| color.ink | #FAFAFA | #000000 |
| color.ink-2 | rgba(250,250,250,0.70) | rgba(0,0,0,0.72) |
| color.ink-3 | rgba(250,250,250,0.55) | rgba(0,0,0,0.55) |
| color.ink-disabled | rgba(250,250,250,0.38) | rgba(0,0,0,0.38) |
| color.hairline | rgba(250,250,250,0.12) | rgba(0,0,0,0.12) |
| color.hairline-strong | rgba(250,250,250,0.28) | rgba(0,0,0,0.24) |
| color.control-border | rgba(250,250,250,0.48) | rgba(0,0,0,0.48) |
| color.signal | #7CB8FF | #1F5FD1 |
| color.signal-soft | rgba(124,184,255,0.12) | rgba(31,95,209,0.10) |
| color.status-ok | #81C784 | #2E7D32 |
| color.status-warn | #FFB74D | #945700 |
| color.status-crit | #EF9A9A | #C62828 |
| color.button-fill | #FAFAFA | #000000 |
| color.button-fill-ink | #000000 | #FAFAFA |
| color.scrim | rgba(0,0,0,0.60) | rgba(0,0,0,0.40) |

## 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.caption | 13px | 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. Orbit v1.0.0 is internally stable; @leisson/shared v2.7.0 is the related package. DNA 2.0 is a separate specification, not a released version. The released artifact's token count shown at the top of this page is read from the generated `orbit.flat.json` file at build time.

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:

1. **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.
2. **Build.** `packages/orbit-tokens/build.mjs` emits all four outputs at once. The script has no npm dependencies, so the build cannot fail because of a registry.
3. **Verify.** `verify.mjs` measures contrast, monochrome compliance, drift and raw hex. It fails before a wrong value can reach a component.
4. **Sync.** `site/sync-orbit.mjs` copies the flattened tokens into the site build. The site keeps no second copy of the values.
5. **Gates.** CI runs the token check, the content gates, type checking, the Playwright gates and an automated accessibility check (axe-core) before code reaches production.

## How do these 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 |
| ProUXAudit Design System 1.3 | audit and report design reference | 1.3 design reference | finding, priority, decision | web |
| AgroNutikas Design System v9.0 | agronutikas.ee, app, accounting | canonical CSS export | CSS tokens + skill generators | React |
| AxonDeck Design System v2.1 | 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 Orbit tokens made of?

The flattened `orbit.flat.json` contains color, typography, space, motion and other tokens. The token count at the top of this page and the color and typography specimens below read the same generated file; the total is not maintained in editorial copy.

## 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. Separate scripts check contrast, monochrome compliance and raw hex; this page does not give a pass count without evidence from a specific run.

## 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`), a simplified accessibility check (names, alt, labels, contrast), visible content, SEO meta, CTA hierarchy | broken layout or missing meta |
| `claims.mjs` | every case-page metric has a source, ET/EN parity, Estonian typography | an unsourced number or the languages drifting apart |
| `axe-core` | automatically detectable accessibility issues, not a full audit | one serious or critical finding |
| Lighthouse | performance, an automated accessibility score, best practices, SEO | below the CI threshold |

Source: `.github/workflows/orbit-gates.yml`.

An automated check finds only some accessibility issues. Keyboard walkthroughs, screen reader checks and a conformance evaluation are separate manual work; a green gate does not prove that a page fully conforms to WCAG.

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.

- All systems: https://www.leisson.eu/en/systems (Markdown: https://www.leisson.eu/en/systems.md)