KPT Design System

Komponentenbibliothek und Design Tokens

Colors

Red

50#FEF2F2
100#FEE2E2
200#FECACA
300#FCA5A5
400#F87171
500#EF4444
600#D8321E
700#B60811
800#991B1B
900#7F1D1D

Gray

50#F9F9F9
100#F2F2F2
200#E5E5E5
300#D1D1D1
400#A9A9A9
500#737373
600#545454
700#404040
800#262626
900#171717

Iceblue

50#F2F9FD
100#E4F1FB
200#C3E4F7
300#A4D7F5
400#65BAEA
500#50A3DA
700#336896
800#2B587C

Yellow / Sand / Pine / Success

Yellow 300#F2DC8D
Yellow 500#EBCA54
Sand 500#DDC7A2
Sand 800#7C6E5B
Pine 200#B2CAAB
Pine 500#6C7C66
Success 100#C9E7CA
Success 400#67BB6A
Success 500#4CAF50

Semantische Farben

Primary

CTA, Links, Hauptaktionen

kpt-red-600 → #D8321E

Primary Foreground

Text auf Primary

#FFFFFF

Secondary

Sekundäre Aktionen, Highlights

kpt-iceblue-100 → #E4F1FB

Secondary Foreground

Text auf Secondary

kpt-iceblue-800 → #2B587C

Destructive

Fehler, Löschen, Warnungen

kpt-red-500 → #EF4444

Muted

Deaktivierte Elemente, Hintergründe

kpt-gray-200 → #E5E5E5

Muted Foreground

Text auf Muted, Placeholder

kpt-gray-500 → #737373

Accent

Hover, aktive States

kpt-iceblue-100 → #E4F1FB

Background

Seiten-Hintergrund

kpt-gray-100 → #F2F2F2

Foreground

Standard-Textfarbe

kpt-gray-600 → #545454

Card

Karten-Hintergrund

#FFFFFF

Card Foreground

Text auf Karten

kpt-gray-800 → #262626

Border

Trennlinien, Input-Borders

kpt-gray-300 → #D1D1D1

Ring

Focus-Ring

kpt-iceblue-800 → #2B587C

Typography

Base Scale (Bold / Medium / Regular)

6xl
BoldMediumRegular
60px / 1.1
5xl
BoldMediumRegular
48px / 1.1
4xl
BoldMediumRegular
40px / 1.15
3xl
BoldMediumRegular
36px / 1.2
2xl
BoldMediumRegular
30px / 1.2
xl
BoldMediumRegular
24px / 1.3
lg
BoldMediumRegular
20px / 1.5
md
BoldMediumRegular
16px / 1.5
sm
BoldMediumRegular
14px / 1.5
xs
BoldMediumRegular
12px / 1.5
2xs
BoldMediumRegular
10px / 1.5

Semantische Tokens

.heading-1Grundversicherung KPT60px / 1.1 / bold
.heading-2Grundversicherung KPT48px / 1.1 / bold
.heading-3Grundversicherung KPT40px / 1.15 / bold
.heading-4Grundversicherung KPT36px / 1.2 / bold
.heading-5Grundversicherung KPT30px / 1.2 / bold
.heading-6Grundversicherung KPT24px / 1.3 / bold
.body-lgGrundversicherung KPT20px / 1.5 / regular
.body-mdGrundversicherung KPT16px / 1.5 / regular
.body-smGrundversicherung KPT14px / 1.5 / regular
.label-lgGrundversicherung KPT16px / 1.5 / medium
.label-mdGrundversicherung KPT14px / 1.5 / medium

Shadows

.shadow-xs
.shadow-sm
.shadow-md
.shadow-lg
.shadow-xl
.shadow-2xl
.shadow-inner
.shadow-outer

Icons

Icons des Kundenrechners. KPT = eigenes Icon (Figma-Library), Lucide = Platzhalter, wird durch das Figma-Icon ersetzt. Inventar & Figma-Mapping: docs/icon-inventory.md.

Person / Geschlecht

gender-womanPerson: FrauKPT
gender-manPerson: Mann / KindKPT
gender-unbornUngeborenes Kind (Baby)KPT
gender-unknownohne gewähltes GeschlechtKPT

