Claude Colors: Hex Values & Design Tokens

📚 Back to the 1.x overview · Next: Chapter 2: Atomic Components & Interactive Controls (Chinese) ➡️

This chapter documents the Claude colors and the rest of the design tokens found in the Claude Desktop 1.x front-end build: the color palette with exact hex values, surfaces, border radius, borders and shadows, the font stack, the type scale and motion curves. It is a translation of the Chinese handbook chapter; every value is copied from it unchanged.

Chapter 1: Design Philosophy & Design Tokens

Technical domain: Design Philosophy & Design Tokens

1.1 Design philosophy and visual tone

Claude's interface stands out among today's AI products. Its core tone comes down to three points:

1. Editorial Warmth:
   • It drops cold, highly saturated cyberpunk blue and purple entirely. The main brand color is a warm clay (#d97757), on soft off-white / dark gray backgrounds (#fcfcfb / #151515).
2. Low-contrast Surface Layering:
   • The interface almost never uses hard 1px black borders. Depth comes from tiny lightness differences between the Surface 0 - 3 layers and from semi-transparent outer-ring shadows built with color-mix().
3. Lightweight Organic Motion:
   • Streaming text uses a GPU-accelerated blur dissolve, complex expansions use CSS Grid 0fr to avoid height jitter, and gesture interactions use real damped springs.

1.2 Surfaces and color scale

Technical domain: Surfaces & Colors

According to a full AST audit of the production bundle c6a992d55-sXiDGMFQ.css with REA (Reverse Engineer Anything) v6.5.0, Claude does not use isolated, scattered color values. Its colors sit on a precise system built from a complete 35-step gray scale (--cds-gray-0 to --cds-gray-900) and a 35-step orange scale (--cds-orange-0 to --cds-orange-900).

graph TD
    S0["Surface 0: sidebar / base layer (Canvas)"]
    S1["Surface 1: main page canvas (Chat Page)"]
    S2["Surface 2: standalone panels / card surfaces (Cards)"]
    S3["Surface 3: composer / popovers / top layer (Overlays)"]
    
    S0 --> S1 --> S2 --> S3

[!TIP] Dark mode 2-level equal stepping (OLED Anti-Banding):
REA's analysis shows that Claude's dark surfaces follow strict, equal hexadecimal steps:
--cds-gray-800 (#20201f) $\to$ 810 (#1e1e1d) $\to$ 820 (#1c1c1b) $\to$ 830 (#1a1a19) $\to$ 840 (#181817) $\to$ 850 (#151515) $\to$ 860 (#131313) $\to$ 870 (#111111) $\to$ 880 (#0f0f0f) $\to$ 890 (#0d0d0d) $\to$ 900 (#0b0b0b).
Each step drops exactly 2 HEX units in lightness, which removes gray banding on OLED screens.

1.3 Control sizes and the border-radius matrix

Technical domain: Border Radius, Heights & Sizing

1.3.1 Border radius hierarchy

In the production styles, the full set of radius tokens and the nesting formula are:

[!IMPORTANT] REA v6.5.0 finding: adaptive concentric radius formula:

Copy Text

--radius-card: calc(var(--cds-radius) + calc(.25rem * var(--cds-rem-scale, 1)));

In Claude, a card's outer curvature is tied to the inner --cds-radius plus .25rem * --cds-rem-scale, so inner and outer corners stay concentric when the user zooms the page or turns on larger accessibility text.

1.3.2 Heights & Sizing

1.4 Hairline borders, soft shadows and avoiding border bloat

Technical domain: Borders, Hairlines & Shadows

1.4.1 Border widths, hairlines and the shadow ladder

In many Claude look-alike products, the "cheap" look comes almost 100% from borders that are too thick and too hard and from single-layer, pure-black shadows. Claude Desktop uses precise rules to avoid this:

1. Border width ladder and Retina hairlines (Border Width & Retina Hairline)

On Retina screens (MacBook Retina @2x/@3x), a standard 1px border actually covers 2 to 3 physical pixels and looks heavy. Claude uses media queries and inset-shadow outlines to get real, dynamic hairlines:

/* Extracted from c6a992d55-C0zTICcS.css: hairlines and alpha levels */
:root {
  --cds-alpha-0: hsla(0, 0%, 8%, 0);
  --cds-alpha-1: hsla(0, 0%, 8%, 0.05); /* ghost button hover, skeletons, disabled state */
  --cds-alpha-2: hsla(0, 0%, 8%, 0.10); /* standard border (--cds-border), secondary fill */
  --cds-alpha-3: hsla(0, 0%, 8%, 0.20); /* strong border (--cds-border-strong), control hover */
  --cds-alpha-4: hsla(0, 0%, 8%, 0.35); /* heavy divider */

  --cds-border: var(--cds-alpha-2);
  --cds-border-strong: var(--cds-alpha-3);
  --cds-ring-hairline: 1px;
}

/* Hairline adjustment on Retina screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (resolution >= 2x) {
  :root { --cds-ring-hairline: 0.5px; }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx), (resolution >= 3x) {
  :root { --cds-ring-hairline: calc(1px / 3); }
}

[!TIP] Why does Claude rarely use CSS border: 1px solid ...?
A regular CSS border counts toward the element's box size, so toggling between active and inactive states can cause a small "1px size jitter and reflow". Claude uses box-shadow: inset 0 0 0 1px ... or box-shadow: 0 0 0 1px ... instead. Shadows sit outside box-model layout, so transitions are jitter-free.

2. Production four-tier ambient shadow ladder (4-Tier Ambient & Elevation Shadow System)

Claude drops single-layer blur shadows entirely and uses a two-layer formula everywhere: [close-range Ambient Occlusion] + [long-range Elevation Diffusion]:

3. The optics of the dual-ring popover (Dual-Ring Architecture)

Pay close attention to how --cds-shadow-popover differs between light and dark mode:

• Light mode: the outer ring is 0 0 0 1px var(--cds-border), a fine outline around the edge, combined with a soft diffuse shadow that drops 8px.
• Dark mode (the bevel highlight flips!): the outer ring becomes 0px (no harsh white frame on a black background), and an inner inset 0 0 0 1px rgba(255, 255, 255, 0.10) is added. Like a beveled edge catching faint light from above, it outlines the popover without looking like a border.

4. Composer dual-ring shadow formula (Composer Dual-Ring Shadow)

The composer is the signature element of the Claude interface:

/* Resting (not focused) */
box-shadow: 
  0 4px 20px rgba(0, 0, 0, 0.035),
  inset 0 0 0 1px var(--cds-border);

/* Hover */
box-shadow: 
  0 4px 24px rgba(0, 0, 0, 0.06),
  inset 0 0 0 1px var(--cds-border-strong);

/* Focus-Within */
box-shadow: 
  0 4px 24px rgba(0, 0, 0, 0.08),
  inset 0 0 0 1px var(--cds-border-strong),
  0 0 0 1px var(--cds-border-strong);

5. Global focus ring (Triple-Layer Focus Ring)

When a control is activated by keyboard or click, Claude never uses the operating system's default blue outline. It renders its own three-layer clay ring:

--cds-focus-shadow: 
  inset 0 0 0 1px var(--cds-surface-1),    /* layer 1: 1px spacer between the control and the glow */
  0 0 0 1.5px var(--cds-clay),             /* layer 2: 1.5px clay brand focus ring */
  0 0 6px 1px rgba(217, 119, 87, 0.25);    /* layer 3: soft outer clay glow */

6. Hover states and micro-feedback (Interactive Hover & Micro-Feedback)

Claude's interaction feedback is smooth and restrained, following a "noticeable but never distracting" principle:

1. Ghost button hover and press (Ghost Button Feedback):
   • Resting: fully transparent background, secondary gray text (var(--cds-text-secondary)).
   • Hover: within 150ms on a Bézier curve (cubic-bezier(0.16, 1, 0.3, 1)) the background fades to a 5% gray fill (var(--cds-fill-ghost-hover)) and the text lights up to the primary color.
   • Active Press: a light scale(0.98) press, and the fill deepens to 10% gray (var(--cds-fill-ghost-selected)).
2. Card Elevation Y-Lift:
   • Resting: flat on the canvas with --cds-panel-shadow.
   • Hover: lifts by transform: translateY(-1.5px), the shadow transitions smoothly to --cds-panel-shadow-hover, and the border darkens to --cds-border-strong.
   • Leave: settles smoothly back into place with no hard bounce.
3. Dropdown Row Highlight:
   • When the pointer moves over a menu item, the background instantly lights up as a light highlight pill with a 4px radius (var(--radius-sm)); the row's icon and shortcut light up with it.
4. Drag & Drop Target Glow:
   • When a dragged file approaches the composer, the composer shows an inner clay glow inset 0 0 24px -2px rgba(217, 119, 87, 0.20) together with an inset 0 0 0 2px var(--cds-clay) snap ring.

1.4.2 Border philosophy and avoiding border bloat (Borders vs. Borderless Architecture)

In modern web front-ends and LLM-generated UI, "Russian-doll borders" are the most common cause of bloated, heavy, amateur-looking interfaces. Many models treat "visual grouping" in a product brief as CSS border border-neutral-200, producing cards inside cards, framed messages, framed toolbars, and a frame around every button inside the input. The eye is cut up by countless gray lines.

Claude Desktop's airy, editorial look comes from a strict minimal-border, low-contrast-surface architecture:

1. The core rule: one closed border (The 1-Border Rule)

• Depth of sight: along any line of sight from the main canvas inward, you may cross at most 1 closed rectangular border.
• Automatic downgrade inside containers: once an outer container is already a bordered object (such as the Chat Composer, a Modal, or a Code Block), none of its child controls (buttons, input areas, tags, toolbars) may use a closed border again:
  • Secondary buttons: never border border-neutral-300; use a soft fill based on Surface-2 (bg-neutral-100 hover:bg-neutral-200/80 dark:bg-neutral-800 border-0).
  • Toolbar buttons and inline actions: must be downgraded to the Ghost variant (fully transparent at rest, bg-transparent border-0, with only a faint background on hover, hover:bg-neutral-100/70).
  • Inner input field: the text field inside the Composer has no native border or highlight ring at all (border-0 outline-none ring-0 bg-transparent).

2. Boundary decision matrix (The Boundary Decision Matrix)

3. Refactoring "Russian-doll borders": before and after

Anti-pattern (bloated output common in AI models):

<!-- ❌ Wrong: 4 nested borders, heavy and oppressive -->
<div class="border border-gray-300 p-4"> <!-- box 1: outer card -->
  <div class="border border-gray-200 p-3"> <!-- box 2: assistant bubble -->
    <p>Reply text</p>
    <div class="border border-gray-300 p-1"> <!-- box 3: small action-bar card -->
      <button class="border border-gray-400">Copy</button> <!-- box 4: bordered button -->
    </div>
  </div>
</div>

Correct pattern (Claude production standard):

<!-- ✅ Right: single border, minimal and airy -->
<div class="p-4"> <!-- main canvas Surface 0, no frame -->
  <div class="space-y-2"> <!-- assistant message: no frame, no fill, sits directly on the canvas -->
    <p class="text-neutral-800 dark:text-neutral-200 leading-relaxed">Reply text</p>
    <div class="flex items-center gap-1 text-neutral-400"> <!-- action bar, no frame -->
      <button class="p-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 border-0"> <!-- pure ghost hover -->
        <CopyIcon className="size-3.5" />
      </button>
    </div>
  </div>

4. Scroll-driven fade mask system (Scroll-Driven 28px Fade System)

When conversations and code blocks scroll, a typical front-end just overlays a plain opacity gradient, so text is cut off abruptly at the top and bottom. REA v6.5.0 extracted Claude's complete scroll-timeline-driven mask (Scroll-Driven Fade) specification from the production bundle:

• Core width: --cds-scroll-fade-size: 28px; (defined as exactly 28px, not an approximate 24px or 32px).
• 4-Stop Relative Color Fade: The mask is not a solid color. It uses modern CSS color-mix() and rgb(from ...) to take the current background color and fade it in 4 non-linear steps:

  Copy Text

  /* Extracted from the real production definition in c6a992d55-sXiDGMFQ.css */
  --cds-scroll-fade-mask: linear-gradient(
    to bottom,
    var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) 0%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .85) 13%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .50) 40%,
    rgb(from var(--cds-scroll-fade-strip-color, var(--cds-surface-1)) r g b / .15) 70%,
    transparent 100%
  );

  Combined with the native scroll timeline (scroll-timeline), the mask collapses to zero (0px) when the list is at the top and opens up to 28px once it scrolls away from the top. It runs entirely on the GPU compositor with zero main-thread cost.

