• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Riktlinjer

Riktlinjer

​
​

Inga resultat hittade, prova med andra sökvillkor.

Personlighet

Designfilosofi
Designprinciper
Värdeord

Identitet

Bildmanér
Dotterbolag
Färger
Ikonografi
Logotyp
Tonläge
Typografi
UX-writing

Layout

Angränsande ytor
Brytpunkter
Grid
Informationstäthet
Knapphierarki
Layoutregioner
Säkert område
Spacing

Mönster

Destruktiva val
Hjälp
Inloggning
Inställningar
Interaktionstillstånd
Mörkt läge
Navigering
Obligatoriska fält
Offline
Onboarding
Startskärm
Textinmatning
Tomma tillstånd
Validering

Produkter och tjänster

Bodies för bebisar
Chattbot och chatt
Desktop web apps för professionella användare
Digitala skärmar
Mejl

Grid

Grid

Uppdaterad 2026-09-25

En grid består av kolumner, rännor och marginaler.

1) Kolumner, 2) Rännor och 3) Marginaler

1) Kolumner, 2) Rännor och 3) Marginaler

Vi använder 12 kolumner by default, oavsett brytpunkt.

Rännorna är 16 pixlar by default, oavsett brytpunkt. Rännorna kan i undantagsfall ökas i steg om 8 pixlar.

Marginalerna är 16 pixlar by default, oavsett brytpunkt. Marginalerna kan i undantagsfall stängas av (No Margins) eller ökas i steg om 8 pixlar.

Maxbredden är 1200 pixlar by default, oavsett brytpunkt. Maxbredden kan i undantagsfall stängas av (None) eller ändras till 400, 600, 800, 1000, 1200, 1400 eller 1600 pixlar.

Satsytan är centrerad i containern by default, oavsett brytpunkt. Satsytan kan i undantagsfall vänsterjusteras i containern.

Bredare rännor

På surfplattor och datorer kan rännorna ibland behöva breddas för att visuellt separera vertikala block av innehåll. Men se till att marginalerna alltid är minst lika stora som rännorna.

På surfplattor och datorer kan rännorna ibland behöva breddas för att visuellt separera vertikala block av innehåll. Men se till att marginalerna alltid är minst lika stora som rännorna.

Exempel på bredare rännor på surfplattor och datorer.

Assets

Våra tokens innehåller definitioner för alla brytpunkter, griddar och rekommenderade maxbredder.

Tokens

bit.cloud

Har du frågor?

Johan Beskow

Ansvarig digital design