Easel Design System
Warm editorial / vintage-paper design system for an open-source, prompt-driven AI design-generation tool. Documents the marketing site and the three-pane AI design editor as one shared language: a paper ground, near-black ink type, a single coral accent, and a Playfair Display + Inter Tight + Inter + JetBrains Mono typographic stack.
Colors
A warm, low-glare palette built on vintage paper (#efe7d2) rather than white.
coral (#ed6f5c) is the only true brand accent — primary actions, brand mark, selection,
and links. Ink tones carry all type. Editorial secondaries (green, mustard, olive) appear sparingly.
Brand
Paper Surfaces
Ink (Text)
Editorial Secondaries
Lines & Hairlines
Typography
Four families. Playfair Display is the editorial display serif. Inter Tight
drives the large, tightly-tracked headings (H1 72/72 at -2px). Inter sets body
copy at 16/1.55. JetBrains Mono covers code, IDs, and numeric inspector values.
Spacing & Layout
A 4px-based scale. Marketing wrapper maxes at 1200px; section gaps run 80px default,
128px spacious. The editor uses a fixed three-pane grid: 280px left panel,
fluid canvas, 300px inspector, under a 56px top toolbar.
| Token | Value | Use |
|---|---|---|
wrapper-max | 1200px | Marketing content width |
topbar-height | 56px | Editor top toolbar |
left-panel-width | 280px | Tool / asset panel |
right-panel-width | 300px | Inspector |
layer-row-height | 32px | Layers tree rows |
Radius & Shadows
Pills (999px) for every button. Panels and cards use 12-18px; small fields
6-8px. Avatars/dots use 50%. Shadows are soft and long, with a coral-tinted
lift reserved for primary buttons.
| Shadow | Value |
|---|---|
soft | 0 30px 60px -30px rgba(21,20,15,.18) |
card | 0 12px 36px rgba(26,26,26,.08) |
coral | 0 14px 26px -16px #ed6f5c |
hairline-inset | 0 0 0 1px rgba(21,20,15,.06) inset |
Motion
Restrained and editorial. Scroll reveals fade-and-rise with a .4s default delay. Interactive
states use 150-200ms ease. Panels slide with a soft cubic-bezier(0.22,1,0.36,1).
| Token | Value |
|---|---|
reveal | opacity .6s ease, transform .6s ease (delay .4s) |
transition-default | all 200ms ease |
transition-color | color 150ms ease |
panel-slide | transform 220ms cubic-bezier(0.22,1,0.36,1) |
Buttons
Every button is a pill (999px). Primary is solid coral with white text and a coral-tinted shadow. Dark is ink fill with paper text. Outline is transparent with a 1px ink-16% border.
Category Pills
Filter pills used in galleries and template browsers. Inactive is outline; active inverts to a solid coral fill with white text.
Cards
Bone surface (#f7f1de) over the paper ground, 18px radius, soft card shadow. Hover lifts 2px and deepens to the long soft shadow.
Create
Describe what you want and generate full designs from a single prompt.
Edit
Refine any element on the canvas — colors, layout, copy, and effects.
Brainstorm
Spin up variations side by side and keep the directions worth pursuing.
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 holding file name, autosave, zoom, and the primary CTA.
Prompt-to-Generate Panel
A textarea (paper, 12px radius, coral focus ring), reference-image chips, a 4-up style-preset grid (selected gets a 2px coral outline), and a full-width coral Generate button.
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 button.
On-Canvas Object Toolbar
Appears 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/lock toggles; the selected row gets a coral-tint fill. The inspector exposes numeric fields in JetBrains Mono 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 of the editor: top toolbar, left layers panel, dotted canvas with a selected artboard and object toolbar, and the right inspector.
Tailwind Reference
The paired design-system.json ships a tailwind block with theme extensions and
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.
theme.extend mappings
| Scope | Accent | Ground | Display / UI Font | Default Radius | Lift |
|---|---|---|---|---|---|
| Website | brand.coral #ed6f5c | paper #efe7d2 | Playfair / Inter Tight | pill (999px) | shadow-coral |
| App / Editor | brand.coral #ed6f5c | paper-dark canvas | Inter Tight / JetBrains Mono | lg-2xl (12-18px) | shadow-soft |
Token mappings
| Tailwind class | Resolves to |
|---|---|
bg-paper / bg-paper-bone | #efe7d2 / #f7f1de |
text-ink / text-ink-mute | #15140f / #5a5448 |
bg-brand-coral / hover:bg-brand-coralSoft | #ed6f5c / #f08e7c |
border-line | rgba(21,20,15,.16) |
font-serif / font-sans / font-mono | Playfair Display / Inter Tight / JetBrains Mono |
text-h1 | 72px / 72 lh / -2.016px / 800 |
rounded-pill / shadow-coral | 999px / 0 14px 26px -16px #ed6f5c |
Component recipes
| Scope | Recipe | Class pattern |
|---|---|---|
| Website | buttonPrimary | inline-flex items-center justify-center rounded-pill bg-brand-coral text-white px-5 py-2.5 text-[14px] font-medium shadow-coral hover:bg-brand-coralSoft |
| Website | buttonOutline | inline-flex items-center rounded-pill bg-transparent text-ink border border-line px-4.5 py-2 text-[13px] hover:bg-line-faint |
| Website | card | rounded-2xl bg-paper-bone border border-line-soft p-7 text-ink shadow-card hover:-translate-y-0.5 hover:shadow-soft |
| Website | categoryPill | rounded-pill border border-line text-ink-soft text-[13px] px-4.5 py-2 data-[active=true]:bg-brand-coral data-[active=true]:text-white |
| App | editorShell | grid grid-cols-[280px_1fr_300px] grid-rows-[56px_1fr] h-screen bg-paper-dark |
| App | canvas | relative overflow-hidden bg-paper-dark bg-canvasDots [background-size:20px_20px] |
| App | promptTextarea | w-full rounded-lg bg-paper border border-line px-3.5 py-3 font-body text-[14px] focus:border-brand-coral focus:ring-2 focus:ring-brand-coral/30 |
| App | generateButton | w-full rounded-pill bg-brand-coral text-white py-3 text-[14px] font-medium shadow-coral hover:bg-brand-coralSoft |
| App | 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 |
| App | layerRow | flex items-center h-8 px-3 font-body text-[13px] text-ink-soft rounded-md hover:bg-line-faint data-[selected=true]:bg-brand-coral/10 data-[selected=true]:text-ink |
| App | numberField | rounded-md bg-paper border border-line px-2.5 py-1.5 font-mono text-[12px] text-ink |
Downloadable Assets
Pair this page with the matching JSON token files. Use the toolbar at the top of the page to copy the LLM-ready prompt or download HTML/JSON/zip bundles.
- 📄 design-system.html — combined reference (this page)
- 🎨 design-system.json — combined tokens + Tailwind
- 🌐 design-system-website.html — marketing site only
- 🌐 design-system-website.json — marketing site tokens
- 🎛 design-system-app.html — AI editor only
- 🎛 design-system-app.json — AI editor tokens