Open Claude UI Claude UI Design System, Analyzed
An analysis of the Claude desktop UI design: colors, fonts, motion and components, with the source of every value cited, rebuilt in React as components you can use directly.
Updated for Claude Desktop 2.0: light canvas is now #FCFCFB, dark canvas #151515 (Chinese)→- handbook chapters
- 14
- live demos
- 38
- source files
- 36
- GitHub stars
- 1,313
What is Open Claude UI?
Open Claude UI (open-claude-ui) is an open-source (MIT) community analysis handbook of the Claude desktop UI design: 14 chapters (8 for 1.x, 6 for 2.0), 36 source files and 38 live demos covering colors, fonts, radius, spacing and motion, with the source chapter cited for every value.
What are the key values of the Claude desktop UI?
The brand color is #c6613f and clay is #d97757; the 2.0 canvas is #FCFCFB in light mode and #151515 in dark mode; radii are 8px for controls, 12px for cards and 14px for the composer; motion uses 5 durations from 60 to 450ms.
The table lists the most-used design tokens. Each row links to the handbook chapter it comes from.
| Item | Value | Source |
|---|---|---|
| Brand color (light) | #c6613f (--brand) | v1 ch. 1 §1.2 |
| Clay (dark mode accent) | #d97757 (--cds-clay) | v1 ch. 1 §1.2 |
| Canvas background | light #FCFCFB / dark #151515 | v2 ch. 3 §3.2(Chinese) |
| Fonts | official anthropic-sans / serif / mono (proprietary, not distributed); open substitutes Inter / Newsreader / JetBrains Mono | v1 ch. 1 §1.5 |
| Radius | controls 8px · cards 12px · composer 14px (compact 6 / 10 / 12px) | v2 ch. 3 §3.3(Chinese) |
| Control height | 32px (compact 24px) | v2 ch. 3 §3.3(Chinese) |
| Spacing ladder | 8 / 12 / 16 / 28 / 40px (compact 6 / 8 / 12 / 20 / 32px) | v2 ch. 3 §3.3(Chinese) |
| Motion durations | 60 / 120 / 200 / 300 / 450ms | v2 ch. 4 §4.3(Chinese) |
| Easing curves | out (.165,.84,.44,1) · snap (.32,.72,0,1) · overshoot (.34,1.3,.64,1) | v2 ch. 4 §4.3(Chinese) |
| Scroll fade | 28px (--cds-scroll-fade-size) | v1 ch. 1 §1.4 · cds-theme.css |
Which Open Claude UI components can I try online?
There are 38 live demos on 6 pages: atomic components, conversation & input, motion & light, media & artifacts, desktop architecture & hooks, and what is new in 2.0. Each demo lists its spec and source file underneath.
How were these values analyzed?
The values come from analyzing the front-end build inside the Claude Desktop installer. Claude Desktop is an Electron app whose interface code ships as minified JS and CSS inside app.asar (Electron docs: ASAR archives). As the repository README explains, the project used the open-source analysis tool REA (Reverse Engineer Anything) to parse these files, organized the tokens, keyframes and component structures it found into the handbook, and re-implemented them in React.
- Locate the CSS variables, @keyframes and data-cds component markers in the installer;
- Record the source file name of every value (for example c6a992d55-sXiDGMFQ.css) in the handbook;
- Re-implement the components in React + Tailwind without copying official fonts, icons, audio or other assets.
“All reverse derivation, de-obfuscation static analysis, and ASAR package deconstruction were conducted using … REA (Reverse Engineer Anything).”
Sources: REA repository (morluto/rea) · Electron ASAR docs · project MIT license · OSI: MIT License
More on the method: analyzing the Claude desktop UI →(Chinese)
Where should I start reading?
Read the 2.0 handbook (6 chapters) for the current UI, the 1.x handbook (8 chapters) for exact tokens and component specs, or jump straight into the 38 live component demos.
What details did the analysis find?
For example: chin buttons look 28px but tap like 44px; pills scale up, then settle on an overshoot curve; lists stagger in with sibling-index(); a 28px top fade opens as soon as you scroll.
- 01 · Touch targetLooks 28px, taps like 44pxThe chin row is squeezed to 28px; buttons use negative margins to restore a 44px hit area.
margin-block: calc(var(--cmp-chin-touch-grow) * -1) - 02 · MotionPill overshoot bounceScales up to 1.32× first, then settles back on an overshoot curve, in two stages.
cubic-bezier(.34, 1.3, .64, 1) - 03 · Entrancesibling-index() staggered entranceDelays each element by its index among its siblings; no extra delay after the 9th.
50ms + min(sibling-index() - 1, 8) * 30ms - 04 · ScrollingTop fade 0 → 28pxNo edge fade while resting at the top; a 28px fade opens as soon as you scroll away.
--cds-scroll-fade-top: 0px → 28px
Sources: v2 handbook chapters 2 and 3 (Chinese).
What is the 2.0 spacing ladder?
Source: ch. 3 §3.3 (Chinese) →Comfortable density in 2.0 is 8 / 12 / 16 / 28 / 40px and compact is 6 / 8 / 12 / 20 / 32px; 1.x used 4 / 8 / 12 / 16 / 24px.
How do I use Open Claude UI components in a project?
Copy the component files from code-examples/ in the repository and import the cds-theme.css design tokens. Without React, import only the pure-CSS layer to get all design tokens and the core animations.
- 1Copy the components
Copy the .tsx files you need from code-examples/ in the repository. The components are built on React and Tailwind CSS; some motion depends on framer-motion.
- 2Import the design tokens
Import
cds-theme.css. Colors, radii, spacing, durations and easing curves are all provided as CSS variables. - 3No React? No problem
If you only need the tokens and pure-CSS effects, import
tokens.cssorpure.cssas described in the README.
Open Claude UI FAQ
9 questions about fonts, colors, licensing and usage, with every answer written out below.
What font does Claude use?
Claude Desktop uses three proprietary font families: anthropic-sans (interface), anthropic-serif (greeting and serif body text) and anthropic-mono (code), falling back to system fonts such as system-ui, Georgia and SF Mono. This project does not distribute those fonts; the open-source substitutes are Inter, Newsreader and JetBrains Mono, which this site uses. Source: v1 chapter 1, §1.5.
What is the hex value of Claude orange?
The main brand color is #c6613f (--brand) and clay is #d97757 (--cds-clay); clay is used for accents such as the thinking pulse dot. This site uses #c6613f in light mode and #d97757 in dark mode. Source: v1 chapter 1, §1.2.
Is Open Claude UI an official Anthropic project?
No. Open Claude UI is a community research project with no affiliation with Anthropic; Claude is a trademark of Anthropic. The project contains no Anthropic fonts, icons, audio or images.
What license is it under? Can I use it commercially?
The code and docs are under the MIT license (Copyright 2026 Caho1), so commercial use is fine as long as you keep the copyright notice. The Claude name and Anthropic trademarks are not covered by the license.
How do I use these components in my own project?
Copy the .tsx files from code-examples/ in the repository and import the cds-theme.css design tokens. The components are built on React and Tailwind CSS, and some motion depends on framer-motion. If you only need the tokens and pure-CSS effects, import tokens.css or pure.css as described in the README; no React needed.
How does the Claude Desktop 2.0 UI differ from 1.x?
2.0 changes the warm backgrounds to #FCFCFB / #151515, flattens the radii (composer 20px → 14px), and adds pure-CSS motion such as the reasoning effort slider and sibling-index() staggered entrances. See v2 chapters 2 and 3.
How were these values obtained?
According to the repository README, the values come from analyzing the front-end build inside the Claude Desktop installer (the JS and CSS files of the Electron app), with help from the open-source tool REA (Reverse Engineer Anything). The handbook notes the source file name and chapter next to each value.
What are Claude’s motion durations and easing curves?
2.0 defines 5 durations: 60, 120, 200, 300 and 450ms, and 3 main curves: ease-out cubic-bezier(.165,.84,.44,1), snap cubic-bezier(.32,.72,0,1) and overshoot cubic-bezier(.34,1.3,.64,1). Source: v2 chapter 4, §4.3.
Are there component demos I can try?
Yes, 38 live demos split into 6 pages by handbook chapter. They are real running React components, viewable in both light and dark mode.
Start with the Claude colors, or copy the components
Every value cites its source, and the components are MIT-licensed React + Tailwind code.