1.5 Typography and icon alignment constraints

Technical domain: Typography, Alignment & Icons

Claude Desktop tunes font weights, line wrapping and vector icon alignment with near-obsessive care, across six core engineering constraints:

1. Real font stacks and variable font axes (Font Stacks & Variable Axes)

Based on REA v6.5.0's analysis of c6a992d55-sXiDGMFQ.css, Claude has a complete CJK and multilingual fallback chain:

• CJK sans-serif fallback chain (--font-cjk-sans-fallback):

  Copy Text

  --font-cjk-sans-sc: "PingFang SC";
  --font-cjk-sans-tc: "PingFang TC";
  --font-cjk-sans-jp: "Hiragino Sans";
  --font-cjk-sans-kr: "Apple SD Gothic Neo";
  --font-cjk-sans-fallback: var(--font-cjk-sans-sc), var(--font-cjk-sans-tc), var(--font-cjk-sans-jp), var(--font-cjk-sans-kr);

• Main sans-serif stack (--font-anthropic-sans):

  Copy Text

  --font-sans-fallbacks: system-ui, "Segoe UI", Roboto, Helvetica, Arial, var(--font-cjk-sans-fallback), sans-serif;
  --font-anthropic-sans: "anthropic-sans", var(--font-sans-fallbacks);

