Een ontwerpsysteem, geen stapel uitzonderingen.
Kleur, ruimte, typografie en radius zijn tokens met een naam. Verander het merk en elk blok dat naar een token verwees gaat mee, juist omdat het naar het token verwees en niet naar een kleur die je zelf intikte.
Drie kleuren erin. Een hele schaal eruit.
Geef het merk een primaire kleur, een secundaire kleur en een paginakleur. Alles wat een ontwerp nodig heeft wordt daaruit afgeleid, en de tekstkleuren worden zo afgeleid dat ze het contrast halen, in plaats van op een waarde gezet die toevallig voor één merk voldoet.
merk, accent, kop, bodytekst, gedempt, rand, oppervlak, alternatief oppervlak, de omgekeerde band met bijbehorende tekst, plus een leesbare variant van je accentkleur voor kleine tekst.
Gebruikt door elke marge en padding op deze site. Waarden buiten de schaal zijn de klassieke stille fout: een token dat niet bestaat lost op in niets, en de ruimte verdwijnt.
Twee gewichten van één familie kosten samen één request, en zo krijg je een echte bold in plaats van een die de browser namaakt.
Zo is een afgeronde hoek een beslissing die je één keer voor de hele site neemt. Deze pagina draait op --t-color-brand, --t-space-8, --t-text-2xl en --t-radius-sm.
Drie breedtes, en je kunt ze alle drie apart opmaken.
Elk element heeft eigen opmaak voor desktop, tablet en mobiel, in plaats van één layout die krimpt. De mobiele versie van deze site is gecomponeerd, niet ingeklapt.
Statussen werken op dezelfde manier. Hover en focus staan los van elkaar, en allebei horen ze op alles wat je kunt aanklikken. Een element dat op een muis reageert maar een toetsenbord negeert is maar half af.
Vijfendertig soorten elementen, en een bibliotheek voor die van jezelf.
Koppen, tekst, afbeeldingen, video, formulieren, navigatie, tabs, modals, accordeons, carrousels, overzichten voor je producten, evenementen en artikelen, plus de widgets voor reserveren, tickets en winkelmandje.
Sleep er een op het canvas, of bewaar een sectie die je ontworpen hebt in je eigen bibliotheek en hergebruik hem op andere sites. Alles wat je bouwt kan ook door een agent bewerkt worden, want een blok is JSON en de tools benaderen het via een pad.
Kijk hoe het eruitziet met jouw eigen kleuren erin.
Drie hexcodes en een lettertypekeuze kosten ongeveer tien minuten, en veranderen elke pagina in één keer.