# Indeks Designsystem

> Felles retningslinjer og komponenter for SpareBank 1. Inneholder tokens, utility-klasser, React- og web components samt mønstre og maler.


## docs


### adr

- [ADR-DS-001: Monorepo og byggverktøy](/docs/adr/ADR-DS-001-monorepo-og-byggverktoy.md): Alle pakker i én monorepo med pnpm (sikkerhetsisolasjon) og Turborepo (intelligent caching). Workspace-protokoll for interne avhengigheter.
- [ADR-DS-002: Versjonering og publisering](/docs/adr/ADR-DS-002-versjonering-og-publisering.md): CSS, Web Components og React har alltid identisk versjonsnummer. Changesets for versjonering. Dual publishing til CDN (anbefalt) og npm.
- [ADR-DS-003: CI/CD med GitHub Actions](/docs/adr/ADR-DS-003-ci-cd.md): GitHub Actions for all CI/CD med spesialiserte workflows gruppert etter prefiks — pr-, release-, deploy- og security-.
- [ADR-DS-004: Web Components](/docs/adr/ADR-DS-004-web-components.md): Web Components brukes der ren HTML + CSS ikke er nok. React-pakken eksponerer samme funksjonalitet med idiomatisk React API.
- [ADR-DS-005: React-bibliotek (Vite, ESM, React 18/19)](/docs/adr/ADR-DS-005-react-bibliotek.md): React-biblioteket bygges med Vite i library mode, distribueres som ESM-only, og støtter React 18 og 19 som peer dependency.
- [ADR-DS-006: Design tokens](/docs/adr/ADR-DS-006-tokens-og-farger.md): Design tokens som JSON er single source of truth for web, iOS og Android. Toveis Figma-synkronisering med klare ansvarsgrenser.
- [ADR-DS-007: Fargesystem](/docs/adr/ADR-DS-007-fargesystem.md): Farger genereres med OKLCH for perseptuelt uniforme skalaer. HSL forkastet fordi opplevd lysstyrke varierer mellom fargetoner.
- [ADR-DS-008: Spacing-system (faste breakpoints + density)](/docs/adr/ADR-DS-008-spacing-system.md): Spacing bruker faste px-verdier på tre mobile-first breakpoints kombinert med et density-system (Compact/Default/Comfortable). Typografi bruker en rem-basert geometrisk skala uten density.
- [ADR-DS-009: CSS-arkitektur](/docs/adr/ADR-DS-009-css-only-styling.md): All styling bruker ren HTML og CSS. Ingen CSS-in-JS. ix-prefix på alle klasser og variabler.
- [ADR-DS-010: Komponentutvikling og testing](/docs/adr/ADR-DS-010-komponentutvikling-og-testing.md): Storybook for komponentutvikling. Docker-basert Playwright for reproduserbare visuelle tester og accessibility.
- [ADR-DS-011: Dokumentasjon (Docusaurus, midlertidig)](/docs/adr/ADR-DS-011-dokumentasjon.md): Docusaurus 3 som midlertidig dokumentasjonsplattform. Migreres når CMS-avklaringer med merkevare er på plass.
- [Kort fortalt](/docs/adr/oversikt.md): En rask, folkelig oversikt over hvorfor vi bygger Indeks selv og hvilke valg vi har tatt. For deg som vil ha helheten uten å lese alle ADR-ene.
- [Retningslinjer for Indeks designsystem](/docs/adr/retningslinjer.md): Disse retningslinjene er ikke arkitekturbeslutninger, men konvensjoner teamet har blitt enige om.
- [ADR-DS-XXX: [Beskrivende tittel]](/docs/adr/template.md): Mal for nye arkitekturbeslutninger i Indeks designsystem.

### grunnleggende

