# Kuidas me süsteeme ehitame

> Orbiti tokenid, tüübiskaala ja väravad, millega Leissoni süsteemid ehitatakse ja enne avaldamist kontrollitakse.

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

Versioonitud tokeniartefakt: Orbit v1.0.0 · @leisson/shared v2.7.0 · 116 tokenit

## Värv – Night ja Day kõrvuti

| 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) |

## 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.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 |

## 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. Orbit v1.0.0 on sisemiselt stabiilne; @leisson/shared v2.7.0 on seotud pakett. DNA 2.0 on eraldi spetsifikatsioon, mitte avaldatud versioon. Lehe ülaosas näidatud avaldatud artefakti tokenite arv loetakse ehituse lamendatud failist `orbit.flat.json`.

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:

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

## Mille poolest need süsteemid 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 |
| ProUXAudit Design System 1.3 | auditi ja raporti kujundusviide | 1.3 disainiviide | leid, prioriteet, otsus | veeb |
| AgroNutikas Design System v9.0 | agronutikas.ee, äpp, raamatupidamine | kanooniline CSS-export | CSS-tokenid + skill-generaatorid | React |
| AxonDeck Design System v2.1 | 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 Orbit tokenid koosnevad?

Lamendatud `orbit.flat.json` sisaldab värvi-, tüpograafia-, vahe-, liikumis- ja muid tokeneid. Lehe ülaosas näidatud tokenite arv ning allpool olevad värvi- ja tüpograafianäited loevad sama genereeritud faili; tokenite koguarvu ei hoita käsitsi toimetatud tekstis.

## 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. Kontrasti, monokroomsust ja toorest heksikoodi kontrollivad eraldi skriptid; sellel lehel ei esitata läbimise arvu ilma konkreetse käivituse tõendita.

## 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`), lihtsustatud ligipääsetavuskontroll (nimed, alt, label, kontrast), nähtav sisu, SEO-meta, CTA-hierarhia | paigutus katki või meta puudu |
| `claims.mjs` | igal case-lehe mõõdikul on allikas, ET/EN pariteet, eesti tüpograafia | arv ilma allikata või keel lahku läinud |
| `axe-core` | automaatselt tuvastatavad ligipääsetavusvead, mitte täisaudit | üks tõsine või kriitiline leid |
| Lighthouse | jõudlus, automaatne ligipääsetavuse skoor, parimad praktikad, SEO | alla künnise CI-s |

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

Automaatne kontroll leiab ainult osa ligipääsetavusvigadest. Klaviatuuriga läbimine, ekraanilugejaga kontroll ja standardivastavuse hindamine on eraldi käsitsi tehtavad tööd; roheline värav ei tõenda, et leht vastab WCAG-le täielikult.

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.

- Kõik süsteemid: https://www.leisson.eu/et/systems (Markdown: https://www.leisson.eu/et/systems.md)