Kuidas me süsteeme ehitame
Orbiti tokenid, tüübiskaala ja väravad, millega Leissoni süsteemid ehitatakse ja enne avaldamist kontrollitakse.
Värv – Night ja Day kõrvuti
#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)
rgba(0,0,0,0.48)
#1F5FD1
rgba(31,95,209,0.10)
#2E7D32
#945700
#C62828
#000000
#FAFAFA
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.
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:
- 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.mjsteeb neli väljundit korraga. Skriptil ei ole npm-sõltuvusi, seega ehitus ei kuku registri tõttu. - Kontroll.
verify.mjsmõõdab kontrasti, monokroomsust, drifti ja toorest heksikoodi. Kukub enne, kui vale väärtus jõuab komponenti. - Sünkroniseerimine.
site/sync-orbit.mjskopeerib lamendatud tokenid saidi ehitusse. Sait ei hoia oma koopiat väärtustest. - 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.