Base

The base is the part of the UI you never call. It styles the plain tags a page is written in, h1 to h6, p, a, ul, ol, blockquote, pre and the rest, so markdown output or hand-written HTML looks right with no classes and no {ui} tag. It is classless: nothing to add and nothing to wrap in.

Zero specificity

Every base rule sits inside :where(), which has no specificity. Any class, utility or element rule wins over it, whatever the order, so there is nothing to fight. A .btn link keeps its own colour, and a one-off class="text-sm" on a heading just works.

An element that holds a heading or a paragraph sets its own size and margin, so the base never reaches into it. The card title sets font-size: inherit for that reason:

:where(h2) {
	font-size: 1.75rem;
}

.card > header > h2 {
	font-size: inherit;
}

Spacing

Tags carry no margin of their own. A block that follows another block gets space above it: one rem between blocks and a little more above a heading. The first and last block of a container add nothing, so the container's padding is the only edge space. Inside a flex or grid container that sets a gap, give the blocks mt-0 so the two do not add up.

Tokens

Colours come from the same tokens as the elements: --primary for links, --muted behind code, --muted-foreground for subtitles and --border for rules. A theme restyles the base along with the elements. Sizes and spaces are plain rem values.

What it covers

Typography only: headings, paragraphs, links, lists, quotes, rules and code. Forms and tables are elements, because a control needs a label, a hint and an error around it, and a bare input or table is left plain on purpose.

The .prose class is for rendered markdown. It styles only direct children, so a component placed among them keeps its own look. The base styles every matching tag, which is what a page of plain HTML needs.

The two pages below show each tag and a whole page written without classes.