Theme · Instrument Sans
Claude theme for shadcn/ui
A theme in the style of Claude: warm paper backgrounds, clay-orange primary buttons, soft beige borders and generous corners, with a warm charcoal dark mode.
Font: Instrument Sans. Claude's interface uses a commercial face; Instrument Sans is the closest open alternative.
Preview
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Workspace · 02
Invite your team
Teammates get access to every project.
Storage 64%
LiveHealthyv1.0
Install
With the shadcn CLI. It writes the light and dark tokens into your global CSS (and the Cuelark utilities if you don't have them yet).
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/theme-claude.jsonOr paste the CSS after your Tailwind import. The variable names are the standard shadcn/ui ones, so it themes any shadcn project.
:root {
--background: #faf9f5;
--foreground: #141413;
--card: #fdfcf8;
--card-foreground: #141413;
--popover: #ffffff;
--popover-foreground: #141413;
--primary: #c96442;
--primary-foreground: #ffffff;
--secondary: #f0eee6;
--secondary-foreground: #141413;
--muted: #f0eee6;
--muted-foreground: #73726c;
--accent: #e8e6dc;
--accent-foreground: #141413;
--border: #e5e2d9;
--input: #dad7cc;
--ring: #d97757;
--signal: #c96442;
--signal-foreground: #ffffff;
--cl-mark: #cfcbbf;
--cl-shade: rgb(70 50 20 / 0.08);
--cl-font-sans: "Instrument Sans Variable", ui-sans-serif, system-ui, sans-serif;
--cl-text-size: 1;
--cl-tracking: 0em;
--radius: 0.75rem;
--cl-density: 1;
--cl-marks: 0;
--cl-motion: 1;
}
.dark {
--background: #262624;
--foreground: #faf9f5;
--card: #30302e;
--card-foreground: #faf9f5;
--popover: #363633;
--popover-foreground: #faf9f5;
--primary: #d97757;
--primary-foreground: #ffffff;
--secondary: #3a3a37;
--secondary-foreground: #faf9f5;
--muted: #30302e;
--muted-foreground: #b7b5a9;
--accent: #3d3d3a;
--accent-foreground: #faf9f5;
--border: #3e3e3a;
--input: #4a4a45;
--ring: #d97757;
--signal: #d97757;
--signal-foreground: #ffffff;
--cl-mark: #55554f;
--cl-shade: rgb(0 0 0 / 0.45);
}Tokens
| Token | Used for | Light | Dark |
|---|---|---|---|
| --background | Page | ||
| --foreground | Text | ||
| --card | Cards | ||
| --muted | Panels, wells | ||
| --muted-foreground | Secondary text | ||
| --primary | Primary buttons | ||
| --primary-foreground | Text on primary | ||
| --secondary | Secondary buttons | ||
| --accent | Hover, selection | ||
| --border | Borders | ||
| --input | Input borders | ||
| --ring | Focus ring | ||
| --signal | Accent: checked, live, highlights |