Designsystem
Frick Design System
Designsystemet mitt: egne farger og egen typografi i lys og mørk modus, og et bygg som nekter å slippe gjennom tekst folk ikke kan lese.
Skjermbilde av palettsiden i Frick, kjørt lokalt fra commit 1302c8f, 2. august 2026.
Jeg vil at det jeg bygger skal se ut som meg, ikke som rammeverket alle andre bruker. Frick er designsystemet mitt: fargene, typografien og komponentene som går igjen i alt jeg lager, eid av meg. Systemet er ti palletter, og hver palett er et par: en mørk tone og en lys tone som hører sammen.
Det viktigste er at reglene passer seg selv. En vakt måler kontrasten mellom hver tekstfarge og bakgrunnen sin, i begge modusene, og stopper bygget hvis noe faller under kravet. God lesbarhet skal ikke avhenge av at jeg husker å være nøye. Paletten som heter Tinholt, er den denne siden er malt med.
Slik brukes det
To attributter, og resten følger
data-theme velger paletten
Ti navn å velge mellom: blue, blueprint, default, foundry, green, meadow, rose, thriller, tinholt og workshop. Navnet settes som et attributt, ingenting mer.
data-theme-mode velger tonen
Lys eller mørk. Attributtet kan settes på rotelementet, eller på én enkelt seksjon hvis bare den skal snu. Nestede bytter virker hele veien ned.
Palettene er kompilert på forhånd
Hver palett er skrevet som et typet objekt og kompilert til statisk CSS i byggesteget. Nettleseren leser variabler, ikke logikk.
Tekst har navngitte roller
Ved siden av vanlige HTML-elementer finnes tretten roller: display, ingress, brødtekst, etikett, meta, bildetekst, sitat, overline og flere. De brukes når semantikk og visuell rolle ikke er samme sak.
Tallene
Målt, ikke antatt
10
Palletter
Hver med et mørkt og et lyst par. Tinholt er den denne siden bruker.
17
Plasser per modus
Bakgrunn, tekst, aksent, primær, sekundær, dempet, fare, popover, kantlinje, felt og fokusring, definert for både lys og mørk.
200
Fargepar porten måler
Ti palletter ganger to modus ganger ti par. Åtti av dem finnes bare som blandingsuttrykk og må regnes ut før de kan måles.
506 av 506
Endringer som er mine
Monorepoet ble bygget alene, våren 2026. Andelen er talt i korpus-dossieret over tiåret.
Kildercommit:1302c8fpaper:frikk-tiaret-dossier
Vakten
Da porten tok meg
Paletten Thriller hadde en aksentfarge som målte 1,26 mot bakgrunnen sin i mørk modus. Ingen leser tekst på det. Porten stoppet bygget, og fargen ble byttet ut med en som holder kravet. Det er hele poenget: regelen fant feilen, ikke jeg.
Videre
Siden du leser nå
jarl.no er satt i Tinholt: navy #18243a mot taupe #ebe4de, de samme to verdiene som står i bildet over. Innholdet kommer fra en Barkpark-instans som er min egen.