Color
Black
Black 80%
Black 10%
Black 7%

Dark
Grey-28
Grey-36
Grey-3c
Grey-8f
Grey
Grey-ae
Grey-bb
Grey-d5
Grey-e3
Grey-ec

White
Light (bg)

Brand

Danger
Warning
Success
Typography
var(--font-size-max)
var(--font-size-big)
var(--font-size-primary)
var(--font-size-medium)
var(--font-size-small)

NOTE: These variables update their values on @mobile viewports (<= 767px)
Label
Size variants:
Label big
Label (default)
Label medium
Label small
Heading
Size variants:
Heading h1
Heading h2
Heading h3 (default)
Heading h4
Link
Size variants:
Link
Link small
Color variants:
Link
Link (hover)
Link secondary
Link secondary (hover)
Link thirdly
Link thirdly (hover)
Link brand
Link brand (hover)
Link light
Link light (hover)
Button
Size variants:
Mod variants:
Color variants:
Icon button
Size variants:
Mod variants:
(no-border)
Color variants:
default
primary
light
light-thirdly
Input (Vue component)
Size variants:
Mod variants:
Color variants:
primary
secondary
light
dark
Select (Vue component)
Size variants:
Color variants:
primary
dark
Checkbox (Vue component)
Color variants:
Radiobutton (Vue component)
Color variants:
Table
Product 1Description 150€
Product 2Description 2100€
Product 3Description 370€
Tabs (Vue component)
    Steps (Vue component)
    1. Step 1
      Content 1
    2. Step 2
      Content 2
    3. Step 3
    Collapsible (Vue component)
    What is Lorem Ipsum?
    Range (Vue component)
    Horizontal (default)
    Vertical