Vaartland's design system

Example pages

SEO Silo page

Occasions page

Navigation page

Footer page

Colors

Base colors

Primary

Secondary

Tertiary

Shades

System colors

Succes

Warning

Error

Buttons

Sizes

Styles

Outline buttons

Button group

Button grid

Typography Font

Crossten & Casino Hand

Family

Aa

Crossten Book

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Aa

Crossten Medium

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Aa

Crossten Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Aa

Crossten Extra Bold

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Aa

Casino Hand

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Paragraph intro

Lead text, used for intro's. Lorem ipsum dolor sit amet, Italic text consectetur adipiscing elit. Bold text Fusce consectetur dolor eu diam dapibus, vel ultricies augue semper. Vivamus enim metus, mollis in purus non, euismod pellentesque urna. In iaculis quis dolor a sagittis. Pellentesque et augue vestibulum, dictum ex id, malesuada turpis.

Regular text. Lorem ipsum dolor sit amet, Italic text consectetur adipiscing elit. Bold text Fusce consectetur dolor eu diam dapibus, vel ultricies augue semper. Vivamus enim metus, mollis in purus non, euismod pellentesque urna. In iaculis quis dolor a sagittis. Pellentesque et augue vestibulum, dictum ex id, malesuada turpis. Cras sapien arcu, dapibus suscipit sem eu, iaculis dignissim arcu. Etiam scelerisque, mauris interdum auctor pulvinar, quam elit condimentum dolor, a tristique turpis lacus vitae augue. Donec non turpis sed nunc aliquet egestas. Praesent venenatis sodales maximus. Donec ac nibh sapien. Nam pellentesque venenatis aliquet. Proin id mauris ante. Cras maximus, lacus et euismod imperdiet, elit leo placerat quam, vel ornare felis enim in nunc.

Grid 12 column grid