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
AnchorBoldItalicUnderlinedStrikethrough
Abbreviation
Textsub, Textsup
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.
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.
font-size-h1font-size-h2font-size-h3font-size-h4font-size-h5font-size-h6font-size-basefont-size-smallfont-monofont-weight-normalfont-weight-mediumfont-weight-boldCaps normal
caps small primary
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?
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-basecolor-variantcolor-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
The Art of Longform Reading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisque faucibus ex sapien
vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus
leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus
bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
Ut hendrerit semper vel class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
Why structure matters
Curabitur tempus urna at turpis condimentum lobortis. Ut commodo efficitur neque. Ut
diam quam, semper iaculis condimentum ac, vestibulum eu nisl. Etiam pulvinar
consectetur dolor.
A short list of reasons
Clear hierarchy helps readers scan before they commit to reading.
Consistent spacing reduces the cognitive load of long passages.
Sensible line length and line height keep the eye from losing its place, especially
across nested content
such as this nested item,
and this one too.
Closing thoughts
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus
id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum
necessitatibus saepe eveniet.