• Serif stack for greetings and body text (--font-anthropic-serif):

  Copy Text

  --font-anthropic-serif: "anthropic-serif", ui-serif, Georgia, "Times New Roman", var(--font-cjk-sans-fallback), serif;

• Monospace code stack (--font-anthropic-mono):

  Copy Text

  --font-anthropic-mono: "anthropic-mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

• Variable font optical size (opsz) and badge weight (wght):

  Copy Text

  --font-opsz-axis-title: "opsz" 28,;
  --font-opsz-axis-heading: "opsz" 20,;
  --font-opsz-axis-display: "opsz" 48,;
  --cds-badge-x-wght: 577.8; /* sub-pixel optical weight for badges */

2. 7-tier font size and line height scale (7-Tier Font Size & Leading Scale)

Claude Desktop has a 7-step type scale designed for dense information, and uses the desktop optical scale factor --cds-rem-scale: calc(16 / 17) (≈ 0.941176) to scale the web default 17px base smoothly down to an exact 16px on native Retina screens.

/* Extracted from c6a992d55-C0zTICcS.css: core typography variables */
:root {
  --cds-rem-scale: calc(16 / 17); /* desktop optical adjustment factor ≈ 0.94117647 */

  --cds-font-size-caption: calc(0.6875rem * var(--cds-rem-scale, 1));
  --cds-leading-caption: 1rem;

  --cds-font-size-footnote: calc(0.75rem * var(--cds-rem-scale, 1));
  --cds-leading-footnote: calc(0.9375rem * var(--cds-rem-scale, 1));

  --cds-font-size-code: calc(0.75rem * var(--cds-rem-scale, 1));
  --cds-leading-code: 1rem;

  --cds-font-size-body: calc(0.8125rem * var(--cds-rem-scale, 1));
  --cds-leading-body: 1.125rem;

  --cds-font-size-prose: 0.875rem;
  --cds-leading-prose: 1.25rem;

  --cds-font-size-heading: calc(0.875rem * var(--cds-rem-scale, 1));
  --cds-leading-heading: calc(1.125rem * var(--cds-rem-scale, 1));

  --cds-font-size-title: calc(1.25rem * var(--cds-rem-scale, 1));
  --cds-leading-title: calc(1.5rem * var(--cds-rem-scale, 1));
}

