# Monotone with Sans Font

Sans font with restrained color. A single accent in addition to black on white. Utilitarian.

## Rules

- Apply a sans-serif system font-family on `body`.
- Use at most one accent color alongside black text on white background.
- Font-size may go smaller than default (13-14px) to increase information density.
- Columns and nested column layouts are encouraged for listings.
- No gradients, box-shadows, border-radius, or decorative elements.
- Hover states via color change only.
- Links: underline on hover only, or always underlined.

## Spacing and alignment

Margins and centering are claims about attention. More space, more centering, more isolation = "this matters more." Keep them scarce so they stay meaningful.

- **Margins.** Tighten for scanning surfaces (listings, feeds, tables). Loosen for reading surfaces (articles, essays). This pack usually sits on the tight end.
- **Container.** Bound and center the outer container (`max-width` + `margin: 0 auto`) only when line length would otherwise exceed ~80ch and hurt readability. List-dense pages often prefer full width.
- **Content.** Leave text left-aligned by default. Reserve `text-align: center` for the one or two elements that should feel like announcements — a page title, a hero CTA. Never center body copy.

## Intent

Information-dense, utilitarian design. Performance over performativity. Built for reading and scanning, not for aesthetics.

## Reference sites

- craigslist.com
- news.ycombinator.com