Easel Editor
The app half of the Easel design system: a prompt-to-canvas AI design editor. A three-pane shell wraps a dotted paper canvas, and the warm-paper / coral identity carries into every editor surface — top toolbar, tool panels, prompt UI, floating canvas bar, on-canvas object toolbar, layers tree, inspector, and the AI prompt modal.
Editor Colors
Panels read as bone; the canvas is a dotted paper-dark field; coral marks selection, the Generate action, the active tool, and focus rings.
Surfaces
Accent & Text
Selection & State
Typography
Editor chrome uses Inter Tight for controls and panel titles, Inter for layer rows and fields, JetBrains Mono for numeric inspector values, and Playfair Display for the AI prompt modal headline.
Layout
Fixed three-pane grid under a top toolbar.
| Token | Value | Use |
|---|---|---|
topbar-height | 56px | Top toolbar |
left-panel-width | 280px | Tool / asset panel |
right-panel-width | 300px | Inspector |
layer-row-height | 32px | Layers tree rows |
object-toolbar-height | 40px | On-canvas object toolbar |
prompt-bar-max-width | 640px | Floating prompt bar |
Three-Pane Shell & Top Toolbar
Left tool/asset panel (280px, bone), center canvas (dotted paper-dark), right inspector (300px, bone), under a 56px paper-warm top toolbar with file name, autosave, zoom, and the primary CTA.
Prompt-to-Generate Panel
Textarea (paper, coral focus ring), reference-image chips, a 4-up style-preset grid (selected gets a 2px coral outline), full-width coral Generate.
Floating Canvas Prompt Bar
A single prompt input floating over the canvas as a bone pill, with a 1/2/4 variation toggle and an inline coral Generate.
On-Canvas Object Toolbar
Floats above a selected object: opacity, apply-effects, set-as-background, overflow, and a coral delete. Bone surface, 12px radius, card shadow.
Layers Tree & Inspector
Layers are 32px rows with visibility toggles; selected rows get a coral-tint fill. The inspector exposes JetBrains Mono number fields and coral toggles.
AI Prompt Modal
The "Create anything…" entry modal. Playfair Display title, mustard-tinted early-preview banner, paper input, and Create / Edit / Brainstorm feature pills.
Create anything
Start from a prompt and Easel builds an editable design on the canvas.
Full Editor Mock
A condensed reproduction: top toolbar, left layers panel, dotted canvas with a selected artboard and object toolbar, right inspector.
Tailwind Reference
The paired design-system-app.json ships a tailwind block with theme extensions and
editor component recipes. Drop it into tailwind.config.ts → theme.extend (or mirror into
@theme for v4) and treat the recipes as required source instead of default Tailwind tokens.
Token mappings
| Tailwind class | Resolves to |
|---|---|
bg-paper-dark (canvas) | #ddd2b6 |
bg-paper-bone (panels) | #f7f1de |
bg-paper-warm (toolbar) | #ece4cf |
bg-brand-coral / ring-brand-coral/30 | #ed6f5c / focus ring |
data-[selected=true]:bg-brand-coral/10 | selected layer fill |
font-mono (number fields) | JetBrains Mono |
h-topbar / h-8 | 56px / 32px layer row |
Component recipes
| Recipe | Class pattern |
|---|---|
editorShell | grid grid-cols-[280px_1fr_300px] grid-rows-[56px_1fr] h-screen bg-paper-dark |
topToolbar | col-span-3 flex items-center gap-4 h-topbar bg-paper-warm border-b border-line px-4 |
canvas | relative overflow-hidden bg-paper-dark bg-canvasDots [background-size:20px_20px] |
promptTextarea | w-full rounded-lg bg-paper border border-line px-3.5 py-3 font-body text-field focus:border-brand-coral focus:ring-2 focus:ring-brand-coral/30 |
stylePreset | aspect-square rounded-lg border border-line bg-paper data-[selected=true]:border-2 data-[selected=true]:border-brand-coral |
generateButton | w-full rounded-pill bg-brand-coral text-white py-3 text-field font-medium shadow-coral hover:bg-brand-coralSoft |
floatingPromptBar | flex items-center gap-2 max-w-[640px] rounded-pill bg-paper-bone border border-line pl-4.5 pr-2 py-2 shadow-soft |
objectToolbar | inline-flex items-center gap-1 rounded-lg bg-paper-bone border border-line p-1 shadow-card |
layerRow | flex items-center h-layer-row px-3 font-body text-control text-ink-soft rounded-md hover:bg-line-faint data-[selected=true]:bg-brand-coral/10 data-[selected=true]:text-ink |
numberField | rounded-md bg-paper border border-line px-2.5 py-1.5 font-mono text-monoValue text-ink |
aiPromptModal | rounded-2xl bg-paper-bone p-8 shadow-modal · title font-serif text-modalTitle text-ink |
Downloadable Assets
Pair this page with the matching JSON token files. Use the toolbar at the top to copy the LLM-ready prompt or download HTML/JSON/zip bundles.
- 🎛 design-system-app.html — AI editor (this page)
- 🎛 design-system-app.json — AI editor tokens
- 📄 design-system.html — combined reference
- 🎨 design-system.json — combined tokens + Tailwind
- 🌐 design-system-website.html — marketing site only
- 🌐 design-system-website.json — marketing site tokens