3. Dark mode weight compensation for irradiation (Retinal Irradiation Compensation)

In optics and human perception, bright white text on a black background appears to spread outward (the Irradiation Phenomenon), so text of the same weight looks 10% - 15% heavier in dark mode than in light mode, with swollen, blurry edges.

Claude compensates through its proprietary variable font axis: in dark mode it lowers the weight value by 30 - 40 units, so text looks exactly as thin and sharp to the eye as it does in light mode.

/* Extracted from the analyzed source c6a992d55-C0zTICcS.css */
/* Light mode baseline */
.font-normal {
  --cds-font-axis-wght: "wght" 400;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}
.font-medium {
  --cds-font-axis-wght: "wght" 500;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}
.font-semibold {
  --cds-font-axis-wght: "wght" 580;
  font-variation-settings: var(--font-opsz-axis,) var(--cds-font-axis-wght,) "GRAD" var(--cds-font-grad, 0);
}

/* Dark mode optical compensation */
[data-theme=claude][data-mode=dark] .font-normal {
  --cds-font-axis-wght: "wght" 360;
}
[data-theme=claude][data-mode=dark] .font-medium {
  --cds-font-axis-wght: "wght" 460;
}
[data-theme=claude][data-mode=dark] .font-semibold {
  --cds-font-axis-wght: "wght" 550;
}
[data-theme=claude][data-mode=dark] .font-bold {
  --cds-font-axis-wght: "wght" 660;
}

