Designsystem
Jeg ønsket noe enkelt, men med karakter. Jeg er ikke designer, så jeg valgte sammenheng gjennom begrensninger: to farger som inverteres, skarpe kanter og tydelig typografi. Færre valg gjør hver beslutning mer bevisst og setter innholdet først.
Systemet bruker opasitet for nyanser (f.eks. main/10 eller secondary/10), bevarer kontrast i lys/mørk, og begrenser bevegelse til det funksjonelle. Tilgjengelighet er grunnmuren: kontrast, lesbarhet, fokus og semantikk.
Fargesystem
Hjertet i systemet. Å begrense seg til bare to farger tvinger til å tenke på hierarki, kontrast og tilgjengelighet fra starten. Ingen mellomliggende grå, ingen aksenter, ingen rømningsveier.
--color-main
Tekst, kanter, primære elementer
--color-secondary
Bakgrunner, alternativ tekst
Ugjennomsiktighetsvarianter
De eneste "tilleggsfarger" tillatt: ugjennomsiktighet. Bruk av gjennomsiktighet skaper subtilitet og dybde uten å bryte to-fargeregelen.
Opasitet gir nyanser uten å introdusere nye farger. Bruk det til tilstander, bakgrunner og delikate skiller.
Hoved over sekundær
Sekundær over hoved
Temasystem
Hvert tema definerer to farger: colorful (levende/aksentfarge) og contrasty (mørk/bakgrunnsfarge). I lys modus blir colorful til --color-main (tekst/kanter) og contrasty blir til --color-secondary (bakgrunner). I mørk modus bytter de: contrasty blir til --color-main og colorful blir til --color-secondary. På denne måten opprettholder systemet høy kontrast i begge moduser ved å bruke bare to farger per tema.
Kommandolinjegrensesnitt
colorful: #e5e5e6
contrasty: #000000
Kaliumberiket meme-energi
colorful: #D4B340
contrasty: #020123
Monokrom LCD-legende
colorful: #A4D110
contrasty: #044F27
Blåskjerm-datalegende
colorful: #BFDDF5
contrasty: #0A0A1C
Kuromi-flyt
colorful: #FA7FB5
contrasty: #0A0A0A
Typografi
To skriftfamilier med tydelige roller. Begrensningen fortsetter.
“Den lille reven gikk glad og lekende ned til elva mens han sang.”
“Den lille reven gikk glad og lekende ned til elva mens han sang.”
“Den lille reven gikk glad og lekende ned til elva mens han sang.”
“Den lille reven gikk glad og lekende ned til elva mens han sang.”
Brødtekst skal leses rolig og uten anstrengelse. Korte linjer, høy kontrast og en jevn vertikal rytme leder blikket uten støy.
Brødtekst skal leses rolig og uten anstrengelse. Korte linjer, høy kontrast og en jevn vertikal rytme leder blikket uten støy.
const theme = "brutalist";
UI · ETIKETT · SYSTEM
Knapper
Prosjektkort
Visuelle elementer
Nyttemønster for å skille seksjoner og fremheve områder uten nye farger. Dette var motivasjonen for å legge til opasiteter: bruk gjennomsiktighet i stedet for flere farger. Respekterer tofargesystemet og tilpasser seg temaer.
Dekorativ avdeler som bruker bølgeform for å dele seksjoner uten nye farger. Bruker opasitet for nyanser og følger temaets gjeldende kontrast.