html-docs.com · product ui audit & revamp

One brand, every surface — you pick the color

The audit's structural fixes stand; the cream-and-terracotta palette goes — it reads as Claude-default. Below are six complete replacement palettes. Use the palette row to flip every page mockup live; use the tabs to walk each page of the site.

July 2026 · 6 palettes × 7 page mockups, all token-driven · Georgia stands in for Source Serif 4

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.

FindingFix
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.

1 · Ink & Cobalt
#F7F7F4 · #2B4BC7 · #1E38A3 · #16181D
Print/blueprint editorial. Cool paper, deep ultramarine. Blue doubles as the natural link color; far from both Claude-clay and purple-gradient slop. The safest strong choice.
2 · Evergreen
#F8F8F3 · #23684A · #174F38 · #191B17
Publishing house, archival. Calm and almost never used by AI tools. Caveat: the accent sits near the success color — "Live" dots shift to a brighter, yellower green to stay distinct.
3 · Oxblood
#FBF9F5 · #8E2F3C · #6B1F2B · #1C1817
Literary, law-library. Warmest of the six without touching orange. Caveat: destructive states must stay clearly orange-red (#B04A32) so Revoke ≠ brand.
4 · Petrol
#F7F8F6 · #16606B · #0E4850 · #151A1B
Technical, instrument-panel calm. A deep blue-green that avoids both SaaS-teal brightness and dev-tool blue. Reads precise; pairs beautifully with mono numerals.
5 · Plum
#FAF9F6 · #5B3E8C · #43296C · #1A171C
Ink-and-violet manuscript. Purple without the slop: flat, deep, desaturated, on warm paper — no gradients ever, or it tips straight back into the AI look.
6 · Graphite & Citron
#FAFAF7 · #26251F · citron wash #F2EDC0
Legal pad / manuscript markup. The boldest option: buttons and links are ink; the only color is a citron highlighter used for active states, selections, and marks — never on buttons.

Shared semantic colors (all palettes)

ok
Success
#3E7A4A
warn
Warning
#96700F
bad
Destructive
#B04A32
info
Info
#3E6796

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

Primary — accent, hover deepens Secondary — outline on card Ghost — quiet actions

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

DeletePastel purple/pink gradient thumbnails and traffic-light dots on published-site cards → paper thumbnail, mono slug, green live dot.
DeleteEmoji-as-icons (📄 🌐 📎, ✎ glyph) in Create, Learn, and Artifacts → lucide equivalents.
DeleteThe entire terracotta/cream token set and Artifacts' #CC785C shadow palette → the chosen palette's tokens, globally.
DeleteSparkles ×6 and wands → one sparkle on the Docsmith entry point; AI features otherwise use plain labels.
Merge/learn into /create — they render near-identical content today.
DeleteComic Sans & Brush Script from the editor font picker; hardcoded font-size "11" becomes the live value.

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.

What changed
  • 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.
html-docs.com
For documents and AI-generated HTML
The shared canvas for you and your agents.
Paste a link or publish from the command line — imports, Google Docs, slides, and raw HTML become live, editable pages.
Paste a Google Doc, Slides deck, or web page link Convert
$ npx @html-docs/cli publish page.html copy
One command → a live URL. No hosting, no setup.
html-docs.com/site/q3-plan Live
Q3 planning
Ship the async pipeline
184ms
p95
41.2M
requests
01
Bring anything
Docs, slides, links, raw HTML, agent output.
02
Edit together
Region-based editing, comments, live cursors.
03
Publish instantly
A live URL your team — or your agent — can update.
Landing — unified nav, the product's own best line as the headline, tokens-only preview mock, real footer.

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.

What changed
  • 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.
html-docs.com/documents
Library
All pages · 24
Published · 6
Shared with me · 3
Create
New page
Docsmith chat
Start something new
Empty page
Generate with AI
Import a doc
Import an artifact
Recent
Search pages…
AQ3 planning docedited 2h ago
AOnboarding runbookLiveyesterday
Afs-agents essayJun 24
Published sites
Design System 2.0
/site/design-system-2
Team wiki
/site/team-wiki
Launch retro
/site/launch-retro · unlisted
Dashboard — published sites without the pastel gradients: the thumbnail sketches the page itself; the slug and live dot carry the meaning.

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.

What changed
  • 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.
html-docs.com/documents/q3-planning
Q3 planning doc Live RM Comments · 3 ✦ Docsmith Share
| Normal text ▾ Sans ▾ − 15 + | B IU | A 🔗• — 100% ▾
Platform · Q3
Q3 planning doc
Upload p95 is 3.1s because resize and transcode run inline. This quarter we move processing to a queue and worker pool, return 202 with a status URL, and target p95 under 400ms.
FIG 1 · ASYNC PATH
APIQueueWorkersS3
Comments
All · 3Resolved · 5
MMaya2h
"return 202 with a status URL"
Do the mobile clients handle 202 yet?
DDocsmithAgent
iOS ≥ 4.2 does; Android needs the retry patch in #482.
SSam1d
Add the DLQ runbook link before we share this out.
Reply…
Editor — paper frame on the canvas, grouped header, one toolbar idiom, comments entirely on the accent system (the blue rings, yellow quotes, and avatar rainbow are gone).

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.

What changed
  • 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.
html-docs.com/chat
New chat
Recent
Q3 planning doc
Pricing page rewrite
Onboarding runbook
Turn my Q3 planning notes into a proposal doc with a timeline.
DDocsmith
Done — I structured it as problem → proposal → phased timeline, and pulled the p95 numbers from your notes into a metrics row.
A
Q3 platform proposal
Created · open in editor →
Open
Describe the document you want to create… Send
Draft a proposal Summarize a doc Make a landing page
Docsmith — same shell as the rest of the app, agent identity carried by the ink "D" avatar and one Agent badge, success token for the created state.

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.

What changed
  • Serif title block with eyebrow — "Convert" becomes a page, not a widget label. Slides gets the identical treatment.
  • Foreground token replaces text-white in 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.
html-docs.com/convert
Tools
Convert anything into a page
Paste content or drop a file — plaintext, HTML, Markdown, a Google Doc link. Get a polished, editable document.
Drop a file here, or browse
.html · .md · .docx · .pdf · or paste below
Paste your content here…
Document
A clean editorial page
Slides
A scroll-snap deck
Optional: "make it a one-pager", "keep my headings"… Convert
Convert — the tool-page pattern: compact serif title block, tokens-only buttons, shared card primitives. Slides follows the same template.

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.

What changed
  • 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."
html-docs.com/pricing
Pricing
Publish HTML from your command line.
One command, a live URL in seconds — no hosting, no setup.
Annual · 2 months free Monthly
Free
$0
10 pages · community support
Start free
Starter
$8/mo
100 pages · custom slugs
Choose Starter
Popular
Pro
$20/mo
Unlimited pages · AI credits · teams
Choose Pro
Business
$60/mo
SSO · audit log · priority support
Talk to us
Your next page is one command away. npx @html-docs/cli publish page.html
Pricing — shared card recipe, single-signal popular tier, pill badges from the component system, footer present.

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.

What changed
  • 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").
html-docs.com/auth/login
Welcome back
Sign in to your account
Your documents are where you left them.
G Continue with Google
or
Email
you@company.com
Password
•••••••• Sign in
Don't have an account? Sign up
Login — minimal header variant, one input recipe, accent submit.
html-docs.com/settings/api-keys
Settings
Agent API keys
Treat a key like a password — it can read and edit every doc you own.
Key name
e.g. claude-code Create key
Copy now — shown once
hdk_9f2c…e81a Copy
claude-codehdk_…81aRevoke
ci-publisherhdk_…c4fRevoke
API keys — serif heading, accent buttons replacing stock black shadcn, soft-accent one-time reveal.

Product UI revamp · 6 palettes × 7 pages, all CSS-token driven — the palette selector swaps every mockup live · Georgia/system stacks stand in for Source Serif 4, Inter, and JetBrains Mono · prints fully expanded in the default palette.