Kitchen sink

Every token from static/style.css's @layer config, and the standard elements, rendered by this site's own stylesheet. Generated by garp — token values are live var() references, so this page is always current.

Colors

• --color-bgoklch(96.5% 0.006 60)
• --color-textoklch(25% 0.02 60)
• --color-accentoklch(56% 0.15 45)

Spacing

• --space-10.25rem
• --space-20.5rem
• --space-30.75rem
• --space-41rem
• --space-51.25rem
• --space-61.5rem
• --space-82rem
• --space-102.5rem
• --space-123rem
• --space-164rem
• --gutterclamp(var(--space-4), 2.5vmax, var(--space-6))
• --stackclamp(var(--space-3), 2vmax, var(--space-4))

Typography

• Aa Bb Cc 0123--font-sanssystem-ui, sans-serif
• Aa Bb Cc 0123--font-serifGeorgia, Cambria, "Times New Roman", Times, serif
• Aa Bb Cc 0123--font-monoui-monospace, "SF Mono", Menlo, Consolas, monospace
• Aa Bb Cc 0123--font-bodyvar(--font-serif)
• Aa Bb Cc 0123--font-headingvar(--font-mono)
• --line-height1.5
• --measure64ch

Radius

• --radius-sm0.125rem
• --radius0.25rem
• --radius-lg0.5rem

Elements

Heading level 1

Heading level 2

Heading level 3

Heading level 4

A paragraph with a link, strong text, emphasis, inline code, marked text, small text, an abbr, _sub and ^sup, and struck text. Sphinx of black quartz, judge my vow.

Those people who think they know everything are a great annoyance to those of us who do.

Isaac Asimov

• Unordered list item
• Another item
  • Nested item
  • Nested item
• A third item

1. Ordered list item
2. Another item
3. A third item

Definition term

The definition's description text.

Another term

Another description.

<section class="example">
  <p>Block code sample</p>
</section>