# Indeks Designsystem

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


## docs


### 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).
- [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 er bygget på en skalerbar grunnverdi og kan justeres for ulike skjermstørrelser og 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): Quick Start

### komponenter

- [TextArea](/docs/komponenter/textarea.md): TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.
- [TextField](/docs/komponenter/textfield.md): TextField er et inputfelt for kortere tekst eller tall, som kontonummer, e-postadresse eller beløp.
- [Typografi](/docs/komponenter/typografi.md): Typografikomponenter i Indeks. Klassenavn følger mønsteret ix-heading ix-heading--{størrelse} (ikke ix-heading-1 e.l.) — se klasseoversikten 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.
- [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:

### 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.