Design system

Style guide

Explore the colors, typography and buttons behind the Revantik template.

Colors

The brand palette, stored as color variables so every page stays consistent.

Body

#F6F2EC

Primary

#AE6341

Secondary

#342B23

Tertiary

#AA8F6B

Lighter

#8D837A

Border

#D1CCC5

Black

#000000

White

#FFFFFF

Typography

Big Shoulders Display for headings and Familjen Grotesk for body copy.

Heading 1

"Big Shoulders Display" · 6.25rem · 100% · Extra Bold

This is some text inside of a div block.

Heading 2

"Big Shoulders Display" · 5rem · 100% · Extra Bold

This is some text inside of a div block.

Heading 3

"Big Shoulders Display" · 3.75rem · 100% · Extra Bold

This is some text inside of a div block.

Heading 4

"Big Shoulders Display" · 2.75rem · 100% · Extra Bold

This is some text inside of a div block.

Heading 5

"Big Shoulders Display" · 2rem · 100% · Extra Bold

This is some text inside of a div block.

Heading 6

"Big Shoulders Display" · 1.5rem · 100% · Extra Bold

This is some text inside of a div block.

Label

"Big Shoulders Display" · 1.25rem · 100% · Semi Bold

This is some text inside of a div block.

Body

"Familjen Grotesk" · 1.125rem · 150% · Regular

We plan, design and build kitchens, bathrooms and whole-home renovations with one in-house team, so your project stays on time, on budget and on vision.

Buttons

The Primary Button component and its variants, ready to drop into any section.

Primary · Large

Primary Button · Base variant

Get a free quote

Primary · Medium

Primary Button · Base Medium variant

Get a free quote

Primary · Small

Primary Button · Base Small variant

Get a free quote

Dark · Large

Primary Button · Dark variant

Get a free quote

Dark · Medium

Primary Button · Dark Medium variant

Get a free quote

Dark · Small

Primary Button · Dark Small variant

Get a free quote

Outline · Large

Primary Button · Outline variant

Get a free quote

Light · On dark

Primary Button · Light variant

Get a free quote