4. Typography matrix for core content areas (Content-to-Typography Matrix)

To stop font sizes and weights from being invented ad hoc or stacked arbitrarily, the table below lists the standard font parameters for every core module of Claude Desktop:

5. Optical baseline for inline icons (.align-[-0.125em])

On the web, inline SVGs and icons sit on vertical-align: baseline by default, so the icon's visual center sits noticeably above the x-height of lowercase letters and the cap height of capitals, and the icon looks like it is floating.

Claude enforces dedicated negative-offset utility classes:

• .align-[-0.125em] (vertical-align: -0.125em;): for 14px - 16px Body and Heading text. It drops the icon by exactly 1/8em (about 1.75px - 2px), so the icon's center lines up 100% with the letters' visual center.
• .align-[-0.075em] (vertical-align: -0.075em;): for 11px - 12px Caption and helper text.
• .align-[-1px] / .align-[-2px]: for inline badges in fixed-height (32px/46px) toolbars and title bars.

/* Extracted from c6a992d55-C0zTICcS.css */
.align-\[-0\.125em\] { vertical-align: -.125em; }
.align-\[-0\.075em\] { vertical-align: -.075em; }
.align-\[-1px\] { vertical-align: -1px; }

4. Text wrapping and break constraints (Text-Wrap & Word-Break Constraints)

• Balanced heading lines (text-wrap: balance): All :is(h1, h2, h3, h4) and card titles get text-wrap: balance;, which distributes words across lines so the last line never holds a single lonely word.
• No orphans in body text (text-wrap: pretty): Body paragraphs :is(p, li, dd, blockquote) get text-wrap: pretty;, which prevents a single word being left on the last line (Typographic Runts).
• Safe wrapping for long strings and tokens (overflow-wrap: anywhere): Tooltips that contain very long model IDs (such as claude-3-7-sonnet-20250219-thinking-exp), Git commit hashes or code variable names strictly use:

  Copy Text

  overflow-wrap: anywhere;
  word-break: normal;

  Normal English and Chinese words stay intact (no forced breaks inside regular words), while overlong strings still wrap safely and never overflow the container.
