What the audit found
Four parallel audits covered marketing, the app shell, the editor, and auth/settings. The structure of the findings is unchanged — the problems are drift and one-offs. Six findings account for the "slopped" feel, plus one new one: the palette itself.
| Finding | Fix |
|---|---|
The brand palette is Claude's. Warm cream #faf9f5 + terracotta #c96442 (and Artifacts' #CC785C) is the Anthropic house look — the site reads as AI-generated at the token level, before any layout is seen. | Replace the accent system wholesale. Six candidates below; every mockup in this doc renders in whichever you select. |
Five different headers. Landing hand-rolls its own nav (has Download, missing Pricing); auth, chat, and Artifacts each ship bespoke headers; /learn is linked from nowhere. | One AppNav with three variants — marketing, app, minimal — same logo, same links, same right cluster. Footer on every page. |
Competing accents. Artifacts hardcodes its own palette; the share dialog and API-keys page use stock-shadcn black primary buttons beside accent ones. | One accent token, everywhere. The black button variant is retired; no raw hex in components. |
Off-palette one-offs. Purple/pink gradient cards in published sites, blue-500 comment focus, yellow-100 quotes, random avatar colors, raw greens/reds — despite existing callout tokens. | Semantic color only through the callout tokens (green/amber/red/blue). Selection and focus states use the accent. |
Typography splits by page. Serif display headlines on landing/pricing, but sans text-2xl on Convert, Slides, API keys, error and 404 pages. | Every page title is Source Serif 4. Tool pages get a compact serif title block with an eyebrow — same species, smaller scale. |
| AI-slop tics. Emoji as icons (📄 🌐 📎), Sparkles rendered 6+ times in one dialog, wand icons, fake traffic-light browser dots, "Create beautiful docs" copy. | Lucide only. One sparkle, on the Docsmith entry point. Copy states what the product does: "The shared canvas for you and your agents." |
Component drift. Three formatting-button systems in the editor, three sidebar widths, card radii from rounded-lg to rounded-2xl, text-white vs text-accent-foreground, inline border styles vs classes. | One button component (3 variants), one card recipe (radius 12px), one sidebar spec (240px), tokens only. |
Six candidate palettes
Each is a full token set — paper, ink, grays, accent trio, hairlines — not just a button color. Flip the selector in the bar above and walk the page tabs; every surface re-renders. The strip shows paper → soft accent → accent → deep accent → ink.
#B04A32) so Revoke ≠ brand.Shared semantic colors (all palettes)
The rule from the audit stands under every palette: these are the only semantic colors. Emerald "Live" pills, blue comment rings, yellow quotes, and hashed avatar rainbows all map onto these four plus the accent.
One button system
Auth keeps these; settings drops its black shadcn defaults (except under Graphite, where ink is the accent); Convert and Slides drop text-white hardcodes for the foreground token. Hover is always the deep step, never accent/90.
Kill list
#CC785C shadow palette → the chosen palette's tokens, globally./learn into /create — they render near-identical content today.Landing
Diagnosis: solid bones, wrong nav, generic headline. The hand-rolled header disagrees with AppNav on links; the H1 says "Create beautiful docs…" while the product's best line — already written, buried in the developers footer — goes unused. The editor mock leaks off-palette blues and purples. No footer.
- Unified AppNav — same component as every other page; Pricing restored, Download moved to the footer.
- Headline promoted from their own copy: "The shared canvas for you and your agents."
- Convert input + CLI given equal weight — the two real entry paths, side by side.
- Doc preview mock uses product tokens only — no off-palette leakage.
- Footer exists — product links, Download, API reference.
Documents dashboard
Diagnosis: the most on-brand surface, sabotaged by its published-sites section — six hashed pastel gradients (violet→purple, rose→pink) with fake traffic-light dots, straight from the AI-slop catalog. Plus emerald pills that bypass the green token, duplicate eyebrows, and radius drift.
- Published-site cards lose the gradients — paper page-thumbnail, mono slug, success-green live dot.
- Traffic-light dots deleted; the card header is the URL, which is the information.
- One radius (12px), one eyebrow per view, emerald pill → success token.
- Sidebar spec unified at 240px — the same skeleton chat and settings will use.
- Hero cards keep lucide icons — quiet muted tiles, accent stroke.
Document editor
Diagnosis: the document floats on bare gray with no frame; the header crams ~9 controls with three different active-color systems; the comments panel switches to blue rings, yellow quotes, and rainbow avatars; the share dialog uses stock black shadcn while everything else uses the accent.
- The document gets a paper frame — white page, hairline border, soft shadow on the muted canvas. The chrome finally "holds" the content.
- Header grouped into three clusters: navigate/title · collaborate (avatars, comments, Docsmith) · act (Share primary). Overflow lives in one ⋯ menu.
- One formatting-button style across toolbar, floating bubble, and header: soft-accent active state.
- Comments on-palette: active card = accent ring, quotes = soft-accent left border, avatars = two-tone accent/ink initials. One "Agent" badge instead of three sparkles.
- Comic Sans and Brush Script removed; the font-size field shows the real value.
Docsmith chat
Diagnosis: a cohesive surface that lives on its own island — no AppNav, no logo, a third sidebar design, raw green-600 checkmarks, and "Docsmith is thinking…" as the personality. It reads as a different product bolted onto the shell.
- AppNav returns (thin app variant) — the logo and Library link are never lost.
- Sidebar matches the dashboard spec: 240px, same group labels, same active state.
- One sparkle total — on the empty-state mark. Buttons and status lines are plain labels.
- "Created" state uses the success token, not raw green-600.
- Serif welcome heading stays — it was the right instinct; now the rest of the shell agrees with it.
Convert (& the tool-page pattern)
Diagnosis: Convert and Slides break the brand's headline system — tiny sans text-2xl H1s, no eyebrow, text-white hardcoded buttons — so they read as utilities bolted onto an editorial product. The fix is a compact serif title block: same species as the marketing pages, smaller scale.
- Serif title block with eyebrow — "Convert" becomes a page, not a widget label. Slides gets the identical treatment.
- Foreground token replaces
text-whitein all six hardcoded spots (Convert ×4, Slides ×2). - Drop zone and option pills reuse dashboard primitives — same radius, same soft-accent hover.
- Output choice as two cards, selected = accent border, consistent with the slides page's better pattern.
Pricing
Diagnosis: already one of the better pages — right headline, real CLI framing. Drift only: inline-styled badge pills, ring + border double emphasis on the popular tier, padding that disagrees with the landing preview of the same cards, and no footer.
- Tier cards on the shared card recipe — one radius, one padding, used identically on landing and here.
- Popular tier = accent border + outlined badge, not border-plus-ring-plus-badge.
- Badges use the pill component (outlined, uppercase) instead of inline styles.
- Footer added; the closing CTA keeps its line — "Your next page is one command away."
Auth & Settings
Diagnosis: auth and settings are two different products today — bespoke accent inputs and buttons on login, stock black shadcn on API keys; four hand-rolled headers that disagree on stickiness and CTA style; serif headings on some pages, sans on others; hover tokens split between the deep step and accent/90.
- One minimal header variant (logo + one contextual action) shared by login, sign-up, error, 404, and settings.
- One input and one button — the accent system; black primary buttons retired from settings.
- Serif headings everywhere, including API keys, error, and 404.
- Key reveal uses the soft accent; keys are mono; helper copy kept ("Treat a key like a password").