Design System

A small, opinionated CSS framework to make sites look good with minimal effort. This page is a playground for showcasing the different supported styles. To learn more, check out the repository on GitHub.

Colors

Base

Anchor Bold Italic Underlined ~~Strikethrough~~ Abbreviation Text_sub, Text^sup Small code(); Keyboard

Headline level 1

Headline level 2

Headline level 3

Headline level 4

Headline level 5

Headline level 6

Above headline

Headline group

This text is grouped with the headline. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit error libero deserunt recusandae.

This is normal text. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit error libero deserunt recusandae.

Unordered list
Unordered list
Unordered list

Ordered list
Ordered list
Ordered list

function hello(name) {"{/* ... */}"}

This is a blockquote with a caption.

Caption

This is a blockquote.

Components

Primary link Outline link Ghost link

Label You can also add hints.

Email Password Date Time Search Disabled

A textarea

A select Selects can have hints, too.

A checkbox

Value A Value B Value C

A switch

First

Content for the first details block

Second

Content for the second details block

This is an article

Articles have a card-like appearance and provide some special formatting for their content. For example, the margins of the first and last elements are trimmed, and elements such as hr run over the entire width of the container.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.

Section

Column 1	Column 2	Column 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3
Row 3, Cell 1	Row 3, Cell 2	Row 3, Cell 3
Row 4, Cell 1	Row 4, Cell 2	Row 4, Cell 3
Row 5, Cell 1	Row 5, Cell 2	Row 5, Cell 3
Footer 1	Footer 2	Footer 3

Utils

Content

Move along

Nothing to see here.

Please wait...

Something went wrong

Please try again later.

font-size-h1 font-size-h2 font-size-h3 font-size-h4 font-size-h5 font-size-h6 font-size-base font-size-small font-mono font-weight-normal font-weight-medium font-weight-bold

text-left

text-center

text-right

🌸 👾 🐳 🐢 🌞 🦁 🍎 🐑 🐜

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quo ipsa beatae omnis nihil dolores. Dignissimos, recusandae sequi. Accusamus quaerat sed cum magni dolorem earum perferendis mollitia veritatis autem odit amet placeat, vel voluptas, debitis eligendi libero temporibus dolore similique?

color-base color-variant color-primary

background

surface

surface-variant

shadow-low

shadow-medium

shadow-high

no-shadow

border

border-variant

border-large

no-border

rounded-small

rounded

rounded-large

no-rounded