Easel Website
The marketing-site half of the Easel design system. A warm editorial / vintage-paper aesthetic: a paper ground, near-black ink type, a single coral accent, and a Playfair Display + Inter Tight + Inter + JetBrains Mono stack. Documents colors, type, spacing, and the core marketing components with states.
Colors
Built on vintage paper (#efe7d2), not white. coral (#ed6f5c)
is the only brand accent. Ink tones carry type; editorial secondaries appear sparingly.
Brand
Paper Surfaces
Ink (Text)
Editorial Secondaries
Typography
Playfair Display display serif, Inter Tight headings (H1 72/72 at
-2px), Inter body (16/1.55), JetBrains Mono for code.
Spacing & Layout
4px-based scale. Wrapper maxes at 1200px; section gaps 80px default, 128px spacious.
Radius & Shadows
Pills (999px) for every button; cards 14-18px; small fields 6-8px. Coral-tinted lift on 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 |
Motion
Restrained. Scroll reveals fade-and-rise with a .4s delay; interactive states use 150-200ms ease.
| Token | Value |
|---|---|
reveal | opacity .6s ease, transform .6s ease (delay .4s) |
transition-default | all 200ms ease |
transition-color | color 150ms ease |
Category Pills
Filter pills for galleries. Active inverts to solid coral with white text.
Cards
Bone surface over paper, 18px radius, soft card shadow. Hover lifts 2px to the long soft shadow.
Create
Generate full designs from a single prompt.
Edit
Refine any element on the canvas.
Brainstorm
Spin up variations side by side.
Tailwind Reference
The paired design-system-website.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.
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 / Inter Tight / JetBrains Mono |
text-h1 | 72px / 72 lh / -2.016px / 800 |
rounded-pill / shadow-coral | 999px / 0 14px 26px -16px #ed6f5c |
Component recipes
| Recipe | Class pattern |
|---|---|
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 active:translate-y-px |
buttonDark | inline-flex items-center rounded-pill bg-ink text-paper px-5 py-2.5 text-[14px] font-medium hover:bg-ink-soft |
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 |
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 |
card | rounded-2xl bg-paper-bone border border-line-soft p-7 text-ink shadow-card hover:-translate-y-0.5 hover:shadow-soft |
navLink | font-sans text-[18px] font-bold text-ink hover:text-brand-coral |
heroHeading | font-sans text-h1 font-extrabold tracking-[-2px] 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-website.html — marketing site (this page)
- 🌐 design-system-website.json — marketing site tokens
- 📄 design-system.html — combined reference
- 🎨 design-system.json — combined tokens + Tailwind
- 🎛 design-system-app.html — AI editor only
- 🎛 design-system-app.json — AI editor tokens