The mark
An E built from machined bars on a book cloth tile. The middle arm is sky because it is the piece you swap out. Use the full mark above 32px and the small mark at 32px and under.
Clear space
Keep a quarter of the tile's width clear on every side of the mark or the lockup.
Don'ts
- Never recolor the bars.
- Never color any bar but the middle one sky.
- Never set the wordmark in another face or width.
- Never place the mark on anything but oil, book cloth, machinist gray, paper, or white.
- Never add a shadow, outline, or gradient.
Color
Every value on this page is read from the live stylesheet, so the guide cannot drift from the theme.
Palette
- oil
- cloth
- cloth-hover
- machinist
- paper
- white
- steel
- edge
- fog
- slate
- sky
- sky-hover
- sky-press
- sky-deep
- error-tint
- error-deep
- success-tint
- success-deep
- warning-tint
- warning-deep
Semantic tokens
Components use these. They take their dark values by default and switch inside plates, panels, and on-light.
On dark
- fg
- fg-muted
- accent
- focus
- primary
- primary-ink
- primary-hover
- primary-press
- error
- success
- warning
Inside a panel
- fg
- fg-muted
- accent
- focus
- primary
- primary-ink
- primary-hover
- primary-press
- error
- success
- warning
Contrast
Text pairs need 4.5:1. Borders and focus rings need 3:1.
| Sample | Foreground | Background | Ratio | Needs | Result |
|---|---|---|---|---|---|
| Aa | machinist | oil | 4.5:1 | ||
| Aa | machinist | cloth | 4.5:1 | ||
| Aa | fog | oil | 4.5:1 | ||
| Aa | fog | cloth | 4.5:1 | ||
| Aa | sky | oil | 4.5:1 | ||
| Aa | sky | cloth | 4.5:1 | ||
| Aa | oil | sky | 4.5:1 | ||
| Aa | oil | sky-hover | 4.5:1 | ||
| Aa | oil | sky-press | 4.5:1 | ||
| Aa | error-tint | oil | 4.5:1 | ||
| Aa | error-tint | cloth | 4.5:1 | ||
| Aa | success-tint | oil | 4.5:1 | ||
| Aa | success-tint | cloth | 4.5:1 | ||
| Aa | oil | success-tint | 4.5:1 | ||
| Aa | warning-tint | oil | 4.5:1 | ||
| Aa | warning-tint | cloth | 4.5:1 | ||
| Aa | oil | machinist | 4.5:1 | ||
| Aa | oil | paper | 4.5:1 | ||
| Aa | slate | machinist | 4.5:1 | ||
| Aa | slate | paper | 4.5:1 | ||
| Aa | sky-deep | machinist | 4.5:1 | ||
| Aa | sky-deep | paper | 4.5:1 | ||
| Aa | sky-deep | white | 4.5:1 | ||
| Aa | paper | cloth | 4.5:1 | ||
| Aa | paper | cloth-hover | 4.5:1 | ||
| Aa | paper | oil | 4.5:1 | ||
| Aa | white | sky-deep | 4.5:1 | ||
| Aa | white | success-deep | 4.5:1 | ||
| Aa | error-deep | machinist | 4.5:1 | ||
| Aa | error-deep | paper | 4.5:1 | ||
| Aa | error-deep | white | 4.5:1 | ||
| Aa | success-deep | machinist | 4.5:1 | ||
| Aa | success-deep | paper | 4.5:1 | ||
| Aa | success-deep | white | 4.5:1 | ||
| Aa | warning-deep | machinist | 4.5:1 | ||
| Aa | warning-deep | paper | 4.5:1 | ||
| Aa | warning-deep | white | 4.5:1 | ||
| Aa | steel | oil | 3:1 | ||
| Aa | edge | machinist | 3:1 | ||
| Aa | edge | paper | 3:1 | ||
| Aa | edge | white | 3:1 |
Type
Archivo labels: display at 72% width and weight 600, UI at 88%. Newsreader is for everything that is read. Monospace appears only in the copy field.
Hero, 64px
Edit your site by asking
Heading 1, 48px
Nothing goes live until you say so
Heading 2, 36px
Previewing and publishing
Heading 3, 24px
Sign in to edit your site
Reading, 17.5px
Tell Claude what to change, check the preview, and publish when it looks right. Every publish can be undone.
UI, 16px
Add photos
Small UI, 14px
Up to 10 photos, at most 5 MB each
Components
Each component on the dark canvas and inside a plate. Press Tab to see focus rings.
Notices
notice with notice-success, notice-changed, notice-warning, notice-error. On a live page, errors add role="alert".
Published
Your changes are live.
Preview ready
Open the preview to check the new hours before you publish.
Unpublished changes
Two edits are waiting in the preview. Publish them or throw them away.
Not published
The preview didn't build. Ask Claude what went wrong.
Tags
tag with tag-live, tag-preview, tag-muted.
Example request
say
“Change our Saturday hours to 9 to 2.”
Steps
steps, only for a real sequence.
- Tell Claude what to change.
- Check the preview.
- Say publish when it looks right.
Side navigation
side-nav, side-nav-item, aria-current="page" on the current item. Dark canvas only.
Fields
field, field-label, field-input, field-hint, field-error, and field-file with file:btn file:btn-secondary. Fields sit only in plates and panels.
The address we sent your sign-in details to.
Enter your site's name.
Notices
notice with notice-success, notice-changed, notice-warning, notice-error. On a live page, errors add role="alert".
Published
Your changes are live.
Preview ready
Open the preview to check the new hours before you publish.
Unpublished changes
Two edits are waiting in the preview. Publish them or throw them away.
Not published
The preview didn't build. Ask Claude what went wrong.
Tags
tag with tag-live, tag-preview, tag-muted.
Copy field
copy-field. Pages with JavaScript add the Copy button; without it the text stays selectable.
https://edit.elementry.dev/mcphttps://edit.elementry.dev/mcpExample request
say
“Change our Saturday hours to 9 to 2.”
Steps
steps, only for a real sequence.
- Tell Claude what to change.
- Check the preview.
- Say publish when it looks right.
Layout
Band
Book cloth carries bands and headers.
Plate
Machinist gray, only for forms.
Panel
Paper, for reading.
Blocks that belong together sit edge to edge with a 3px oil joint and no shadows. Sky marks the piece that changed.
Voice
Say what happens.
Do: Nothing goes live until you say so.
Don't: Seamless publishing.
Name things as a client would: your site, preview, publish, undo.
Do: Your preview is ready.
Don't: The edits branch deployed.
Sentence case, no exclamation marks, no all-caps labels.
Do: Photos added
Don't: PHOTOS ADDED!
Errors say what happened and what to do next, without apologizing.
Do: That email and password don't match. Check both and try again.
Don't: Oops! Something went wrong.
Example requests are things people would actually say.
Do: “Change our Saturday hours to 9 to 2.”
Don't: Update the hours content block.
An action keeps its name through a flow.
Do: Publish, then Published.
Don't: Publish, then Deployed.
We in the product, UI, notices, and help. I, with Todd's name, on About, Contact, and personal emails.
Do: We keep every published version, so any publish can be undone.
Don't: I keep every published version (in product copy).