Minimal Token Layer

A third additive layer was added to packages/components/styles.css on 2026-05-25. It extends the base token system with a minimal editorial palette and three utility classes.

Tokens

The --minimal-* namespace provides semantic editorial tokens:

• --minimal-* color and spacing tokens (see packages/components/styles.css)

These sit on top of the existing warm-token layer (#fbf7f0 / #1f1f1f) without replacing it.

Utility classes

Three utility classes were added:

Class	Use
.pill-outline	Small outlined pill badge, typically used for tags
.eyebrow-mono	Monospace uppercase eyebrow text above headings
.display-tight	Display-size heading with tighter letter-spacing

Applied across four surfaces

One CSS file, four deployment surfaces:

App	Usage
apps/home	Hero section, projects grid
apps/agents	Full shell rebuild
apps/blog	Index page, post lede section
apps/insights	App shell

Design philosophy

The layer is additive — it doesn't modify existing tokens or break existing surfaces. Apps that haven't adopted it yet continue to work unchanged. When touching a component in a new surface, apply the minimal tokens alongside any other edits.

Relationship to other layers

1. Base layer — Tailwind v4 CSS variables, @theme block
2. Warm layer — #fbf7f0 / #1f1f1f palette tokens for most apps
3. Minimal layer — editorial tokens + pill/eyebrow/display utilities (added 2026-05-25)

The blog uses white #ffffff instead of warm cream, so it effectively bypasses layer 2 for background colors while still using the shared component tokens.