fix(web): disable anonymous login by default (guest button removal)
Some checks failed
CI / Lint (push) Has been cancelled
CI / Typecheck (push) Has been cancelled
CI / Broker tests (Postgres) (push) Has been cancelled
CI / Docker build (linux/amd64) (push) Has been cancelled

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.
This commit is contained in:
Alejandro Gutiérrez
2026-04-05 15:26:13 +01:00
parent 3a7191e39e
commit 2412267fb4
44 changed files with 967 additions and 3 deletions

96
marketing/COPY.md Normal file
View File

@@ -0,0 +1,96 @@
# claudemesh.com — Marketing Copy
## Hero
**CLAUDEMESH**
*Every Claude Code session, woven into one mesh.*
Open source. Self-hosted. Built for teams that already live inside Claude Code.
[ Get started ] [ Star on GitHub ]
---
## One-liner variants (for social, OG, README)
- Turn every teammate's Claude Code into a shared workspace.
- A mesh network for Claude Code — one session per dev, all talking.
- Stop DMing context. Let the agents coordinate.
- Your team's Claude sessions, one lattice.
---
## The problem
Claude Code already lives on every engineer's laptop. It reads the repo, runs commands, edits files, keeps context. Each session is brilliant in isolation — and completely blind to the other five running on your team's machines right now.
So engineers paste context into Slack. They screenshot terminals. They rebuild the same mental model Claude already had on someone else's machine.
The work doubles. The context dies on every restart.
## What claudemesh does
claudemesh is a self-hosted broker that connects Claude Code sessions across machines into one live mesh.
- Every session announces what it is working on.
- Any session can message another — by human name, by repo, by machine.
- Messages route through a local WebSocket broker you run yourself.
- Presence, priority, and status are tracked automatically from each session's activity.
No cloud account. No training on your code. Your mesh, your machines, your rules.
---
## Real scenarios
### Platform team owns twelve services
Infra engineer spins up Claude Code pointed at the Terraform repo. Backend engineer has Claude Code in the service repo. When infra ships a new secret name, Claude on the infra side messages Claude on the backend side: *"SECRET_RENAMED auth-token → auth-token-v2, bump your env loader."* Backend Claude picks up the message next time the engineer goes idle, opens the file, makes the edit, asks the human for approval.
Two engineers, two agents, zero Slack threads.
### Database migration across a monorepo
DBA runs a migration in one Claude session. Seven service-owner Claude sessions subscribe to schema changes. When the migration lands, each service's Claude runs its own typecheck, surfaces the breaks to its human, and proposes the fix — already aware of the new schema, because it got the message.
### Oncall handoff at 3 AM
Incident Claude on the oncall laptop has been debugging a prod bug for forty minutes. The oncall rotates. The next engineer opens Claude Code. Their session pulls the summary, the hypotheses tried, the logs read, the files touched. No standup. No writeup. The investigation continues.
### Security review before a release
Release Claude opens a PR. Security Claude on a different machine subscribes to PR-opened events, runs its checklist against the diff, files findings back to the release session. The release engineer sees one consolidated review instead of chasing approvals.
---
## Why enterprises will care
Teams already pay for Claude Code per seat. claudemesh multiplies what those seats do together.
- **Context survives handoffs.** One agent hands work to the next with full history. No rebuilding.
- **Decisions stay in the tool.** No copy-paste into Slack, Jira, or a meeting that did not need to happen.
- **Work parallelises.** Six agents on six machines can coordinate on the same release without humans playing telephone.
- **Your data stays local.** Self-hosted broker. Messages never leave your network.
- **Audit trail by default.** Every message, every status, every handoff, logged.
claudemesh does not replace the engineer. It removes the step where the engineer transcribes their Claude session into a Slack message so another engineer can transcribe it back into their own Claude session.
---
## Why open source, why now
Anthropic built Claude Code as a per-developer tool. The next unlock is between developers. We think that layer should be open, self-hosted, and owned by the teams that run it — not a SaaS tax on a tool you already pay for.
Built on top of the claude-intercom prototype (2 sessions, one laptop). claudemesh scales it to teams, machines, and offices.
Run the broker. Point your Claude Code at it. Watch the mesh light up.
---
## Calls to action
- **For developers:** `npx claudemesh init` — three commands, running in sixty seconds.
- **For teams:** Self-host the broker on one machine in your network. Everyone else joins.
- **For Anthropic:** This is the agent-to-agent layer the community will build anyway. Let's build it together.
[ github.com/claudemesh/claudemesh ]

