Byggde ett designsystem med 48 tokens på plattformens eget glasmaterial och skrev lintern som avvisar ett magiskt tal, en hårdkodad teckenstorlek eller en animering som ignorerar inställningen för reducerad rörelse.
Arbetet utfört: augusti 2026
48 designtokens, och lintern som försvarar dem
Situation. Ett gränssnitt som byggs genom att vyer läggs till samlar på sig värden: en hörnradie här, ett typsnitt på fjorton punkter där, en animation på två tiondels sekund någon annanstans. Vart och ett är rimligt för sig och tillsammans utgör de en design som inte går att ändra, eftersom det inte finns något som heter ”hörnradien” att ändra — det finns fyrtio av dem, lite olika, utspridda över femtio filer.
Uppgift. Det visuella ordförrådet måste reduceras till en namngiven uppsättning, uttryckt med plattformens eget material i stället för att uppfinnas på nytt, och försvaras av en kontroll så att det förblir reducerat.
Handling. Systemet består av fyrtioåtta tokens i sex grupper: avstånd, typografi, färg, radie, höjdnivå och rörelse. Färg och material bygger på plattformens semantiska färger och dess glasmaterial i stället för fasta värden, vilket är det som får gränssnittet att följa systemets utseende, accentfärgen och kontrastinställningarna utan någon kod som bevakar dem. Typografin mappas till plattformens textstilar så att den skalas med användarens storleksinställning i stället för att låsa ett punktvärde. Lintverktyget avvisar tre saker: en numerisk literal där en token för avstånd eller radie hör hemma, en hårdkodad teckenstorlek var som helst, och en animation som deklareras utan att respektera inställningen för minskad rörelse. Den tredje är den som annars skulle eroderas snabbast, eftersom en animation läggs till i ett ögonblick av finputsning och kontrollen av inställningen är den del som hoppas över — så regeln gör det omöjligt att skriva själva animationen utan den, i stället för att be någon komma ihåg den.
Resultat. Fyrtioåtta tokens beskriver hela gränssnittet, utseendet följer systemet och ingen av de tre erosionerna kan committas. Begränsningen är att ett tokensystem styr konsekvens och inte kvalitet — allt matchar nu, och att matcha är inte detsamma som att vara väldesignat, vilket är en bedömning som inget lintverktyg i det här projektet gör.
Se tillbaka på Stängde färgsystemet vid 28 dokumenterade färger med en linter som fäller ett värde som målas men inte är dokumenterat, dokumenteras men inte målas, är felmätt, skrivs om som en literal eller ligger inom ett perceptuellt avstånd på 0,02 från en befintlig färg. Eller ta en titt på hela portföljen.
En del av en längre historik — och den finns i sin helhet här.
Varje post är skriven på samma sätt: situationen, uppgiften, vad vi gjorde och vad som förändrades.