Buttons

Fields

Plan

Disabled

Toggle:

Segmented control + signal variants

Chips (multi-select)

Surfaces

Card

Translucent ink-wash + hairline. Depth via tint, no shadow.

Surface (glass)

Surface — accent

Tables

Layer	Loaded	Tokens
System prompt	every session	48,200
Rules	on match	18,400
Conversation	cumulative	3,900

Metric	Δ
Sessions	14
Commits	42
Hours	9.7
Overdue	56

Navigation + badges

Neutral Accent Live

Inline text link with underline — colour is never the only cue. Numbers stay tabular: 1,234,567.

Callouts

Info

Neutral informational note. Title is ink; severity reads from the left-bar + icon colour.

OK / Tip

Success register.

Warning

Caution-tinted.

Danger

Danger-tinted — heaviest left-rule in print.

Question

Accent-tinted prompt.

Accordion

What counts toward the baseline?

The system prompt, every always-on rule, the @-wired shared files, and the CLAUDE.md body — open state reads via a faint wash + accent left-bar.

How do I shrink it?

Path-scope rules, merge overlapping ones, demote pure reference to on-demand skills.

Third item

Collapsed by default.

Data-viz · loading · empty

Sparkline

Skeleton

Nothing yet

An empty state with a balanced title.

Real layout — documentation

Core concepts

The context window

Everything the model can see at once — the system prompt, the conversation so far, tool results, and the files you've wired in.

Managing it well is the difference between an agent that stays sharp and one that drifts. The display heading, lead, and body all sit on the locked Tailwind ladder.

Token budget

Every session carries a baseline before you type a word.

Real layout — dashboard

Sessions

Commits / 7d

across 6 repos

Open loops

overdue

Real layout — landing hero

Surveyor

Design that reads as intentional.

A warm, editorial, print-aware system. One identity, three accents, light and dark — every number gate-locked.