View File

@@ -0,0 +1,244 @@
{
"--_theme---button-brand--text": "#faf9f5",
"--_grid---column-count": "12",
"--swatch--clay": "#d97757",
"--radius--x-small": ".25rem",
"--_typography---line-height--1-7": "1.7",
"--nav--icon-thickness": ".0625rem",
"--_typography---font-size--body-large-2": "clamp(1.25*1rem,((1.25 - ((1.4375 - 1.25)/(90 - 20)*20))*1rem + ((1.4375 - 1.25)/(90 - 20))*100vw),1.4375*1rem)",
"--_theme---switch--dot-background-active": "white",
"--radius--large": "1rem",
"--_theme---button-primary--border": "#30302e",
"--_theme---button-brand--background": "#c96442",
"--_typography---letter-spacing--0em": "0em",
"--moat-shadow": "rgba(0, 0, 0, 0.1)",
"--_typography---line-height--1-5": "1.5",
"--moat-bg-tertiary": "#f3f4f6",
"--moat-text-primary": "#1f2937",
"--_theme---button-primary--text-hover": "#faf9f5",
"--_text-style---font-weight": "400",
"--_theme---button-primary--background-hover": "#1f1e1d",
"--moat-warning-light": "rgba(245, 158, 11, 0.1)",
"--_state---false": "0",
"--radius--x-large": "clamp(1*1rem,((1 - ((1.5 - 1)/(90 - 20)*20))*1rem + ((1.5 - 1)/(90 - 20))*100vw),1.5*1rem)",
"--swatch--gray-050": "#faf9f5",
"--_typography---line-height--1-2": "1.2",
"--moat-error": "#dc2626",
"--_typography---text-transform--none": "none",
"--_theme---button-tertiary--border-hover": "#d1cfc5",
"--_theme---selection--background": "color-mix(in srgb,#d97757/**/50%,transparent)",
"--grid-breakout": "[full-start] minmax(0, 1fr) [content-start] repeat(12, minmax(0, calc((min(calc(90*1rem),100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)*2) - (2rem*(12 - 1)))/12))) [content-end] minmax(0, 1fr) [full-end]",
"--_typography---font--text-trim-top": ".39em",
"--_button-style---background-hover": "#c96442",
"--swatch--gray-000": "white",
"--swatch--gray-350": "#c2c0b6",
"--_alignment---direction": "start",
"--_typography---font-size--h1": "clamp(2.125*1rem,((2.125 - ((3.25 - 2.125)/(90 - 20)*20))*1rem + ((3.25 - 2.125)/(90 - 20))*100vw),3.25*1rem)",
"--_button-style---text": "#faf9f5",
"--_trigger---off": "0",
"--swatch--gray-150": "#f0eee6",
"--_text-style---trim-bottom": ".38em",
"--swatch--fig": "#c46686",
"--_typography---font-size--h3": "clamp(1.75*1rem,((1.75 - ((2.25 - 1.75)/(90 - 20)*20))*1rem + ((2.25 - 1.75)/(90 - 20))*100vw),2.25*1rem)",
"--swatch--gray-850": "#1f1e1d",
"--_typography---letter-spacing--0-05em": ".05em",
"--_theme---button-brand--icon-hover": "#faf9f5",
"--max-width--main": "calc(90*1rem)",
"--_theme---foreground-tertiary": "#5e5d59",
"--focus--width": ".125rem",
"--swatch--oat": "#e3dacc",
"--_text-style---font-size": "clamp(1.1875*1rem,((1.1875 - ((1.25 - 1.1875)/(90 - 20)*20))*1rem + ((1.25 - 1.1875)/(90 - 20))*100vw),1.25*1rem)",
"--swatch--gray-450": "#9c9a92",
"--_typography---font--mono-text-trim-bottom": ".37em",
"--_theme---button-tertiary--background": "#faf9f5",
"--_theme---switch--border-active": "transparent",
"--_theme---button-brand--background-hover": "#c96442",
"--_text-style---font-weight<deleted|variable-4b164c1c-8d1a-d4a3-2cae-137e7ca87326>": "400",
"--swiper-theme-color": "#007aff",
"--_button-style---text-hover": "#faf9f5",
"--swatch--gray-800": "#262624",
"--_button-style---spacer-width-hover": ".0625rem",
"--_spacing---space--2rem": "clamp(1.75*1rem,((1.75 - ((2 - 1.75)/(90 - 20)*20))*1rem + ((2 - 1.75)/(90 - 20))*100vw),2*1rem)",
"--_theme---foreground-secondary": "#30302e",
"--moat-accent": "#3b82f6",
"--_typography---font--logographic-family": "\"Noto Sans\",Arial,sans-serif",
"--_theme---button-secondary--icon": "#4d4c48",
"--_text-style---trim-top": ".39em",
"--_theme---button-secondary--border-hover": "#e8e6dc",
"--_theme---button-primary--border-hover": "#30302e",
"--swatch--cactus": "#bcd1ca",
"--_theme---switch--background": "#f0eee6",
"--_theme---button-primary--text": "#faf9f5",
"--moat-warning-border": "rgba(245, 158, 11, 0.2)",
"--site--gutter<deleted|variable-19914bb2-08fa-8b60-b710-6beb999f4c42>": "2rem",
"--_typography---font--primary-bold": "700",
"--_trigger---on": "1",
"--_typography---font-size--h2": "clamp(1.875*1rem,((1.875 - ((2.75 - 1.875)/(90 - 20)*20))*1rem + ((2.75 - 1.875)/(90 - 20))*100vw),2.75*1rem)",
"--radius--main": ".75rem",
"--_typography---line-height--1-1": "1.1",
"--_theme---switch--background-active": "#2c84db",
"--_column-count---value": "1",
"--_spacing---section-space--main": "clamp(6*1rem,((6 - ((8 - 6)/(90 - 20)*20))*1rem + ((8 - 6)/(90 - 20))*100vw),8*1rem)",
"--_text-style---line-height": "1.6",
"--radius--xx-large": "clamp(1*1rem,((1 - ((2 - 1)/(90 - 20)*20))*1rem + ((2 - 1)/(90 - 20))*100vw),2*1rem)",
"--grid-breakout-single": "[full-start] minmax(0, 1fr) [content-start] minmax(0, calc(100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem) * 2)) [content-end] minmax(0, 1fr) [full-end]",
"--_theme---border-secondary": "#d1cfc5",
"--moat-scrollbar-track": "transparent",
"--max-width--small": "60rem",
"--_theme---button-secondary--border": "#d1cfc5",
"--_typography---font-size--h5": "clamp(1.25*1rem,((1.25 - ((1.5625 - 1.25)/(90 - 20)*20))*1rem + ((1.5625 - 1.25)/(90 - 20))*100vw),1.5625*1rem)",
"--moat-accent-light": "rgba(59, 130, 246, 0.1)",
"--_theme---button-primary--icon": "#faf9f5",
"--moat-border": "#e5e7eb",
"--_theme---switch--dot-border": "#b0aea5",
"--swatch--gray-1000": "#000",
"--swatch--gray-250": "#dedcd1",
"--swatch--gray-400": "#b0aea5",
"--_theme---button-primary--icon-hover": "#faf9f5",
"--swatch--coral": "#ebcece",
"--_button-style---border-hover": "#c96442",
"--moat-error-border": "rgba(239, 68, 68, 0.2)",
"--_typography---font--text-trim-bottom": ".38em",
"--_spacing---space--0-75rem": "clamp(.75*1rem,((.75 - ((.75 - .75)/(90 - 20)*20))*1rem + ((.75 - .75)/(90 - 20))*100vw),.75*1rem)",
"--nav--dropdown-duration": "300ms",
"--_theme---button-tertiary--icon": "#5e5d59",
"--_typography---text-transform--uppercase": "uppercase",
"--swatch--heather": "#cbcadb",
"--_text-style---text-wrap": "pretty",
"--_theme---button-brand--text-hover": "#faf9f5",
"--nav--dropdown-delay": "0ms",
"--moat-notification-text": "#ffffff",
"--_typography---font-size--body-3": "clamp(.9375*1rem,((.9375 - ((.9375 - .9375)/(90 - 20)*20))*1rem + ((.9375 - .9375)/(90 - 20))*100vw),.9375*1rem)",
"--_theme---button-secondary--background": "#e8e6dc",
"--_theme---button-secondary--background-hover": "white",
"--moat-success": "#059669",
"--max-width--medium": "74.5rem",
"--swatch--gray-600": "#5e5d59",
"--moat-success-border": "rgba(34, 197, 94, 0.2)",
"--_spacing---space--1-5rem": "clamp(1.5*1rem,((1.5 - ((1.5 - 1.5)/(90 - 20)*20))*1rem + ((1.5 - 1.5)/(90 - 20))*100vw),1.5*1rem)",
"--swatch--clay-interactive": "#c96442",
"--_theme---selection--text": "#141413",
"--_typography---font-size--micro": "clamp(.625*1rem,((.625 - ((.625 - .625)/(90 - 20)*20))*1rem + ((.625 - .625)/(90 - 20))*100vw),.625*1rem)",
"--_typography---font--primary-family": "\"Anthropic Sans\",Arial,sans-serif",
"--_typography---line-height--1-3": "1.3",
"--_spacing---section-space--small": "clamp(4*1rem,((4 - ((6 - 4)/(90 - 20)*20))*1rem + ((6 - 4)/(90 - 20))*100vw),6*1rem)",
"--_theme---foreground-primary": "#141413",
"--swatch--gray-100": "#f5f4ed",
"--_typography---font--mono-family": "\"Anthropic Mono\",Arial,sans-serif",
"--_theme---pictogram-accent": "#e3dacc",
"--_typography---font-size--body-large-1": "clamp(1.375*1rem,((1.375 - ((1.5 - 1.375)/(90 - 20)*20))*1rem + ((1.5 - 1.375)/(90 - 20))*100vw),1.5*1rem)",
"--moat-bg-primary": "#ffffff",
"--swatch--gray-950": "#141413",
"--_button-style---spacer-width": "0rem",
"--_spacing---section-space--large": "clamp(8*1rem,((8 - ((12.5 - 8)/(90 - 20)*20))*1rem + ((12.5 - 8)/(90 - 20))*100vw),12.5*1rem)",
"--swatch--gray-550": "#73726c",
"--moat-border-light": "#f3f4f6",
"--_button-style---border-width": ".0625rem",
"--_text-style---logographic-family": "\"Noto Sans\",Arial,sans-serif",
"--focus--offset-inner": "-.125rem",
"--swatch--gray-500": "#87867f",
"--_theme---button-secondary--text-hover": "#141413",
"--nav--hamburger-gap": "clamp(.25*1rem,((.25 - ((.25 - .25)/(90 - 20)*20))*1rem + ((.25 - .25)/(90 - 20))*100vw),.25*1rem)",
"--_theme---background-primary": "#faf9f5",
"--site--viewport-min": "20",
"--swatch--gray-700": "#3d3d3a",
"--moat-text-tertiary": "#6b7280",
"--_button-style---border-width-hover": "calc(.0625rem*2)",
"--swatch--gray-200": "#e8e6dc",
"--mcp-pointer-border-color": "#7abaffc0",
"--_grid---column-width": "calc((min(calc(90*1rem),100% - clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)*2) - (2rem*(12 - 1)))/12)",
"--swatch--gray-750": "#30302e",
"--site--margin": "clamp(2*1rem,((2 - ((4 - 2)/(90 - 20)*20))*1rem + ((4 - 2)/(90 - 20))*100vw),4*1rem)",
"--_spacing---space--3rem": "clamp(2.5*1rem,((2.5 - ((3 - 2.5)/(90 - 20)*20))*1rem + ((3 - 2.5)/(90 - 20))*100vw),3*1rem)",
"--_typography---font-size--body-1": "clamp(1.1875*1rem,((1.1875 - ((1.25 - 1.1875)/(90 - 20)*20))*1rem + ((1.25 - 1.1875)/(90 - 20))*100vw),1.25*1rem)",
"--_theme---border-tertiary": "#e8e6dc",
"--_theme---button-primary--background": "#141413",
"--_text-style---letter-spacing": "0em",
"--nav--dropdown-open-duration": "600ms",
"--_theme---button-tertiary--text": "#5e5d59",
"--swatch--gray-650": "#4d4c48",
"--swatch--brand-600<deleted|variable-f4848f9a-e1c5-5c7a-9707-4fe0d1542434>": "color-mix(in srgb,#d97757,black 20%)",
"--moat-shadow-lg": "rgba(0, 0, 0, 0.15)",
"--_theme---button-brand--border-hover": "#c96442",
"--_typography---font--primary-semibold": "600",
"--_text-style---text-transform": "none",
"--swatch--transparent": "transparent",
"--_spacing---space--0-5rem": "clamp(.5*1rem,((.5 - ((.5 - .5)/(90 - 20)*20))*1rem + ((.5 - .5)/(90 - 20))*100vw),.5*1rem)",
"--_state---true": "1",
"--_typography---font-size--body-2": "clamp(1.0625*1rem,((1.0625 - ((1.0625 - 1.0625)/(90 - 20)*20))*1rem + ((1.0625 - 1.0625)/(90 - 20))*100vw),1.0625*1rem)",
"--_button-style---border": "#c96442",
"--ease-expo-out": "cubic-bezier(0.16, 1, 0.3, 1)",
"--_typography---font-size--h4": "clamp(1.4375*1rem,((1.4375 - ((2 - 1.4375)/(90 - 20)*20))*1rem + ((2 - 1.4375)/(90 - 20))*100vw),2*1rem)",
"--_text-style---font-family": "\"Anthropic Sans\",Arial,sans-serif",
"--_theme---button-brand--icon": "#faf9f5",
"--_button-style---icon": "#faf9f5",
"--site--column-count<deleted|variable-85d23ac9-df16-3529-599c-7c03076ebe38>": "12",
"--_text-style---margin-bottom": "clamp(1.5*1rem,((1.5 - ((1.5 - 1.5)/(90 - 20)*20))*1rem + ((1.5 - 1.5)/(90 - 20))*100vw),1.5*1rem)",
"--_theme---button-brand--border": "#c96442",
"--_theme---background-tertiary": "#f0eee6",
"--_spacing---space--1rem": "clamp(1*1rem,((1 - ((1 - 1)/(90 - 20)*20))*1rem + ((1 - 1)/(90 - 20))*100vw),1*1rem)",
"--moat-scrollbar-thumb": "#d1d5db",
"--_theme---text-accent": "#d97757",
"--radius--small": ".5rem",
"--swatch--gray-900": "#1a1918",
"--_theme---error-text": "#b53333",
"--border-width--main": ".0625rem",
"--_theme---border-primary": "#b0aea5",
"--moat-success-light": "rgba(34, 197, 94, 0.1)",
"--moat-warning": "#d97706",
"--swatch--olive": "#788c5d",
"--_typography---font--secondary-family": "\"Anthropic Serif\",Georgia,sans-serif",
"--_button-style---icon-hover": "#faf9f5",
"--focus--offset-outer": ".25rem",
"--_theme---switch--dot-border-active": "transparent",
"--_grid---gutter": "2rem",
"--_button-style---background": "#c96442",
"--_theme---heading-accent<deleted|variable-25bd0d95-1867-08bf-9f2f-eabc649f971e>": "color-mix(in srgb,#d97757,black 20%)",
"--_typography---font--mono-text-trim-top": ".4em",
"--_typography---font--primary-medium<deleted|variable-bf70a7c1-809a-4d78-48d8-6a700e801b65>": "500",
"--_typography---font--primary-light": "300",
"--_theme---button-tertiary--background-hover": "#faf9f5",
"--_theme---button-tertiary--border": "#d1cfc5",
"--site--viewport-max": "90",
"--swatch--sky": "#6a9bcc",
"--moat-text-muted": "#9ca3af",
"--moat-bg-secondary": "#f9fafb",
"--swiper-navigation-size": "44px",
"--_theme---heroes-accent": "#d97757",
"--_typography---font--primary-medium": "500",
"--_gap---size": "2rem",
"--_theme---button-secondary--icon-hover": "#30302e",
"--_typography---font-size--h6": "clamp(1*1rem,((1 - ((1.1875 - 1)/(90 - 20)*20))*1rem + ((1.1875 - 1)/(90 - 20))*100vw),1.1875*1rem)",
"--_typography---font--primary-regular<deleted|variable-e2e11636-2778-b266-3d73-a7bb3f1f201f>": "400",
"--swatch--gray-300": "#d1cfc5",
"--_typography---line-height--1-6": "1.6",
"--_theme---white": "white",
"--_theme---button-secondary--text": "#4d4c48",
"--_spacing---space--2-5rem": "clamp(2*1rem,((2 - ((2.5 - 2)/(90 - 20)*20))*1rem + ((2.5 - 2)/(90 - 20))*100vw),2.5*1rem)",
"--moat-notification-bg": "#1f2937",
"--nav--hamburger-rotate": "45",
"--max-width--full": "100%",
"--_theme---background-secondary": "#f5f4ed",
"--moat-accent-border": "rgba(59, 130, 246, 0.2)",
"--_typography---font--primary-regular": "400",
"--nav--hamburger-thickness": ".0625rem",
"--_typography---text-transform--capitalize": "capitalize",
"--_typography---line-height--1": "1",
"--_spacing---space--4rem": "clamp(3.25*1rem,((3.25 - ((4 - 3.25)/(90 - 20)*20))*1rem + ((4 - 3.25)/(90 - 20))*100vw),4*1rem)",
"--_spacing---space--0-25rem": "clamp(.25*1rem,((.25 - ((.25 - .25)/(90 - 20)*20))*1rem + ((.25 - .25)/(90 - 20))*100vw),.25*1rem)",
"--moat-scrollbar-thumb-hover": "#9ca3af",
"--_typography---font-size--display-2": "clamp(2.25*1rem,((2.25 - ((4 - 2.25)/(90 - 20)*20))*1rem + ((4 - 2.25)/(90 - 20))*100vw),4*1rem)",
"--moat-error-light": "rgba(239, 68, 68, 0.1)",
"--_typography---font-size--caption": "clamp(.75*1rem,((.75 - ((.75 - .75)/(90 - 20)*20))*1rem + ((.75 - .75)/(90 - 20))*100vw),.75*1rem)",
"--_spacing---section-space--none": "0px",
"--_theme---switch--dot-background": "white",
"--_spacing---section-space--page-top": "clamp(12*1rem,((12 - ((15 - 12)/(90 - 20)*20))*1rem + ((15 - 12)/(90 - 20))*100vw),15*1rem)",
"--_typography---text-transform--lowercase": "lowercase",
"--_theme---switch--border": "#d1cfc5",
"--_typography---font-size--display-1": "clamp(2.625*1rem,((2.625 - ((4.5 - 2.625)/(90 - 20)*20))*1rem + ((4.5 - 2.625)/(90 - 20))*100vw),4.5*1rem)",
"--_typography---letter-spacing--0-01em": ".01em",
"--_theme---button-tertiary--icon-hover": "#141413",
"--moat-text-secondary": "#4b5563",
"--_theme---button-tertiary--text-hover": "#141413",
"--_text-style---margin-top": "clamp(1*1rem,((1 - ((1 - 1)/(90 - 20)*20))*1rem + ((1 - 1)/(90 - 20))*100vw),1*1rem)"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 198 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 639 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 947 KiB

View File

@@ -0,0 +1,87 @@
# 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 | 300800 | `/fonts/AnthropicSans-Roman.woff2` + Italic |
| Anthropic Serif | 300800 | `/fonts/AnthropicSerif-Roman.woff2` + Italic |
| Anthropic Mono | 300800 | `/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 init` command 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-face
- `apps/web/public/fonts/` — 6 woff2 files
- `apps/web/src/modules/marketing/home/*.tsx` — sections using tokens
- `marketing/anthropic-tokens.json` — full 242-var dump (reference)
- `marketing/assets/fonts/` — master copies of font files
- `marketing/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.

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 631 KiB