Paper
Editorial light theme with a serif display voice.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Inter carries running text — readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Let the serif display lead; give headings room.
- •Keep surfaces warm and paper-like.
- •Use rules and spacing for structure, not heavy cards.
Don't
- •Don't pair the serif with loud colors.
- •Don't use large radii — keep it tight and printed.
- •Don't crowd long-form text.
- •Move gently — editorial pages should feel calm.
- •Favor soft fades over motion.
Hover to feel this theme's base transition.
Lucide · 1.75px stroke · 1rem. Lighter 1.75px stroke to match the serif.
- Keep body text at a comfortable measure and size.
- Pair color with text or icon.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.25rem |
| Padding | 0.5rem 1rem |
| Height | 2.5rem |
| Weight | 600 |
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.188rem |
| Padding | 0.15rem 0.55rem |
| Font size | 0.75rem |
| Weight | 700 |
Use for status, counts, and short labels. Keep to one or two words.
Alert
| Radius | 0.375rem |
| Padding | 1rem 1.25rem |
| Border | 1px solid var(--border) |
Always pair the color with an icon and a text label — never rely on color alone.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.25rem |
| Height | 2.5rem |
| Padding | 0.5rem 0.75rem |
Label sits above the field; helper or error text sits below.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 0.375rem |
| Padding | 1.5rem |
| Shadow | 0 4px 16px -4px rgba(28,26,23,0.10) |
The design brief
Paper is an editorial light theme with a serif display voice — for writing, docs, and content that wants to be read.
Principles
- Type leads. A Playfair display pairs with a clean sans body; let headings breathe.
- Warm, not stark. Cream surfaces and amber accents feel like print, not a spec sheet.
- Tight radius, light shadow. Structure comes from rules and spacing, not heavy cards.
When to use
Blogs, documentation, marketing content, portfolios, and long-form reading.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.25rem;
--background: #fbfaf7;
--foreground: #1c1a17;
--card: #ffffff;
--card-foreground: #1c1a17;
--popover: #ffffff;
--popover-foreground: #1c1a17;
--primary: #b45309;
--primary-foreground: #fffaf0;
--secondary: #f3f1ec;
--secondary-foreground: #44403c;
--muted: #f3f1ec;
--muted-foreground: #78716c;
--accent: #fef3c7;
--accent-foreground: #92400e;
--destructive: #dc2626;
--border: #e7e2d8;
--input: #e7e2d8;
--ring: #d97706;
--shadow-sm: 0 1px 2px rgba(28,26,23,0.06);
--shadow-md: 0 4px 16px -4px rgba(28,26,23,0.10);
--shadow-lg: 0 12px 28px -6px rgba(28,26,23,0.14);
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Playfair Display', ui-serif, Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
--ease-standard: cubic-bezier(0.4,0,0.2,1);
--ease-emphasized: cubic-bezier(0.2,0.8,0.2,1);
--duration-base: 280ms;
}
.dark {
--background: #1c1a17;
--foreground: #f5f3ee;
--card: #26231e;
--card-foreground: #f5f3ee;
--popover: #26231e;
--popover-foreground: #f5f3ee;
--primary: #f59e0b;
--primary-foreground: #1c1a17;
--secondary: #2d2a24;
--secondary-foreground: #e7e5e4;
--muted: #2d2a24;
--muted-foreground: #a8a29e;
--accent: #3a2f1a;
--accent-foreground: #fcd34d;
--destructive: #f87171;
--border: #3a352d;
--input: #3a352d;
--ring: #f59e0b;
}