Logo

komvio
komvio
komvio
Filer: /brand/*.svg · *.png · *.eps

Spacing & radius

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--r-sm
--r
--r-lg

Formulär

1Textfält
2Val
Nu3 mån
3Textarea

Färg — komvio

Mörk navy#0D1B2A · headers / sidomeny / hero
Royal blue#1E3A8A · primär knapp / brand
Emerald#22C55E · sekundär knapp / match
Mint#6EE7B7 · accent / gradient / highlight
Ytbakgrund#F2F4F7 · content areas
Varning#C2531A · brist / akut

Typografi

Rubrik 1 — Inter Bold 40
Inter · 700 · line-height 1.4
Rubrik 2 — Inter SemiBold 28
Inter · 600 · line-height 1.4
Rubrik 3 — Inter SemiBold 20
Inter · 600 · line-height 1.4
Brödtext — Inter Regular 16. Läsbar löptext, etiketter och beskrivningar.
Inter · 400 · line-height 1.5

Knappar & komponenter

PrimärSekundärTertiärMörkKompetens-tagFilter-tagNu3–12 mån12–36 månAktiv pillPill78%

Brandvärden

  • Riktning – Vi visar vägen framåt.
  • Människan i centrum – Vi utvecklar människor och organisationer.
  • Utveckling – Vi skapar möjligheter till ständig utveckling.
  • Tillit – Vi bygger på kvalitet, transparens och säkerhet.

Tillgänglighet & principer

  • WCAG 2.1 AA – kontrast ≥ 4.5:1 för text; navy på vit och vit på navy är godkända.
  • Mobil först – allt designas för 360 px och skalar upp; brytpunkter 560 / 920 px.
  • Träffytor – minst 44×44 px på alla interaktiva element.
  • Fokus – synlig tangentbordsfokus; logiskt tab-flöde genom formulär.
  • Färg ej ensam bärare – status visas med text + ikon, inte bara färg.
  • Klarspråk– knappen säger vad som händer ("Publicera").
  • Reducerad rörelse – respektera prefers-reduced-motion för AI-animationer.
  • Datatransparens – tydligt varför data samlas och vart den går.