Style Guide

Primary Color

--primary-l-4

--primary-l-3

--primary-l-2

--primary-l-1

--primary

--primary-d-1

--primary-d-2

--primary-d-3

--primary-d-4

Secondary Color

--secondary-l-5

--secondary-l-4

--secondary-l-3

--secondary-l-2

--secondary-l-1

--secondary

--secondary-d-1

--secondary-d-2

--secondary-d-3

--secondary-d-4

--secondary-d-5

Neutral Color

--neutral-light

--neutral

--neutral-dark

Buttons

Ich bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein Button

Ich bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein Button

Ich bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein Button

Ich bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein ButtonIch bin ein Button

Body Text Sizes

--text-2xsMIN 7.17pxMAX 8.02px

Amazingly few discotheques provide jukeboxes

--text-xsMIN 8.96pxMAX 10.69px

Amazingly few discotheques provide jukeboxes

--text-sMIN 11.2pxMAX 14.25px

Amazingly few discotheques provide jukeboxes

--text-mMIN 14pxMAX 19px

Amazingly few discotheques provide jukeboxes

--text-lMIN 17.5pxMAX 25.33px

Amazingly few discotheques provide jukeboxes

--text-xlMIN 21.88pxMAX 33.76px

Amazingly few discotheques provide jukeboxes

--text-2xlMIN 27.34pxMAX 45px

Amazingly few discotheques provide jukeboxes

Headings

--headings-2xsMIN 7.17pxMAX 8.02px

Amazingly few discotheques provide jukeboxes

--headings-xsMIN 8.96pxMAX 10.69px

Amazingly few discotheques provide jukeboxes

--headings-sMIN 11.2pxMAX 14.25px

Amazingly few discotheques provide jukeboxes

--headings-mMIN 14pxMAX 19px

Amazingly few discotheques provide jukeboxes

--headings-lMIN 17.5pxMAX 25.33px

Amazingly few discotheques provide jukeboxes

--headings-xlMIN 21.88pxMAX 33.76px

Amazingly few discotheques provide jukeboxes

--headings-2xlMIN 27.34pxMAX 45px

Amazingly few discotheques provide jukeboxes

The Quick Brown Fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Exploring the Unknown

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A Closer Look

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. This text is bold. Vestibulum tortor quam, feugiat vitae, this text is italic, ultricies eget, tempor sit amet, ante.

Further Details

Donec eu libero sit amet quam egestas semper. This is a link. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

A Minor Section

First item in an unordered list
Second item with a bit more text to show wrapping behavior
Third item in the list

The Smallest Heading

First step in an ordered list
Second step with some additional context
Third and final step

This is a blockquote. It can be used to highlight an important statement or pull quote from the content.

Here is a paragraph with inline code inside it. Below is a horizontal rule:

This is small text, often used for captions or legal copy.