fix(web): disable anonymous login by default (guest button removal)
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.
96
marketing/COPY.md
Normal 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 ]
|
||||
244
marketing/anthropic-tokens.json
Normal 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)"
|
||||
}
|
||||
BIN
marketing/assets/admin-01-overview.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
marketing/assets/admin-auth-redirect.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
marketing/assets/anthropic-refs/01-hero.png
Normal file
|
After Width: | Height: | Size: 108 KiB |
BIN
marketing/assets/anthropic-refs/02-surfaces.png
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
marketing/assets/anthropic-refs/03-pricing.png
Normal file
|
After Width: | Height: | Size: 116 KiB |
BIN
marketing/assets/anthropic-refs/04-phone-to-pr.png
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
marketing/assets/anthropic-refs/05-what-could-you-do.png
Normal file
|
After Width: | Height: | Size: 92 KiB |
BIN
marketing/assets/anthropic-refs/06-meets-you.png
Normal file
|
After Width: | Height: | Size: 142 KiB |
BIN
marketing/assets/anthropic-refs/07-footer.png
Normal file
|
After Width: | Height: | Size: 244 KiB |
BIN
marketing/assets/anthropic-refs/claude-code-page.png
Normal file
|
After Width: | Height: | Size: 257 KiB |
BIN
marketing/assets/anthropic-refs/full-page.png
Normal file
|
After Width: | Height: | Size: 2.6 MiB |
BIN
marketing/assets/anthropic-refs/toaster.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
marketing/assets/claudemesh-final-hero.png
Normal file
|
After Width: | Height: | Size: 258 KiB |
BIN
marketing/assets/claudemesh-live-01-hero.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
marketing/assets/claudemesh-live-01b.png
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
marketing/assets/claudemesh-live-01c.png
Normal file
|
After Width: | Height: | Size: 261 KiB |
BIN
marketing/assets/claudemesh-live-02.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
marketing/assets/claudemesh-live-03.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
marketing/assets/claudemesh-live-04.png
Normal file
|
After Width: | Height: | Size: 80 KiB |
BIN
marketing/assets/claudemesh-live-05.png
Normal file
|
After Width: | Height: | Size: 96 KiB |
BIN
marketing/assets/fonts/AnthropicMono-Italic.woff2
Normal file
BIN
marketing/assets/fonts/AnthropicMono-Roman.woff2
Normal file
BIN
marketing/assets/fonts/AnthropicSans-Italic.woff2
Normal file
BIN
marketing/assets/fonts/AnthropicSans-Roman.woff2
Normal file
BIN
marketing/assets/fonts/AnthropicSerif-Italic.woff2
Normal file
BIN
marketing/assets/fonts/AnthropicSerif-Roman.woff2
Normal file
BIN
marketing/assets/hero-mesh.png
Normal file
|
After Width: | Height: | Size: 639 KiB |
BIN
marketing/assets/og-claudemesh-1200x630.png
Normal file
|
After Width: | Height: | Size: 947 KiB |
87
marketing/design-system.md
Normal 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 | 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 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.
|
||||
BIN
marketing/reference/claude-code-logo.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
marketing/reference/claude-code-ref.png
Normal file
|
After Width: | Height: | Size: 268 KiB |
BIN
marketing/reference/claude-code-terminal.png
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
marketing/reference/hero.png
Normal file
|
After Width: | Height: | Size: 631 KiB |