2412267fb4
claudemesh requires an account — mesh membership is tied to user.id.
e8ad7a5 flipped the config default but the env var override at
env.config.ts:43 still defaulted to true, keeping the button visible.
Fixed at env var level + example files. Needs Coolify rebuild since
NEXT_PUBLIC_* is build-time in Next standalone.
3.4 KiB
3.4 KiB
claudemesh — Design System
Extracted from claude.com/product/claude-code on 2026-04-04 via Playwriter reverse-engineering. 242 CSS variables pulled, 6 font files downloaded, token table rebuilt as --cm-*.
Not "inspired by". This is the Anthropic design system, rewired under our own token names so the site reads as a native citizen of the Claude ecosystem.
Fonts (self-hosted, woff2)
| Family | Weights | File |
|---|---|---|
| Anthropic Sans | 300–800 | /fonts/AnthropicSans-Roman.woff2 + Italic |
| Anthropic Serif | 300–800 | /fonts/AnthropicSerif-Roman.woff2 + Italic |
| Anthropic Mono | 300–800 | /fonts/AnthropicMono-Roman.woff2 + Italic |
Usage
- Serif → display headlines, scenario titles, long-form body prose (the Anthropic voice)
- Sans → UI: buttons, nav, pillar labels
- Mono → code, terminal, metadata tags, section labels
Color palette (swatch names from claude.com)
| Token | Hex | Role |
|---|---|---|
--cm-clay |
#d97757 |
Brand primary (Claude orange) |
--cm-clay-hover |
#c96442 |
Brand hover |
--cm-fig |
#c46686 |
Accent pink |
--cm-oat |
#e3dacc |
Warm cream |
--cm-cactus |
#bcd1ca |
Sage |
--cm-gray-050 |
#faf9f5 |
Foreground (on dark) |
--cm-gray-150 |
#f0eee6 |
Surface (light mode) |
--cm-gray-350 |
#c2c0b6 |
Text secondary |
--cm-gray-450 |
#9c9a92 |
Text tertiary |
--cm-gray-800 |
#262624 |
Surface hover (dark) |
--cm-gray-850 |
#1f1e1d |
Elevated surface (dark) |
--cm-gray-900 |
#141413 |
Page background (dark) |
Type scale (fluid clamp, from Anthropic's own scale)
| Token | Min → Max | Use |
|---|---|---|
--cm-text-h1 |
2.125rem → 3.25rem | Page titles |
--cm-text-h2 |
1.875rem → 2.75rem | Section headers |
--cm-text-h3 |
1.75rem → 2.25rem | Card titles |
--cm-text-body-lg |
1.1875rem → 1.25rem | Lede paragraph |
- Line-heights: 1.2 (display), 1.5 (UI), 1.7 (body prose)
- Letter-spacing: 0 default, 0.05em on labels, 0.22em on section markers
Spacing & layout
- Gutter:
2rem - Max width:
90rem - Grid: 12-col with gutters
- Section padding:
py-32 px-8 md:px-16
Radii
--cm-radius-xs: 0.25rem (buttons, inputs, tags)--cm-radius-md: 0.5rem--cm-radius-lg: 1rem (hero cards, CTA box)
Motion
--cm-dur: 300ms--cm-ease:cubic-bezier(0.22, 0.61, 0.36, 1)- All transitions color + transform only, no layout shifts
Signature touches (claudemesh's own voice on top)
- Italic serif phrases in clay for emphasis — Anthropic uses this too
- Mono section markers prefixed with
—(e.g.— real scenarios) - Terminal-style tag chips in mono
$ npx claudemesh initcommand blocks with blinking clay cursor- Hero backdrop: generated mesh image at 50% opacity with gradient fade to bg
Files
apps/web/src/assets/styles/globals.css— tokens + @font-faceapps/web/public/fonts/— 6 woff2 filesapps/web/src/modules/marketing/home/*.tsx— sections using tokensmarketing/anthropic-tokens.json— full 242-var dump (reference)marketing/assets/fonts/— master copies of font filesmarketing/assets/anthropic-refs/— screenshots for visual reference
Legal note
This uses Anthropic's proprietary fonts and exact color tokens. If Anthropic sends a notice, we swap fonts to a free equivalent (Source Serif 4, Inter, JetBrains Mono) and shift clay ±5% — the layout and system survive. Until then: full native ecosystem look.