HTML Docs · Citron Draft

The direction, settled

Three drafts in: the terracotta system is out, the gray TE faceplate is out. What stays is the paper-and-ink editorial base the product already wants to be, with citron as its single, disciplined accent. A few instrument touches survive — but on paper, not on gray.

decision	what it means
Paper everywhere	One background: warm paper `#FAFAF7`, white cards, hairline borders. No faceplate gray, no cream-terracotta. The editor canvas is the only muted surface, so the document sheet reads as the focus.
Ink carries the brand	Text, headlines, links, and primary buttons are ink `#151513`. Serif (Source Serif 4) for page titles and document content; Inter for UI; JetBrains Mono for data, slugs, timestamps, and micro-labels.
Citron is a highlighter, three steps	`wash #F2EDC0` = active nav/selected states · `mark #F0DC55` = text highlights, comment anchors, the one marked phrase in a hero · `signal #FFD84D` = focus rings and attention dots. Never on backgrounds, icons, or decoration.
Kept from the instrument draft	Mono micro-labels for metadata (regions 128 · synced 2s · rev 14), dot+word statuses instead of filled pills, the signal dot on primary CTAs, grouped editor toolbar. Dropped: gray surfaces, lowercase-everything voice, knob controls.

Tokens

Paper

#FAFAF7

app background

Card

#FFFFFF

cards, inputs

Muted

#F1F1EA

wells, editor canvas

Ink

#151513

text, buttons, links

Ink soft

#4B4A44

secondary text

Ink faint

#7C7B72

metadata

Citron wash

#F2EDC0

active nav, selected rows

Citron mark

#F0DC55

highlights, anchors, hero mark

Citron signal

#FFD84D

focus rings, attention dots

Live

#4C8A55

published state only

Destructive

#C24B2E

delete/revoke only

Component idiom

ButtonsInk primary Publish, paper outline secondary, ghost text. The signal dot marks the single most important action per screen.

Focus contractEvery control gets a 3px citron-signal ring on focus — the GOV.UK move. Often the only yellow on a screen.

StatusDot + mono word: live · draft · error. No filled pills.

Marks mean actionCitron mark = a human or agent acted here: text highlights, comment anchors, the marked phrase in a headline. Wash = "currently selected."

Micro-labelsMono metadata lines under titles and in chrome: edited 2h · rev 14 · 128 regions. Quietly instrumental, on paper.

The yellow budgetPer screen: focus rings + one wash + marks where action happened. Anything more is a bug.

Carried over from the audit unchanged

One AppNav (marketing / app / minimal), footer on every page, /learn merged into /create.
Kill list: pastel gradients, traffic-light dots, emoji-as-icons, Sparkles×6, Artifacts' private palette, Comic Sans.
One card recipe (10px radius), one sidebar (240px), tokens only — no raw hex in components.
Serif titles on every page including Convert, Slides, settings, error, 404.

Landing

this draft · rev 03