• Minimum input size on mobile to prevent zoom:

  Copy Text

  input, textarea, select {
    font-size: max(16px, var(--cds-font-size-body));
  }

  In iOS WebKit, focusing any input with font-size < 16px forces the page to zoom. Claude sets a 16px floor to avoid this completely.

5. Tabular numerals (Tabular Numerics)

Every area with changing numbers (Thinking duration 00:03.2, token usage 1,284 tokens, dates and tables) is set to:

font-variant-numeric: tabular-nums;
/* or */
font-feature-settings: "tnum" 1;

This makes the digits 0 to 9 all the same width, so the line doesn't jitter as numbers count up.

6. Vector icon architecture and the duotone protocol (Phosphor & Duotone Layering)

• Native coordinate system: viewBox="0 0 256 256" (Phosphor Icons architecture).
• Standard and code weights:
  • Regular state: Stroke 16px (weight 533.3, regular thickness).
  • Active / code state: Stroke 24px (weight 700, --df-app-switch-code-weight: 700).
• Duotone protocol:

  Copy Text

  <span data-cds="Icon">
    <!-- primary layer: foreground color -->
    <path data-cds-icon-layer="primary" fill="currentColor" />
    <!-- secondary layer: 45% opacity underlay -->
    <path data-cds-icon-layer="secondary" fill="color-mix(in srgb, currentColor 45%, transparent)" />
  </span>

• Size ladder:
  • XS (12px): badges, small close icons
  • SM (14px): dense action bar buttons
  • MD (16px): standard interactive elements, using the formula calc(1rem * var(--cds-rem-scale, 1)) ≈ 15.06px - 16px
  • LG (20px): primary card action buttons
  • XL (24px): modals and empty-state illustrations

7. Full typography role scale (Typography Role Scale Hierarchy)

Claude defines atomic classes bound to each semantic UI role, with a base font size, proportional line height and variable font optical tuning built in:

8. Multi-line truncation scale (Multi-line Truncation & Clamp Scale)

Claude uses a specific -webkit-line-clamp scale for cards and bubbles, together with overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;:

/* 1. Sidebar conversation titles (single line, never overflows) */
.line-clamp-1 {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* 2. Thinking card summary (two-line preview) */
.line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

/* 3. System prompt cards and model descriptions (three-line preview) */
.line-clamp-3 {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
}

1.6 Motion tokens and the full set of easing curves

Technical domain: Motion Tokens & Physical Curves

graph LR
    T1["60ms: Micro"] --> T2["120ms: Snap"] --> T3["200ms: Base"] --> T4["300ms: Sheet"] --> T5["450ms: Slow"]

1. Duration Tokens

• --cds-dur-fast: 60ms (micro-interactions, focus ring show / hide)
• --cds-dur-snap: 120ms (snapping toggles, badge activation)
• --cds-dur-base: 200ms (standard control hover and background transitions)
• --cds-dur-sheet: 300ms (drawer slide-in, conversation viewport pin tracking)
• --cds-dur-slow: 450ms (ambient transitions, modal rise and fall)

2. The real Bézier easing curves found by REA v6.5.0 (The 7 Core Physical Curves)

REA's full CSS scan of the official production bundle shows that Claude does not have just 3 generic curves. It tunes a dedicated damping constant for each interaction scenario:

📚 1.x overview · Chapter 2: Atomic Components & Interactive Controls (Chinese) ➡️ · Live React chat UI demos

Open Claude UI is an unofficial community analysis, MIT licensed. Claude is a trademark of Anthropic; this project is not affiliated with Anthropic.