Claude
WebsiteA warm-neutral theme built on a subtle yellow-beige hue with very low chroma, giving surfaces a soft, paper-like quality without ever feeling tinted. The primary stays achromatic black/white for strong contrast, while alpha-based borders and inputs layer naturally over any surface.
Colors
Surfaces & Text
background
oklch(0.9786 0.0026 106.45)
#f8f8f6
foreground
oklch(0.3357 0.0052 106.67)
#373734
The default app background and text color.
card
oklch(1 0 0)
#ffffff
card-foreground
oklch(0.3357 0.0052 106.67)
#373734
Elevated surfaces and the content inside them.
muted
oklch(0.9663 0.004 106.47)
#f4f4f1
muted-foreground
oklch(0.5763 0.0079 88.68)
#7b7974
Subtle surfaces and lower-emphasis content.
Actions
primary
oklch(0.1822 0 0)
#121212
primary-foreground
oklch(1 0 0)
#ffffff
High-emphasis actions and brand surfaces.
secondary
oklch(1 0 0 / 10.2%)
#ffffff1a
secondary-foreground
oklch(0.3357 0.0052 106.67)
#373734
Lower-emphasis filled actions and supporting surfaces.
accent
oklch(0.9491 0.0041 91.45)
#efeeeb
accent-foreground
oklch(0.3357 0.0052 106.67)
#373734
Interactive hover, focus, and active surfaces.
destructive
oklch(0.5748 0.1862 25.23)
#d03b3b
Destructive actions and error emphasis.
Borders & Forms
border
oklch(0.2389 0.0019 106.54 / 14.9%)
#1f1f1e26
Default borders and separators.
input
oklch(0.2389 0.0019 106.54 / 14.9%)
#1f1f1e26
Form control borders and input surface treatment.
ring
oklch(0.2389 0.0019 106.54 / 30.2%)
#1f1f1e4d
Focus rings and outlines.
Sidebar
sidebar
oklch(0.9786 0.0026 106.45)
#f8f8f6
sidebar-foreground
oklch(0.3357 0.0052 106.67)
#373734
The base sidebar surface and default sidebar text.
sidebar-accent
oklch(0.9491 0.0041 91.45)
#efeeeb
sidebar-accent-foreground
oklch(0.3357 0.0052 106.67)
#373734
Hover and selected states inside the sidebar.
sidebar-border
oklch(0.2389 0.0019 106.54 / 14.9%)
#1f1f1e26
Sidebar-specific borders and separators.