Hello, world!

My personal design system: a small, opinionated CSS framework to make sites look alright with minimal effort—think CSS reset with some extra styling based on semantic HTML! 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 Textsub, Textsup Small code(); Keyboard Marked Deleted Inserted

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
  1. Ordered list
  2. Ordered list
  3. Ordered list
function hello(name) {"{/* ... */}"}
This is a blockquote with a caption.
Caption
This is a blockquote.

Components

Primary link Outline link Ghost link
Dialog header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, sed! Adipisci sequi harum architecto, nesciunt aspernatur minus! Quaerat, pariatur placeat! Optio est accusamus saepe vero quos soluta, necessitatibus voluptates numquam.

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.

You can also add a footer:

  • Section
    •
    • Content

    Move along

    Nothing to see here.

    Please wait ...

    Something went wrong

    Please try again later.

    Extra

    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?

    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?

    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?