Terminal
Dark technical monospace with a signal-green accent.
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
- Ordered item one
- Ordered item two
- 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.