Terminal-first content: the hero is a working session — publish, get a URL, update. The page sells the command line, not "beautiful docs."
How-it-works section removed per review; the terminal session is the explanation.
Document icon kept as the logo (the product's existing file mark, re-inked with a citron line) — and it becomes the favicon.

html-docs.com

HTML Docs CreateConvertSlidesArtifactsDevelopersPricing Sign inStart free

Publish HTML from your terminal

The shared canvas for you and your agents.

One command turns any HTML file into a live, editable page. You publish from the terminal; your team edits and comments in the browser; your agent updates it over the API.

$ npx @html-docs/cli publish page.html

→ https://html-docs.com/site/q3-plan · live

$ npx @html-docs/cli update q3-plan page.html

→ updated · rev 2 · your team sees it instantly

no account to start · no hosting · agents authenticate with one api key

Start free or paste a Google Doc / web link instead →

html-docs.com/site/q3-plan live

Q3 planning

Ship the async pipeline

184ms

p95

41.2M

requests

updated by agent · 2m ago

Landing — terminal session as the hero, no how-it-works section, document-icon logo (also the favicon).

Documents dashboard

this draft

Sidebar active = citron wash — the one wash on the screen.
Create tiles are white cards with ink icons (no knobs, no gray).
Rows keep the mono meta column (edited · rev) and dot+word statuses.
Published sites: paper thumbnails, mono slugs, live dots — gradients stay dead.

html-docs.com/documents

HTML Docs CreateConvertSlidesArtifactsDevelopers LibraryR

Library

All pages 24

Published 6

Shared with me 3

Create

New page

Docsmith chat

Start something new

Empty page

start from scratch

Generate with AI

docsmith drafts it

Import a doc

gdocs · html · md

Import an artifact

from claude / chatgpt

Recent

Search pages…

Q3 planning docedited 2h · rev 14draft

Onboarding runbookedited 1d · rev 31live

fs-agents essayjun 24 · rev 8live

Published sites

Design System 2.0

/site/design-system-2

Team wiki

/site/team-wiki

Launch retro

/site/launch-retro · unlisted

Dashboard — paper throughout; the sidebar wash is the only citron; statuses are dots + mono words.

Document editor

this draft

Muted canvas, white paper sheet — the only muted surface in the app, so the document pops.
Grouped toolbar on paper (text · style · insert · view) — kept from the instrument draft, without the gray.
Citron marks = action: text highlights and comment anchors in mark; active comment card ink-bordered.
Header readout in mono: regions 128 · synced 2s · rev 14; Docsmith is an outline chip with a signal dot.

html-docs.com/documents/q3-planning

← Q3 planning doc regions 128 · synced 2s · rev 14 RM Comments · 3 Docsmith Share ⋯

Normal ▾ Sans ▾ − 15 +

text

B IU A

style

LinkListImgTable

insert

100% ▾⛶

view

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

api→queue→workers→s3

page 1 of 4 · 2,140 words

Comments 3 open✕

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 — white sheet on the muted canvas; grouped toolbar with quiet captions; citron marks where people and agents acted.

Docsmith chat

this draft

Same shell as the library — AppNav + 240px sidebar, wash active state.
Ink bubbles, paper replies; Docsmith's avatar is the ink chip with citron "D" — the logo's sibling.
Readout status (done · 4.2s) instead of "thinking…"; created doc = paper artifact card with a live-green state.

html-docs.com/chat

HTML Docs CreateConvertSlidesArtifactsDevelopers LibraryR

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 · 4.2s

Structured it as problem → proposal → phased timeline, and pulled the p95 numbers from your notes into a metrics row.

Q3 platform proposal

created · rev 1 · 6 regions

Open

Describe the document you want to create… Send

Draft a proposal Summarize a doc Make a landing page

Docsmith — unified shell, ink/citron agent identity, readout status, document handed back as a paper artifact.

Convert (& the tool-page pattern)

this draft

Serif title block with eyebrow — Convert and Slides join the brand's headline system.
Output selector = two-position switch, selected shows the wash (kept from the instrument draft).
Run button carries the signal dot; zones get quiet mono captions.

html-docs.com/convert

HTML Docs CreateConvertSlidesArtifactsDevelopersPricing R

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

input

Or paste your content here…

Document Slides

Optional: "make it a one-pager", "keep my headings"… Convert

outputinstructionsrun

Convert — serif title block, wash-selected output switch, signal-dot run button, quiet zone captions.

Pricing

this draft

Serif headline with the citron mark on "command line" — the one mark on the page.
Popular tier: ink border + wash header chip + signal dot — a single clear signal, no ring stacking.
CLI closing line as the ink block — the product's most honest ad.

html-docs.com/pricing

HTML Docs CreateConvertSlidesArtifactsDevelopersPricing Sign inStart free

Pricing

Publish HTML from your command line.

One command, a live URL in seconds — no hosting, no setup.

Annual · 2 months free Monthly

Free

10 pages · community support

Start free

Starter

$8/mo

100 pages · custom slugs

Choose Starter

Pro popular

$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 — one mark in the headline, ink-bordered popular tier with a single signal, serif prices.

Auth & Settings

this draft

Citron-signal focus ring is the only yellow on the login screen (GOV.UK contract).
Ink buttons everywhere; the stock black shadcn / bespoke terracotta split is resolved by the ink system itself.
Key reveal uses the mark; keys are mono serial plates; revoke stays destructive red.
Serif headings on every page including settings, error, 404.

html-docs.com/auth/login

HTML Docs Sign up

Welcome back

Your documents are where you left them.

G Continue with Google

you@company.com▮

Password

•••••••• Sign in

Don't have an account? Sign up

html-docs.com/settings/api-keys

HTML Docs LibraryR

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

active keys · 2

claude-codehdk_…81a · jun 12revoke

ci-publisherhdk_…c4f · may 30revoke

API keys — ink buttons, mark on the one-time reveal, red reserved for revoke.

citron draft 02 · paper edition — graphite & citron without the gray faceplate · nothing implemented yet; approve or flag changes and it lands in the repo · companions: ui revamp · reference board · instrument draft (superseded)