- [Native](/docs/grunnleggende/native.md): Indeks brukes i hybridapper der webinnhold vises i native-appens WebView. For brukeren skal web-innholdet oppleves som en naturlig del av den native appen.
- [Border](/docs/grunnleggende/tokens/border.md): Komponentene vi tilbyr har riktig border-radius og border-width som standard. Hvis du skal lage noe eget, kan du bruke border-variablene vi tilbyr.
- [Farger for Native](/docs/grunnleggende/tokens/farger-native.md): Pakken @sb1/indeks-tokens inneholder fargetokens som kan bygges til forskjellige plattformer, inkludert native (iOS og Android).
- [Farger for Web](/docs/grunnleggende/tokens/farger-web.md): Pakken @sb1/indeks-tokens inneholder fargetokens som brukes i hele designsystemet. På web trenger de aller fleste ikke å generere farger selv — den ferdig bygde CSS-en inneholder alt du trenger. Men du kan generere din egen web-CSS med et eget theme ved hjelp av den samme build-colors-kommandoen som brukes for native (iOS/Android).
- [Fargeskalaer](/docs/grunnleggende/tokens/fargeskalaer.md): Et theme defineres med sju basisfarger — brand, success, info, danger, warning, gray og neutral. Ved build utvides hver av disse til en 20-trinns fargeskala (0–950), som blir til primitivene (--ii-primitive-*) de semantiske fargene peker på.
- [Introduksjon](/docs/grunnleggende/tokens/introduksjon.md): Design tokens er de minste byggesteinene i designsystemet. De representerer visuelle verdier som farger, typografi, spacing, radius og skygger osv. definert som navngitte variabler i stedet for faste verdier.
- [Spacing](/docs/grunnleggende/tokens/spacing.md): Spacing-systemet i Indeks sikrer konsistente avstander mellom elementer på tvers av flater. Systemet bruker faste px-verdier som justeres på tre breakpoints, og kan tilpasses behov for mer eller mindre kompakt visning.
- [Z Index](/docs/grunnleggende/tokens/z-index.md): Z-index er en CSS-egenskap som styrer stablingsrekkefølgen til elementer på en nettside. Med z-index kan du bestemme hvilke elementer som skal ligge over eller under andre, spesielt når de overlapper hverandre. For å sikre konsistens og forutsigbarhet i designet, har vi definert en rekke z-index tokens som dekker vanlige brukstilfeller i SpareBank 1 sitt designsystem.
- [Typografi](/docs/grunnleggende/typografi.md): Våre fonter

### hjem

Indeks er SpareBank 1 sitt designsystem - et verktøy for å lage helhetlige, brukervennlige og inkluderende løsninger.

- [Indeks](/docs/hjem.md): Indeks er SpareBank 1 sitt designsystem - et verktøy for å lage helhetlige, brukervennlige og inkluderende løsninger.

### kom-i-gang

- [Bidra](/docs/kom-i-gang/bidra.md): Enten du mangler en komponent, har forslag til forbedringer, eller har funnet noe som ikke fungerer som det skal, vil vi gjerne høre fra deg.
- [Designer](/docs/kom-i-gang/designer.md): Før du begynner
- [Introduksjon](/docs/kom-i-gang/grunnleggende.md): Visuell identitet
- [Kontakt](/docs/kom-i-gang/kontakt.md): Indeks blir best når vi snakker sammen. Vi setter stor pris på alle innspill, spørsmål og bidrag fra dere som bruker systemet.
- [Migrering fra FFE til Indeks](/docs/kom-i-gang/migrering.md): Indeks er et helt nytt designsystem, bygget opp fra grunnen med en annen arkitektur og struktur enn FFE. For deg som skal migrere fra FFE betyr dette at enkelte ting må gjøres litt annerledes enn før.
- [Utvikler](/docs/kom-i-gang/utvikler.md): Kom i gang med Indeks i prosjektet ditt. Velg teknologi under, så tilpasser guiden seg.

### komponenter

