Frivio Design
Den eneste kilden til sannhet for alt brukergrensesnitt i Frivio. Minimalt, høykontrast, mye luft, monokromt med én blå aksent — aksenten signaliserer tilstand og hierarki, aldri dekorasjon.
Alle tokens ligger i app/globals.css (@theme static og :root), sammen med .type-*-typografiklassene. Delte komponenter i components/ui/ refererer disse tokenene og hardkoder aldri verdier.
Denne siden er et levende speil: alt under bruker de ekte tokenene og komponentene, og fargeverdiene leses live. Endrer noen globals.css, endrer siden seg med — i begge tema.
Hvem bruker den, og hvordan
Founder vurderer og retter systemet herfra. Selgere bruker den som referanse i samtaler om produktet. Andre Claude Code-agenter — i dette repoet og i andre prosjekt — henter design.md og frivio-ui.skill som maskinlesbar spesifikasjon og droppbar startpakke.
Start med skillen, ikke med denne siden
Designsystemet er pakket som en Claude Code-skill. Den inneholder lovene, anti-mønstrene og avledningsreglene — pluss to filer en agent kan slippe rett inn i et nytt prosjekt: frivio-tokens.css (alle tokens + typografiklasser, laster fontene selv) og frivio-kit.tsx (komponenter, ingen avhengigheter utenom React).
curl -O https://www.frivio.no/frivio-ui.skill && unzip frivio-ui.skill -d .claude/skills/Skillen trigger seg selv på formuleringer som «redesign dette», «gjør det penere» eller «vårt designsystem».
Importér tokenene én gang i rota
Tokenene leses gjennom Tailwind arbitrary values, så det trengs ingen endring i tailwind.config. Virker med Tailwind v3 og v4. Mørkt er standard; sett data-theme="light" på <html> for lyst — token-navnene er de samme i begge tema, kun verdiene bytter.
import './frivio-tokens.css' // + class="frv" på et rot-elementBygg fra komponentene, ikke fra rå div-er
Kartlegg først hva hvert element i kilden gjør (ikke hvordan det ser ut), og slå deretter opp funksjonen under Komponenter i sidemenyen: liste med poster → ListRow, varsel/tips → Callout, tall + trend → StatCard. Trenger du noe som ikke finnes, følg avledningsreglene i SKILL.md — ikke importér et fremmed mønster.
Jobber du i DETTE repoet: kilden er globals.css
Legger du til et token eller en komponent her, må fire flater følge med — ellers finnes den nye tingen ikke for founder, og agenter i andre prosjekt bygger mot en utdatert spesifikasjon.
npm run build:skillRegenererer skillens tokenfil fra globals.css og pakker .skill-arkivet. Oppdater i tillegg public/design.md og denne siden manuelt.
De fire flatene
Systemet finnes fire steder med ULIK status. Å blande dem er hvordan et designsystem stille råtner.
Rediger her
npm run build:skill
Oppdater manuelt
Oppdater manuelt
Skill (bygg med systemet)
https://www.frivio.no/frivio-ui.skill
Spesifikasjon (slå opp verdier)
https://www.frivio.no/design.md
Lovene og anti-mønstrene
skill/frivio-ui/SKILL.md