Styleguide

Merk kleuren


Brand primary
Brand secondary

Tekst kleuren


Tekst 1
Tekst 2
Iconen
Tekst 3
Tekst link

Neutrale kleuren


Success
Error - 1
Error - 2
Alert - 1
Alert - 2

Lettertype


Basic Font: 'Source Sans Pro' Light 300 Regular 400 Semibold 600 Bold 700

Headings


H1 32px

“Wat ooit heeft gewerkt, kan weer werken”

H2 26px

“Wat ooit heeft gewerkt, kan weer werken”

H3 22px

“Wat ooit heeft gewerkt, kan weer werken”

H4 18px

“Wat ooit heeft gewerkt, kan weer werken"

H5 16px
“Wat ooit heeft gewerkt, kan weer werken”
H6 14px
“Wat ooit heeft gewerkt, kan weer werken”

Paragrafen


Basis - 1.6 rem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,

Small - 1.4 rem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,

xSmall - 1.2 rem. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,

Donec tempor felis quis

  • Sed ut perspiciatis unde
  • Sed ut perspiciatis unde
  • Sed ut perspiciatis unde

Donec tempor felis quis

  1. Sed ut perspiciatis unde
  2. Sed ut perspiciatis unde
  3. Sed ut perspiciatis unde

Knoppen


Primary button

States

Secondary button

States

Ghost

States

Kerncomponenten




Info geselecteerd met tekstbox

Swatches

1m
5m
10m

Swatches hover

1m
5m
10m

Swatches selected

1m
5m
10m