Bedürfnis (VVG)

freie-arzt-spitalwahlFreie Arzt- und SpitalwahlKPT
komfort-spitalKomfort im SpitalLucide
komplementaermedizinKomplementärmedizinLucide
fitnessFitness und GesundheitLucide
auslandSchutz im AuslandLucide
brillenBrillen und KontaktlinsenLucide

UI & Aktionen

offerteOfferte erstellen/erhaltenKPT
saveSpeichernKPT
searchSuche (Arzt/Praxis)KPT
closeDialog schliessenKPT
chevron-downAufklappenLucide
chevron-upZuklappenLucide
arrow-rightWeiter / LinkLucide
plusHinzufügenLucide
minus-checkHäkchen / erledigtLucide
check-circleErfolg / bestätigtLucide
close-smallSchliessen / Feld leerenLucide
infoInfo-TooltipLucide
mailE-Mail / KontaktLucide
phoneTelefon / KontaktLucide
trashPerson entfernenLucide
user-plusPerson hinzufügenLucide
pencilBearbeitenLucide
downloadDownload / SpeichernLucide

Trust-Cards

file-checkEinfach & schnellLucide
thumbs-upBeliebtLucide
message-heartPersönlichLucide

Button

Varianten

Grössen

States

Badge

Varianten

GrundversicherungZusatzversicherungenAktuelles GerätNeue Grundversicherung

Grössen

SmallMediumLarge

Link

Varianten

Primary LinkSecondary Link

Grössen

XS LinkSM LinkMD LinkLG Link

Decoration

UnderlinedUndecorated

Mit Icon

ZurückWeiter

Card

Farben & Padding

white / xs
Inhalt
white / sm
Inhalt
white / md
Inhalt
white / lg
Inhalt
white / xl
Inhalt
grey / xs
Inhalt
grey / sm
Inhalt
grey / md
Inhalt
grey / lg
Inhalt
grey / xl
Inhalt

Alert

Hinweis

Optionaler Beschreibungstext mit zusätzlichen Informationen.

Gut zu wissen

Bitte beachten Sie, dass die Daten nicht nachträglich geändert werden können.
  • Wichtiger Punkt 1
  • Wichtiger Punkt 2

Fehler bei der Eingabe

Bitte korrigieren Sie die folgenden Fehler.
  • Passwort muss mindestens 8 Zeichen lang sein
  • E-Mail Adresse ist ungültig

Erfolgreich gespeichert

Ihre Angaben wurden erfolgreich übermittelt.

Toast

Neue Einstellungen verfügbar

Änderungen erfolgreich gespeichert

Toast ohne Icon

Divider

Default
Mit Label
Mit Datum

Switch

Default
Aus
Disabled

Tabs

XS

SM

LG

Mit Add & Remove

Popover

Dialog

Action Sheet

Button Toggle Group

Small

Medium

Select Pill

Mit Label + Icon (z. B. Geschlecht / Typ)

Geschlecht / Typ

Mit Label, ohne Icon (z. B. Franchise)

Franchise

Ohne Label (einzelne Pills) + States

DropZone

Dokumente zum Hochladen hier reinziehen und ablegen.

PNG, JPG, TIFF max. 30MB

Inputs

States

Dieses Feld ist erforderlich

Checkbox

States

Unchecked
Checked
Disabled unchecked
Disabled checked

In FormField (mit Label)

Plain (ohne Card)

Unchecked
Checked
Interaktiv

Select Card

Radio Mode

Combobox

Multi-select dropdown with search, grouped items, chips, overflow badge, and disabled states.

Standard

Stepper

Vertikaler Schritt-Indikator. Jedes Step-Item ist eigenständig (StepItem) und trägt einen Status. Translation-agnostisch — Labels via Props.

States (einzelnes Step-Item)

Erledigt
Aktuell (aktiv)
Inaktiv (sichtbar, nicht klickbar)
Erledigt + klickbar (Zurückspringen)

Zusammengesetzt

Beispiel-Flow (3. Schritt aktiv)