Lazysite themes explorer

Warm

Parchment and sage with serif headings - a calm, editorial feel.

This page renders the lazysite default layout with one explorer theme baked in. Every block below is plain Markdown or a lazysite fenced block, so you can compare how each theme treats identical content. Use the Themes menu above to switch.

Typography

Body text sits at a comfortable measure and line height. Inline styles include bold, italic, inline code, and a link. The heading font and the accent colour are the two changes that most define a theme.

Heading level three

Heading level four

Heading level five

A paragraph follows the smaller headings to show vertical rhythm and how much breathing room the theme leaves between blocks of text.

Lists

  • Unordered item one
  • Unordered item two
    • Nested item a
    • Nested item b

  • Unordered item three

    1. Ordered item one
    2. Ordered item two
    3. Ordered item three

Blockquote

The best way to predict the future is to invent it - and a design system is just the future, pre-decided. Notice the accent rule and the tinted panel.

Table

Token group Example key Drives
colours primary links, buttons, accents
fonts heading the display typeface
spacing radius how round the corners are

Code

Inline var(--theme-colours-primary), and a block:

body {
  color: var(--theme-colours-text);
  background: var(--theme-colours-background);
  font-family: var(--theme-fonts-body);
}

Callout boxes

A widebox breaks out to the full content width - good for a headline point or a summary the reader should not miss.

A textbox is a contained aside, narrower than the measure.

An examplebox groups a worked example or a sample so it reads as one unit.

Buttons and form controls

Every theme here is the same layout plus a different theme.json. Editing the tokens recolours the whole site with no CSS changes - that is the point.