App shell — 288px sidebar nav, serif Claude wordmark
The surface above is the logged-in product: a flat sidebar nav carrying the Claude serif wordmark and plain icon+text rows, a centered serif greeting, and the raised radius-20 composer as the single focal point. Elevation comes from a lightness step, not shadow.
Applied component — message thread
Summarize this app's design spec in two lines.
✳
A warm, dim writing room on a 60°-hue gray ladder, never blue-black. One clay accent, a light serif greeting, and a quiet raised composer as the focal point.
Controls — every state, clay is the only action color
Primary · default
Primary · hover (#c6613f)
Primary · disabled
Ghost · default
+Icon · default
+Icon · hover (alpha fill)
Composer field · default
Composer field · focus ring
◇ CreateChip
Max planPlan badge · plum
readyStatus · dot-ready
awaitingStatus · dot-awaiting
Typography specimen — one row per role (DESIGN.md §3)
Greeting · Serif · 40/60 · 300 · #c3c2b7Afternoon, ramil
Composer placeholder · Sans · 16 · 400 · text-400How can I help you today?
Sidebar row · Sans · 14–15/20 · 400–500 · text-200Projects · Artifacts · Customize
Section label · Sans · 12–13 · 500 · text-400PRODUCTS · RECENTS
Model chip / meta · Sans · 14 · 400–500Sonnet 4.6 Medium ⌄
Mono · Anthropic Mono · codeclaude --resume
Full palette — every token (DESIGN.md §2)
Text
text-000/100 #f8f8f6
greeting #c3c2b7
text-200/300 #c2c0b6
text-400/500 #97958a
Surfaces & borders
bg-100 #1f1f1e
bg-000 raised #2c2c2a
bg-200 well #171716
bg-300/400 7% / 4% L
border .5px rgba(228,228,215,.15)
Accent & semantic
clay #d97757
clay-emphasized #c6613f
plum (Pro) #827dbd
mineral #629987
cactus #bcd1ca
heather #cbcadb
danger hsl(0 73% 59%)
Depth & motion
Radius scale (DESIGN.md §6)
8 · rows, icon btns
10–12 · chips
20 · composer
full · avatar, + icon
Elevation — shadow recipes (CDS tokens; barely used in the dark shell)
shadow-sm
0 1px 2px #0000000d
0 1px 2px #0000000d
shadow-lg
0 10px 15px -3px #0000001a
0 10px 15px -3px #0000001a
shadow-md
not captured
not captured
Motion: quiet shell, no entrance theatrics. Micro-transitions run ~100–200ms (about 150ms) on color / background / opacity with easing cubic-bezier(0,0,.2,1) (CDS ease-out). Status dots are tokenized (dot-ready blue, dot-awaiting yellow) for async task states.