basecoat

[ dark ]

a small, zero-dependency frontend style guide — warm-monochrome tokens for typography, color, and buttons. a base for agentic-built projects.

---

Color

Semantic

operational   degraded   down   syncing

---

Type Scale

Every size the system knows about. Headings only ever use three of them — 48, 32, and 16. The rest are for display numerals and genuinely dense UI.

---

Headings

Headings are always near-black, and case is yours — title case and sentence case both fit. Size sets the tier — 48, 32, then body size for everything below a section. Below that, h3 takes the system's one bold weight and the space above a heading ranks the rest. A headline can carry a dim .subhead when it genuinely needs a qualifier — gray alone marks it, no parentheses.

The Ladder

Heading One

48, page title

Heading Two

32, section

Heading Three

16 bold, with 32px above — subsection

Heading Four

16, with 24px above — inline label

Body Copy

Body copy sits at 16px with a 1.45 line-height. Numbers like 1,234,567 use tabular figures. This is an inline link, underlined because it lives in running text, and this is a dim inline link. A bare nav-style link opts out with .link-quiet.

Eyebrow label — the standalone dim line, for when there is no headline to pair with

---

Lists

Bulleted

• The bullet is small and dim, hung in the gutter.
• A middle dot — already drawn small, so nothing is scaled.
• Nested items restart the indent:
  • a second level
  • reads the same way

Numbered

1. Counters are tabular, so 9. and 10. align at the period.
2. The gutter is wider to hold two digits without reflowing text.
3. Same dim marker, same hanging indent as the bulleted list.

Ruled

• hairline divider between rows
• no marker — the rule does the separating
• and no trailing rule under the last item

---

Buttons

Primary

Secondary

Icon

Filled buttons are the primary action in a view; the bracketed text buttons are the secondary tier. All stay square — no radius, no shadow.

---

Tables

city	zone	time	conf.
lisbon	WEST	09:41	████████
new york	EDT	04:41	██████░░
tokyo	JST	17:41	███░░░░░

---

Rules

A rule is never free-floating. Sit one against a heading and the gap closes to 8px on its own, while the heading's air moves above the rule — so the pair arrives as one block with space in front of it.

Rule Above

The section pattern, and what every break on this page uses.

---

Section Headline

The qualifying line

The strong hairline is the heaviest break in a page.

Rule Below

Same lockup, read the other way — useful under a running header.

Subsection

---

The soft hairline is the lighter break, for rows and minor divisions.