Building Interfaces

Standard HTML elements — inputs, buttons, dialogs — styled consistently out of the box. Custom components built on top for the patterns that come up in every project.

A navigation bar that wraps at narrow widths:

Mark

Inline highlight for drawing attention without bold or italic.

Aside

For notes, warnings, or tips that sit outside the main flow:

Buttons

Forms

All input types

Text inputs

Select

Checkboxes
Radio buttons
Textarea

Other

Details

Click to expand — useful for FAQs, supplementary content, or anything that shouldn’t be visible by default:

Why monospace?

Monospace fonts make spacing predictable. Every character is the same width, which means layouts built in ch units are consistent across text and UI.

Dialog

A modal that makes everything outside inert while open:

Short dialog.

Longer Dialog

The dialog caps its width so long content wraps cleanly rather than stretching across the screen.

A second section, separated by a rule.

Meters

Visual indicators for values with known ranges:

Tabs

Pure CSS tab switcher, no JavaScript:

The high-level view. Start here to understand what this component does and when to use it.

The specifics — behaviour, edge cases, and things to watch out for when integrating.

Related reading, prior art, and links to the standards that informed this design.