Kleuren, letters, knoppen en een logo
Aflevering 3: twee thema's uit één bron, een testpagina die mijn eigen fout vond, een knop die precies 4 pixels zakt, een countdown die niet wiebelt en een logo dat half zo groot was als bedoeld.
Vorige week gingen we over spelregels. Deze week over iets wat je meteen ziet: hoe het eruitziet. Kleuren, letters, knoppen en een logo. Ik dacht dat ik een paar kleurtjes ging kiezen. Ik kreeg een pagina die mijn eigen fouten vond.
Papier en nacht
Een feest voelt als één feest als alles op elkaar lijkt: de uitnodiging op je telefoon, de Studio waar de organisator de show klaarzet, en de tv in de zaal. Dus staan alle kleuren, vormen, schaduwen en lettergroottes van het design system nu op één plek in de code. 38 kleuren, in twee thema's.
Papier is licht, voor de Studio en alles wat je vooraf invult. Nacht is donker, voor de tv en de telefoons tijdens het spel. In een donkere zaal wil je niet in een witte lamp kijken.
De app draait op MakerKit, een starter kit die al knoppen, formulieren en inloggen meebrengt. Ik heb de kleuren gezet waar MakerKit ze wil hebben, en hun eigen maten laten staan. Zo blijven hun updates gewoon werken. Een test laat Tailwind de echte stylesheet bouwen en kijkt of de knopkleur van MakerKit nu naar ons oranje wijst. Dat doet hij. En een losse hexkleur in de code? Die houdt een check tegen: "1 hex colour(s), 0 allowed". Rood. Geblokkeerd. Mooi zo.
De pagina die niemand ziet
Op /dev/style staat nu alles naast elkaar: elke kleur, elke letter, elke knop, in licht en donker. Alleen voor mij en op staging, nooit op de echte site. De pagina wordt gemaakt uit dezelfde bron als de kleuren zelf, dus een nieuwe kleur staat er vanzelf op.
De toegankelijkheidscheck (axe, een tool die meet of iedereen alles kan lezen) vond er meteen drie fouten. De ergste was van mezelf, van de dag ervoor. In het donkere thema kregen de standaardonderdelen nog de tekstkleur van het lichte thema. Donkerblauw op donkerblauw. Contrast 1,07, waar 4,5 het minimum is.
Dat had op de tv gestaan. Op een feest. In het donker. De oorzaak was een eigenaardigheid van CSS: een variabele die naar een andere variabele wijst, wordt op de plek zelf ingevuld, niet later. Nu staat de koppeling in elk thema apart, en de pagina blijft elke dag meten.
Knoppen die je kunt indrukken
Onze knoppen zijn stickers met een harde schaduw. Druk je erop, dan zakt de knop precies 4 pixels omlaag op zijn eigen schaduw, en is die schaduw weg. Het voelt als een echte knop. En omdat ik mezelf niet vertrouw, drukt een test echt met de muis en meet die 4 pixels, in licht en in donker, voor elke soort knop. Wie liever geen beweging ziet, krijgt dezelfde klik zonder animatie.
Een countdown die stilstaat
De letters komen nu van onze eigen server, niet meer van Google: drie lettertypes, vier bestanden, nul verzoeken naar buiten. En toen bleek iets wat ik nooit had bedacht: in de meeste lettertypes is een 1 smaller dan een 8. Een countdown op de tv schuift dan elke seconde een stukje heen en weer. De letters kunnen het wel (even brede cijfers), je moet het alleen aanzetten. Nu staat het aan voor scores, codes en de klok.
Een logo dat je leest
Ik vond het logo "een beetje klein". Klopte: het was 21 pixels hoog, en in de ontwerpen 40. De code gaf het een vaste breedte, en dan wordt het vanzelf klein. Nu krijgt het een hoogte, zoals in het ontwerp. Mijn eerste versie schoof het grotere logo op een tablet half onder de knop "Doe mee". Een test meet nu op acht breedtes dat niets elkaar raakt.
De blog zelf
Deze blog kreeg ook de huisstijl. De oude pagina van de starter kit haalde 73 voor snelheid op een trage telefoon; de nieuwe haalt 98, en 100 voor toegankelijkheid. En elke aflevering verschijnt maandag om 07:00 vanzelf. Ik lees hem op vrijdag, zeg OK, en hoef om zeven uur niets te doen. Je leest dit dus terwijl ik nog slaap.
Voor de nerds: de tokens staan in design/system/tokens.json en worden met een eigen pakket (@kit/design-tokens) naar CSS gegenereerd, met tests die bij elk verschil met het design system falen (ADR 0007). De Playground-componenten zijn een aparte familie naast die van MakerKit, op dezelfde shadcn-onderdelen (ADR 0008). De blog draait op het CMS van MakerKit met eigen pagina's (ADR 0017), en het publicatie-uur is een regel in de code, geen tijdveld (ADR 0131). Alles gebouwd met Claude Code.
Volgende week: de tv en de telefoons in de maat. Meld je aan en lees mee.
