Claude
A theme reconstructed from the Claude desktop app: neutral charcoal surfaces, a clay accent, 8px controls, and menus that stay out of the way. It follows the site's light or dark setting.
Claude's interface is quiet on purpose. Almost everything is one of four neutral greys, elevation is a hairline plus a single soft shadow, and the only saturated colour is the clay mark. This page rebuilds the app shell from screenshots and exposes the result as a scoped theme, .claude-theme, that any BoringUI surface can opt into.
The demo is live. Pick a session, press the sliders control beside the first project for the grouping menu, hover a session for its ⋯ menu, type in the composer and send with ⌘↵. It follows the site's theme setting — press T to cycle light, dark, and system. The AskUserQuestion section below rebuilds the card Claude Code uses when it needs a decision.
App shell
Got it. The last version misread the information architecture: I treated it as a project board, but the screenshots show a conversation-first team workspace — navigation on the left, the thread in the middle, and a panel on the right that belongs to the current session. Opening a task swaps the center column for a run view. I'll rebuild it from the screenshots.
Let me look at the actual structure first:
I'll list the project files to confirm where the page script, routes, and styles live, then split navigation, the session thread, and the task panel into three separate surfaces and align spacing, borders, and hover states layer by layer.
Sidebar 248px · context rail 300px · 620px reading column · 16px composer radius. Session rows are 28px high and every control sits on a 6 or 8px radius.
Palette
Four neutral greys carry the whole app. The dark ladder is additive: the sidebar is darker than the canvas, raised fields sit one step above it, and menus take the highest step. Nothing is pure white or pure black.
Type
One system sans carries the interface at 13px, with a serif reserved for the greeting on an empty session. Mono appears only inside file names, diffs, and shortcuts.
Controls
Buttons are 30px tall with a hairline border and no gradient. Only one control per surface earns the ink fill; clay is reserved for the mark, focus, and the single affirmative action. Inputs keep the border and add a 3px clay halo on focus.
AskUserQuestion
When Claude needs a decision, the thread pauses on a question card. The question owns a tinted header, every option carries its own explanation, and the chosen row gets a single blue dot. Skip and Submit live inside the card; the amber status chip below belongs to the thread, not the card.
One question header, one explanation per option, 18px radios and 40px actions. Click an option, then Submit (⌘↵) or Skip. The status chip reports the answer and returns to “Needs your input” as soon as another option is picked.
Rules
- Four greys, no gradients. Canvas, sidebar, panel, and menu. A card is a hairline border plus one low-opacity shadow, never a brighter fill stacked on a brighter fill.
- Radii climb with the surface. 6px for rows and icon buttons, 8px for controls, 10px for cards, 12px for menus, 16px for the composer.
- Warm ink, never #FFF. Primary text is #F2F0E9 on dark and #32312C on light. Muted text is one step above the border, not a grey of its own.
- Clay is a signal. The accent appears on the mark, the focus halo, the selected count, and one action. Nothing else.
- Menus are the only elevated layer. They keep the 1px ring, gain the 12px radius, and use a 30px row with a 6px inset highlight. Shortcuts sit on the right in mono.
- Answers are the one blue exception. The AskUserQuestion card keeps Claude Code's blue selection dot; everywhere else the mark, focus, and affirmative action stay clay.