Base Layer

The base layer styles HTML elements directly. No classes needed. Drop in base.css and your semantic markup looks good immediately.

This layer depends on config.css for its values. Every font size, color, and spacing references design tokens, so your base styles stay in sync with your system.

Typography

Headings use the unified type scale. Sizes derive from --text-base and --type-scale, with line-heights chosen per heading level. If you want headings to scale fluidly with their container, add the .headings-fluid utility class to a parent element.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs flow with consistent spacing. Headings that follow content get extra breathing room above them, but headings at the start of a container sit flush.

Inline Elements

Here is a link that you can click. Links inherit their color and use a subtle underline that thickens on hover.

Inline code looks like this and uses the monospace font stack. Here is keyboard input styled as a key, and sample output from a program.

Text can be bold or italic. You can highlight text, show deleted content, or inserted content. The abbr element shows a dotted underline.

Superscripts like x² and subscripts like H₂O work as expected.

Lists

• Unordered list item one
• Unordered list item two
• Unordered list item three

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

Definition List

Term

Definition of the term goes here.

Another term

Another definition follows.

Blockquote

This is a blockquote. It is slightly larger, italicized, and has a left border. Good for pull quotes or citations.

Code Block

function hello() {
    console.log("Hello, world!");
    return true;
}

Horizontal Rule

Content above the rule.

Content below the rule.

Forms

Form elements are styled with sensible defaults. Inputs, selects, and textareas use --text-md, while labels use --text-sm.

Buttons

Default Button Disabled Button

Checkboxes and Radios

Checkbox option one

Checkbox option two (checked)

Radio option one

Radio option two (selected)

Other Inputs

Fieldset

Progress and Meter

Tables

Tables span full width with collapsed borders and comfortable padding. Backgrounds are transparent so tables inherit whatever surface they sit on. Striping and hover effects are opt-in via the custom layer.

Media

Images and other embedded content are set to max-width: 100% with automatic height. They display as blocks.

Interactive Elements

The details element creates expandable sections without JavaScript.

Address