Fable
A warm, editorial book-community interface built on a deep forest-green hero canvas, high-contrast Heldane Display serif headlines, and Inter for UI text. The system reads as literary-yet-modern — oversized serif display type, an illustrated hero, and a full-bleed carousel of real book covers doing the chromatic work while the chrome stays near-monochrome green-and-white. A dark near-black testimonial band and footer close the page.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
80px · 500 · 0.938
The quick brown fox jumps
display-lg
72px · 500 · 0.861
The quick brown fox jumps
display-sm
26px · 500 · 1.077
The quick brown fox jumps
button
16px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 14px | |
| lg | 24px | |
| xl | 28px | |
| xxl | 40px | |
| xxxl | 50px | |
| section | 80px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 8px | |
| md | 12px | |
| xl | 48px | |
| pill | 60px |
FAQ
- What colors does Fable use?
- Fable's core palette includes #064c37, #000000, #161015, #3f383d, #847f7c. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Fable DESIGN.md.
- What font does Fable use?
- Fable's primary typeface is Heldane Display. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Fable design system?
- A warm, editorial book-community interface built on a deep forest-green hero canvas, high-contrast Heldane Display serif headlines, and Inter for UI text. The system reads as literary-yet-modern — ov…