00 · the direction
The TE inflection changes three things versus the earlier graphite draft — everything else from the audit (one nav, one button system, kill list, semantic-color discipline) carries over unchanged.
| shift | what it means concretely |
|---|---|
| Chrome becomes a faceplate | App surfaces move from white-on-cream to a warm instrument gray (#E9E9E4). Inputs and wells are recessed (inset shadow); panels sit flush. The document alone stays paper-white — it reads as the media in the device. |
| Mono becomes the chrome voice | All UI labels, nav links, buttons, and metadata are lowercase monospace (JetBrains Mono in the real app). Serif survives only inside documents and doc titles — content vs chrome is now a typographic distinction, not just a color one. |
| Citron becomes a signal | Three steps: wash #F2EDC0 for active/selected states, mark #F0DC55 for text highlights and comment anchors, signal #FFD84D for focus rings and attention dots (the "record LED"). Never on backgrounds, icons, or decoration. |
tokens
faceplate
#E9E9E4
app chrome background
well
#DDDDD6
recessed inputs, toolbars
paper
#FAFAF7
documents, cards, marketing
ink
#1A1A18
text, primary buttons
ink faint
#86857C
labels, metadata
citron wash
#F2EDC0
active nav, selected rows
citron mark
#F0DC55
highlights, comment anchors
citron signal
#FFD84D
focus rings, attention dots
ok
#4C8A55
live/published only
destructive
#C24B2E
delete/revoke only
component idiom
buttonsInk pill, lowercase mono label. Primary actions may carry a signal dot (publish). Secondary = paper outline; ghost = bare text.
inputs & wellsRecessed:
inset shadow, faceplate-deep fill on chrome surfaces, paper fill on reading surfaces. Focus = 3px citron-signal ring, always.micro-labelsEvery functional group gets an engraved lowercase caption underneath or beside it, mono 9.5px: regions 128 · synced 2s ago. This replaces icons-with-tooltips.
statusA dot + mono word: live · draft · error. No pills, no fills, no uppercase shouting.
document = mediaInside the editor and viewer, the doc is a white paper sheet on the gray deck. Serif belongs to the document; the moment you see serif, you're looking at content.
the yellow budgetPer screen: focus rings + at most one wash (active state) + marks where humans/agents acted. If citron shows up anywhere else, it's a bug.
what carries over from the audit unchanged
- One AppNav (marketing / app / minimal variants), footer on every page.
- Kill list: pastel gradients, traffic-light dots, emoji-as-icons, Sparkles×6, Artifacts' private palette, Comic Sans,
/learnduplicate. - One card recipe, one sidebar spec (240px), tokens only — no raw hex in components.
- Semantic colors reserved: green means live, red means destructive, citron means attention/action — never decoration.
01 · landing
The hero becomes a spec sheet: lowercase mono headline with one marked phrase, the CLI as the centerpiece (it's the most TE thing the product already has), and the preview card drawn as a device holding a paper document.
vs. graphite draft
- Headline set in mono, lowercase, with the citron mark carrying emphasis instead of a serif display face.
- CLI block promoted above the convert input — the command is the brand gesture.
- Step cards become numbered faceplate modules with engraved captions.
hhtml·docs
createconvertslidesartifactsdeveloperspricing
sign instart free
for documents and ai-generated html · v1
the shared canvas for
you and your agents.
you and your agents.
paste a link or publish from the command line — docs, slides, and raw html become live, editable pages.
$ npx @html-docs/cli publish page.html
copy
one command → a live url · no hosting · no setup
or paste a google doc, slides deck, or web page link
convert
html-docs.com/site/q3-plan
live
q3 planning
Ship the async pipeline
184ms
p95
41.2M
requests
rendered from raw html · updated by agent 2m ago
01
bring anything
docs, slides, links, raw html, agent output.
02
edit together
region editing, comments, live cursors.
03
publish instantly
a live url your team — or your agent — updates.
02 · dashboard
The library becomes a control deck: faceplate background, recessed search well, paper rows for documents. Create actions are knob-style modules with engraved captions. Published sites keep the paper-thumbnail fix from the audit.
vs. graphite draft
- Sidebar active state = citron wash (the one wash on this screen).
- Create tiles become faceplate modules — circular knob icon, mono caption, no card-hover theatrics.
- Every list row gets a mono meta column (edited · rev · state) like a device inventory.
hhtml·docs
createconvertslidesartifactsdevelopers
libraryr
library
all pages 24
published 6
shared with me 3
create
new page
docsmith chat
new
generate
import
artifact
recent · sorted by last edit
published sites · 3 of 6
03 · editor
Where the metaphor pays off completely: gray deck, white paper document, and a formatting toolbar that is literally a faceplate — grouped controls with engraved captions underneath, exactly like a synth panel. Citron marks show where people and agents acted.
vs. graphite draft
- Toolbar groups get engraved captions (text · style · insert · view) — replacing tooltip-only icon rows.
- Doc status is an instrument readout: regions 128 · synced 2s · rev 14 in the header.
- Comment anchors and selections use citron mark — same semantic as reader apps: "someone acted here."
- Docsmith is a labeled module, not a sparkle: ink chip with a signal dot when it has something to say.
←
Q3 planning doc
· regions 128 · synced 2s · rev 14
rm
comments · 3
docsmith
share
⋯
normal ▾
sans ▾
− 15 +
text
b
iu
a
style
linklistimgtbl
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 · a4
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.
04 · docsmith
The agent as an instrument channel, not a chat product: same shell as the library, mono voice, and its output card is a physical artifact — a paper document it hands back to you.
vs. graphite draft
- Docsmith speaks in lowercase mono — the machine voice; your document previews stay serif.
- Status line is a readout: docsmith · generating · 4.2s instead of "Docsmith is thinking…".
- Quick actions are engraved presets, not rounded pills.
hhtml·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. pulled the p95 numbers from your notes into a metrics row.
A
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
05 · convert
The most naturally TE page — it is an input/output device. Drop zone as a recessed tray, output selector as a physical two-position switch, and the convert button carrying the signal dot.
vs. graphite draft
- Output choice = switch, not cards: two positions (document / slides), selected shows the wash.
- Drop zone is a recessed tray in the faceplate, not a dashed marketing box.
- Engraved captions under each zone: input · options · output.
hhtml·docs
createconvertslidesartifactsdeveloperspricing
r
tools · converter
convert anything into a page
paste content or drop a file — plaintext, html, markdown, a google doc link.
drop a file here, or browse
.html · .md · .docx · .pdf
input
or paste your content here…
optional: "make it a one-pager", "keep my headings"…
convert
outputinstructionsrun
06 · pricing
A spec-sheet table of four models, like a product line of devices. The popular tier is marked with the citron wash and a signal dot — no ring-plus-border-plus-badge stacking.
vs. graphite draft
- Tiers read as device models: mono names, engraved spec lines, one price readout.
- The CLI line stays the closing gesture — it's the product's most honest ad.
hhtml·docs
createconvertslidesartifactsdeveloperspricing
sign instart free
pricing · v1
publish html from your command line.
one command, a live url in seconds — no hosting, no setup.
free
$0
10 pages · community support
start freestarter
$8/mo
100 pages · custom slugs
choose starterpro
$20/mo
unlimited pages · ai credits · teams
choose probusiness
$60/mo
sso · audit log · priority support
talk to usyour next page is one command away →
$ npx @html-docs/cli publish page.html
07 · auth & settings
One minimal header, recessed inputs with the citron focus contract, ink buttons everywhere. API keys read as a device's serial-number panel — which is what they are.
vs. graphite draft
- Focused input shows the GOV.UK-style signal ring — the one place citron appears on the login screen.
- Keys are serial plates: mono, recessed, revoke in destructive red only.
hhtml·docs
sign up
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
hhtml·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