Süsteemid

Kolm süsteemi, üks konveier

Orbit on Leisson Creative'i disainisüsteem: üks DTCG-tokenifail, millest genereeritakse CSS, Tailwind v4, TypeScript ja Figma muutujad. Kõrval kaks tootesüsteemi: AgroNutikas Design System V8.1 ja AxonDeck Design DNA v2.0.

Orbit v1.0.0

Leisson Creative

102 semantilist tokenit (DTCG) → CSS, Tailwind v4 @theme, TypeScript, Figma variables. Väravad: kontrast 28/28, monokroom, drift, no-raw-hex.

Design System V8.1

AgroNutikas

Eestikeelsed tokenid (rukkilill, mets, talinisu, oht, muld). Kanooniline export + skill-generaatorid (hero, hinnad, arve, KMD). Tokenidrifti värav mõõdab renderdatud väärtusi, mitte faile.

Design DNA v2.0

AxonDeck

Üks tokenifail (tokens.css · presets.ts · Colors.xaml) kahele renderdajale: React 19 + WPF. Axon Cyan Abyssil, kontrast 15:1, Sentient UI.

orbit.tokens.json · color.*

Värv – Night ja Day kõrvuti

color.canvas#000000
#FFFFFF

color.paper#121214
#F0F0FA

color.raised#1A1A1E
#E6E6F0

color.ink#FAFAFA
#000000

color.ink-2rgba(250,250,250,0.70)
rgba(0,0,0,0.72)

color.ink-3rgba(250,250,250,0.55)
rgba(0,0,0,0.55)

color.ink-disabledrgba(250,250,250,0.38)
rgba(0,0,0,0.38)

color.hairlinergba(250,250,250,0.12)
rgba(0,0,0,0.12)

color.hairline-strongrgba(250,250,250,0.28)
rgba(0,0,0,0.24)

color.signal#7CB8FF
#1F5FD1

color.signal-softrgba(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.scrimrgba(0,0,0,0.60)
rgba(0,0,0,0.40)

Signaal on ainus kromaatiline token: fookusrõngas, aktiivne nav, üks esiletõstetud arv. Kõik muu värv tuleb toodete ekraanidest.

orbit.tokens.json · type.*

Tüpograafia skaala

Token	Suurus	Kaal	Reavahe	Kirjatüüp
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

Mis on Orbit?

Orbit on Leisson Creative'i (LEISSON OÜ, Tallinn) disainisüsteem. See koosneb ühest tokenifailist DTCG-vormingus, millest genereeritakse neli väljundit: CSS-muutujad, Tailwind v4 @theme, TypeScript-tüübid ja Figma muutujad. Versioon on v1.0.0 ja tokeneid on kokku 102 (allikas: packages/orbit-tokens/orbit.tokens.json, loendatud ehitusajal). Orbit ei ole UI-teek, mille sa installid – see on tõeallikas, millest teegid genereeritakse.

See leht ise on renderdatud samadest tokenitest. Kui token muutub, muutub see leht järgmise väljalaskega – vahepealset käsitsi sammu ei ole.

Kuidas token jõuab failist ekraanile?

Konveier on viiesammuline ja iga samm on skriptitud:

Allikas. orbit.tokens.json – DTCG-struktuur, semantilised nimed (color.canvas, type.h1, motion.spring.default). Toorest heksikoodi komponendis ei tohi olla.
Ehitus. packages/orbit-tokens/build.mjs teeb neli väljundit korraga. Skriptil ei ole npm-sõltuvusi, seega ehitus ei kuku registri tõttu.
Kontroll. verify.mjs mõõdab kontrasti, monokroomsust, drifti ja toorest heksikoodi. Kukub enne, kui vale väärtus jõuab komponenti.
Sünkroniseerimine. site/sync-orbit.mjs kopeerib lamendatud tokenid saidi ehitusse. Sait ei hoia oma koopiat väärtustest.
Väravad. CI jooksutab tokenikontrolli, sisuväravad, tüübikontrolli, Playwrighti väravad ja axe-core auditi enne, kui kood jõuab tootmisse.

Mille poolest kolm süsteemi erinevad?

Süsteem	Kus kasutusel	Tokenite allikas	Väljundid	Renderdajad
Orbit v1.0.0	leisson.eu, stuudio tööd	`orbit.tokens.json` (DTCG)	CSS, Tailwind v4, TypeScript, Figma	React
AgroNutikas DS V8.1	agronutikas.ee, äpp, raamatupidamine	kanooniline CSS-export	CSS-tokenid + skill-generaatorid	React
AxonDeck DNA v2.0	AxonDecki WebUI ja töölauarakendus	`tokens.css`	`tokens.css`, `presets.ts`, `Colors.xaml`	React 19 ja WPF

AgroNutikase tokenid on eestikeelsete nimedega (rukkilill, mets, talinisu, oht, muld), sest need loeb ka põllumees, kes vaatab raportit. AxonDecki süsteemi ainus mõte on hoida kaks renderdajat – veebis React ja töölaual WPF – ühe tõeallika peal.

Millest tokenid koosnevad?

Rühm	Tokeneid	Näide
primitive	17	must, valge, halli astmed
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`

Kokku 102 tokenit. Vahekaugused on 4 px sammuga kuni 128 px-ni ja space.measure on 68ch – see on põhjus, miks ükski tekstilõik sellel saidil ei lähe laiemaks kui loetav rida (allikas: site/orbit/orbit.flat.json, sama fail, millest see leht renderdub).

Miks monokroom ja ainult üks signaalvärv?

Sest stuudio portfellis on tooteid, mille oma bränd on kollane, roheline või tsüaan. Kui saidi enda kroom oleks kromaatiline, võitleks see iga tootepildiga. Orbitis on kogu kroom must-valge ja color.signal on ainus värviline token: fookusrõngas, aktiivne navigatsioon ja üks esiletõstetud arv. Kogu ülejäänud värv lehel tuleb toodete ekraanipiltidest.

Sama reegel teeb kontrastiväravast mõõdetava asja: tokenite kontrollis läbib kontrastinõude 28 paari 28-st (allikas: packages/orbit-tokens/verify.mjs väljund CI-s).

Mida väravad päriselt mõõdavad?

Värav	Mida mõõdab	Millal kukub
`verify:tokens`	kontrast, monokroom, drift, toores heksikood	vale väärtus tokenites või komponendis
`gates.mjs`	horisontaalne kerimine 390 px juures (allikas: `tests/gates.mjs`), a11y, nähtav sisu, SEO-meta, CTA-hierarhia	paigutus katki või meta puudu
`claims.mjs`	iga arv viitab allikale, ET/EN pariteet, eesti tüpograafia	arv ilma allikata või keel lahku läinud
`axe-core`	juurdepääsetavus täisauditina	üks tõsine või kriitiline leid
Lighthouse	jõudlus, a11y, parimad praktikad, SEO	alla künnise CI-s

Allikas: .github/workflows/orbit-gates.yml.

Väravad jooksevad iga pushi peal. Tootmisväljalase käib eraldi harult ja ainult roheliste väravatega.

Kas Orbitit saab kasutada väljaspool stuudiot?

Praegu mitte avaliku paketina – Orbitit ei ole npm-i avaldatud ja versioon v1.0.0 tähendab esimest sisemiselt stabiilset versiooni, mitte avalikku väljalaset. Kui su meeskond tahab sama konveierit oma brändile, siis see ongi see, mida stuudio ehitab: tokenid, väravad ja komponendid sinu enda repos, sinu omanduses.

Uuendatud 2026-09-12 · Markdown · llms.txt