- [Accordion](/docs/komponenter/accordion.md): Accordion viser og skjuler innhold i seksjoner. Den er nyttig når mye innhold skal gjøres oversiktlig: brukeren ser overskriftene og åpner kun det som er relevant. Komponenten bygger på native `/`, så tastatur og skjermleser fungerer uten ekstra oppsett.
- [Button](/docs/komponenter/button.md): Button lar brukeren utføre en handling, som å sende inn et skjema, lagre endringer eller navigere videre i en prosess.
- [Card](/docs/komponenter/card.md): Card er én ting: en avgrenset, selvstendig innholdsenhet med fast ramme og bakgrunn. Et kort kan
- [Chip](/docs/komponenter/chip.md): Chip er små, interaktive komponenter som lar brukeren gjøre raske valg, filtrere innhold eller trigge handlinger. Chips brukes ofte i grupper og gir en kompakt og oversiktlig måte å presentere valg på.
- [Button chip](/docs/komponenter/chip/button.md): En button chip fungerer som en knapp og trigger en handling — for eksempel et hurtigvalg, et forslag eller et filter brukeren aktiverer. Den har ingen vedvarende valgt tilstand.
- [Checkbox chip](/docs/komponenter/chip/checkbox.md): En checkbox chip er en gruppe chips der brukeren kan velge ett eller flere alternativer samtidig — som kompakte filter- eller preferansevalg. Hvert valg er uavhengig av de andre.
- [Radio chip](/docs/komponenter/chip/radio.md): En radio chip er en gruppe chips der brukeren velger nøyaktig ett alternativ — som en kompakt segment-velger eller filtervalg. Å velge én chip fjerner automatisk valget på den forrige.
- [Removable chip](/docs/komponenter/chip/removable.md): En removable chip representerer et aktivt valg eller en verdi som brukeren kan fjerne — for eksempel et valgt filter. Den finnes kun i valgt tilstand (den eksisterer ikke før den er valgt) og vises med fylt aksentfarge og et kryss til høyre.
- [Icon](/docs/komponenter/icon.md): Ikon-komponenten viser SVG-ikoner fra SpareBank 1s CDN ved hjelp av CSS mask-image. Ikoner arver farge fra omgivende tekst.
- [Ikonbruk](/docs/komponenter/icon-analyse.md): Oversikt over alle Material Design-ikoner brukt i SB1-apper, med hvor mange apper som bruker hvert ikon. Basert på bruksdata fra SpareBank 1-apper.
- [InteractiveIcon](/docs/komponenter/interactive-icon.md): InteractiveIcon er en klikkbar ikon-flate — en kompakt knapp som bare viser et ikon. Den gir tydelig visuell tilbakemelding ved pekehvil, trykk og fokus, med en fargetone som kan styres av en status.
- [Message](/docs/komponenter/message.md): Message formidler status eller resultatet av en handling — informasjon, suksess, advarsel eller feil — uten å avbryte flyten. Komponenten brukes inline, tett på innholdet den forklarer, og kan strekkes til full bredde av forelderen.
- [Modal](/docs/komponenter/modal.md): Modal brukes til å vise innhold oppå eksisterende side og krever at brukeren forholder seg til innholdet før de kan fortsette. Komponenten fungerer som en tom container som fylles med innhold basert på behov. Den bygger på det native ``-elementet, så fokushåndtering, tastatur og skjermleser fungerer uten ekstra oppsett.
- [Grid](/docs/komponenter/primitives/grid.md): Grid er en layout-primitiv for å stable innhold i to dimensjoner — vertikalt og horisontalt. Den fungerer både som custom element (`) og som CSS-klasse (.ix-grid`).
- [Stack](/docs/komponenter/primitives/stack.md): Stack er en layout-primitiv for å stable innhold i én dimensjon — vertikalt eller horisontalt. Den fungerer både som custom element (`) og som CSS-klasse (.ix-stack`).
- [ProgressBar](/docs/komponenter/progress-bar.md): ProgressBar viser fremdriften i én sammenhengende prosess — enten som pågående progresjon (for eksempel opplasting) eller som status for at prosessen er fullført eller feilet. Komponenten er rent informativ og kan ikke motta brukerinput.
- [ReadMore](/docs/komponenter/read-more.md): ReadMore viser og skjuler én frittstående tekstblokk bak en klikkbar label. Den er nyttig for utdypende, sekundær informasjon som ikke alle trenger med en gang: brukeren ser labelen og åpner forklaringen kun ved behov. Komponenten bygger på native `/`, så tastatur og skjermleser fungerer uten ekstra oppsett.
- [Checkbox](/docs/komponenter/skjema/checkbox.md): Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert valg er uavhengig av de andre, og flere kan være valgt samtidig.
- [CheckboxGroup](/docs/komponenter/skjema/checkbox-group.md): CheckboxGroup samler flere relaterte checkboxer i én gruppe der brukeren kan velge ett eller flere alternativer samtidig. Hvert valg er uavhengig av de andre.
- [Designvalg for CheckboxGroup](/docs/komponenter/skjema/checkbox-group-designvalg.md): Denne siden forklarer hvorfor CheckboxGroup er bygget som den er. Den er ment for de som er nysgjerrige på avveiningene bak komponenten — du trenger den ikke for å bruke den. For bruk og API, se CheckboxGroup.
- [Combobox](/docs/komponenter/skjema/combobox.md): Combobox lar brukeren søke etter og velge ett eller flere alternativer fra en liste. Brukeren skriver for å filtrere, og valgte alternativer vises enten som verdi i feltet (single) eller som chips over feltet (flervalg).
- [Combobox i ren HTML](/docs/komponenter/skjema/combobox-html.md): Denne siden forklarer i detalj hvordan ` fungerer når du skriver ren HTML, Astro eller et annet ikke-React-miljø. Bruker du React, holder det å lese Combobox — der er hele strukturen skjult bak Combobox`-komponenten. For bruk, tilstander og API, se hovedsiden.
- [DateField](/docs/komponenter/skjema/date-field.md): DateField lar brukeren taste en dato i norsk format (dd.mm.åååå) eller åpne enhetens innebygde kalender via en knapp i feltet. Verdien som sendes videre er alltid ISO (åååå-mm-dd), uavhengig av hva som vises i feltet.
- [Label](/docs/komponenter/skjema/label.md): Label er ledeteksten til et skjemafelt.
- [PhoneNumberField](/docs/komponenter/skjema/phone-number-field.md): PhoneNumberField lar brukeren oppgi et telefonnummer med landkode. Komponenten setter sammen en søkbar landvelger (der brukeren velger land, ikke skriver tallkode) og et nummerfelt som formateres mens man skriver — under én felles label og én felles feilmelding.
- [RadioGroup](/docs/komponenter/skjema/radio-group.md): RadioGroup lar brukeren velge ett alternativ fra en liste av gjensidig utelukkende valg. Når ett valg gjøres, blir eventuelle tidligere valg automatisk fjernet.
- [Designvalg for RadioGroup](/docs/komponenter/skjema/radio-group-designvalg.md): Denne siden forklarer hvorfor RadioGroup er bygget som den er. Den er ment for de som er nysgjerrige på avveiningene bak komponenten — du trenger den ikke for å bruke den. For bruk og API, se RadioGroup.
- [Select](/docs/komponenter/skjema/select.md): Select lar brukeren velge ett alternativ fra en nedtrekksliste. Komponenten skjuler alternativene til brukeren åpner listen, og brukes når det ikke er nødvendig å vise alle valg samtidig.
- [TextArea](/docs/komponenter/skjema/textarea.md): TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.
- [TextField](/docs/komponenter/skjema/textfield.md): TextField er et inputfelt for kortere tekst eller tall, som kontonummer, e-postadresse eller beløp.
- [Formatering](/docs/komponenter/skjema/textfield-formatering.md): TextField kan formatere innholdet automatisk mens brukeren fyller ut — beløp med tusenskille, telefonnummer i grupper, kontonummer, fødselsnummer. Denne siden forklarer hvordan formatering virker, de to modusene, de tre måtene å definere en formatter på, og tilgjengelighetshensynene bak. For vanlig bruk og API, se TextField.
- [Tooltip](/docs/komponenter/skjema/tooltip.md): En Tooltip er en liten informasjonsboks som vises når brukeren holder musepekeren over, fokuserer på eller berører et element. Den brukes til å gi ekstra kontekst, forklaringer eller detaljer uten å forstyrre hovedinnholdet.
- [ValidationMessage](/docs/komponenter/skjema/validation-message.md): ValidationMessage viser en feilmelding knyttet til et skjemafelt eller en feltgruppe.
- [Spinner](/docs/komponenter/spinner.md): Spinner viser at noe lastes inn eller at en operasjon pågår. Den er ikke-interaktiv og kommuniserer utelukkende tilstand.
- [Surface](/docs/komponenter/surface.md): Surface er flaten flere ting ligger på: en region som samler flere beslektede elementer og
- [Tabs](/docs/komponenter/tabs.md): Faner lar brukeren veksle mellom likeverdige innholdsseksjoner på samme side — uten å navigere til en ny side. Bare én seksjon vises om gangen, og en horisontal fane-liste styrer hvilken. Fanene supplerer SegmentedControl, som brukes til gjensidig utelukkende tilstander og filtre.
- [Tag](/docs/komponenter/tag.md): Etter Figma-designet skal subtle-varianten ha farget tekst per status (blå på
- [Typografi](/docs/komponenter/typografi.md): Typografikomponenter i Indeks. Størrelse settes med data-size-attributtet — se oversikten på siden for riktig bruk.


### monstre-og-maler

- [Deaktiverte tilstander](/docs/monstre-og-maler/deaktiverte-tilstander.md): I Indeks anbefaler vi som hovedregel å unngå bruk av deaktiverte tilstander som disabled. Deaktiverte komponenter kan virke som en enkel løsning, men fører ofte til dårligere brukeropplevelse, lavere tilgjengelighet og mer frustrasjon enn nødvendig. Når en kontroll er deaktivert, fjernes den i praksis fra samspillet mellom bruker og grensesnitt – uten at det nødvendigvis blir tydelig hvorfor.
- [Form-validering](/docs/monstre-og-maler/form-validering.md): Indeks sine form-komponenter er bring-your-own-validation: hver komponent tar en ferdig errorMessage-streng og viser den (og setter aria-invalid selv). Selve valideringen — reglene og feilmeldingene — overlater vi til et form-rammeverk og et skjema. Denne siden viser det anbefalte oppsettet med React Hook Form (RHF) og Valibot.
- [Layout](/docs/monstre-og-maler/layout.md): Indeks tilbyr et sett med layout-utilities for å hjelpe med oppsett av elementer på siden ved bruk av Flex og CSS Grid. Disse klassene kan brukes direkte i HTML for raskt å justere layout uten behov for egendefinert CSS.
- [Spacing](/docs/monstre-og-maler/spacing.md): For å sikre konsistente og forutsigbare layouter i applikasjoner bygget med Indeks følger vi et sett med retningslinjer for distribusjon av spacing. Klare mønstre for avstand mellom elementer hjelper oss med å skape en harmonisk og brukervennlig visuell struktur på tvers av applikasjoner. Oppsummert dreier det seg om disse prinsippene:

### ordbok

Forklaringer på fagbegreper som brukes i Indeks-dokumentasjonen.

- [Ordbok](/docs/ordbok.md): Forklaringer på fagbegreper som brukes i Indeks-dokumentasjonen.

### retningslinjer

- [Designprinsipper](/docs/retningslinjer/designprinsipper.md): SpareBank 1 sine flater skal være lette å bruke for alle demografier.
- [Farger](/docs/retningslinjer/farger.md): I Indeks bruker vi semantiske farger. Det betyr at farger defineres og navngis ut fra hvordan de brukes, ikke hvordan de ser ut. For eksempel navngir vi en farge "Background" i stedet for å bruke det visuelle navnet (f.eks fjell) eller en hex-verdi.
- [Fargemodus (light og dark)](/docs/retningslinjer/farger/fargemodus.md): De semantiske fargevariablene i Indeks (--ix-color-*) har egne verdier for light og dark mode. Alle komponenter leser disse variablene, så de tilpasser seg automatisk.

### utility-klasser

- [Native](/docs/utility-klasser/native.md): Utility-klasser for å kontrollere tekstmarkering, berøring og dra-og-slipp-oppførsel i hybridapper der webinnhold vises i en native app sin WebView.
- [Utility-klasser](/docs/utility-klasser/oversikt.md): Utility-klasser er hjelpeklasser i CSS, designet for å enkelt kunne legge vanlige styling-properties til elementer ved behov. Hver klasse har sitt eget separate formål og består av én enkelt CSS-property, eller et mindre sett med properties for å oppnå en spesifikk effekt. Flere klasser kan brukes samtidig for å bygge opp komplette elementer. Komponentene i Indeks er i stor grad bygget med utility-klasser.