Fable Forest
#064c37Full-bleed dark section background, first-screen hero band — deep botanical green that makes the warm cream and orange illustration pop
Fable
fable.coWebsite preview
The design language
Fable reads like an editorial book club brought to life: generous cream surfaces, large warm serif headlines, and alternating full-bleed colored bands (forest green and sky blue) that frame colorful flat-illustration scenes. Typography is the loudest voice — Heldane Display at near-black weight with tight 0.86–0.94 line-heights produces a literary, slightly compressed headline look, while Inter handles every utility and body line at modest sizes with strong negative tracking. Buttons are stadium-pill shapes (60px radius) in two tones — dark on cream, white on color — and book covers themselves become the primary decorative motif, treated as editorial artwork rather than thumbnails. The overall rhythm is section-band driven: each full-bleed color block introduces a single concept with a headline, supporting copy, a single pill CTA, and an illustration or product preview on the right.
Color palette
brand
Storybook Sky
#43a1d7Full-bleed mid section background — cerulean blue band that carries product-feature storytelling between cream and green sections
neutral
Paper Cream
#f7f4eeHairline borders, dividers, input outlines, and card edges on light surfaces.
Ink
#161015Primary heading and display text — near-black with a violet undertone that warms the editorial serif without losing contrast
Charcoal Plum
#292229Filled pill button background, dark card surfaces, secondary heading color
Graphite
#3f383dBody text, paragraph copy, secondary UI text — warm dark gray that reads softer than pure black on cream
Char
#070607Footer background, darkest surface — reserved for terminal bands and footer chrome
Pure White
#ffffffPage background, reverse-mode button fill (on dark sections), text on dark surfaces
Fog
#edededSubtle image placeholders, soft dividers, muted card backgrounds when a lighter neutral than cream is needed
Typography
Type scale
Minor Third (1.2) · 15px basetext-80
80px · 500 · 0.94The quick brown fox jumps
display
72px · 500 · 0.88 · 0px trackingThe quick brown fox jumps
heading-lg
48px · 500 · 0.94 · 0px trackingThe quick brown fox jumps
heading
30px · 600 · 1.25 · -0.66px trackingThe quick brown fox jumps
text-26
26px · 500 · 1.08The quick brown fox jumps
heading-sm
24px · 600 · 1.42 · -0.48px trackingThe quick brown fox jumps
text-22
22px · 400 · 1.09The quick brown fox jumps
subheading
20px · 400 · 1.33 · -0.4px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Inter
- Weights
- 400, 500, 600, 700
- Sizes
- 8px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 30px
- Line height
- 1.00–1.60 (1.50 typical body, 1.25 for tight UI rows, 1.00 for inline tags)
- Letter spacing
- -0.42px at 10px (-0.042em), -0.30px at 15px (-0.020em), -0.27px at 18px (-0.015em), -0.24px at 20px (-0.012em), -0.21px at 24px (-0.012em equivalent), tightening as size increases
- Fallback
- Inter (already Google Fonts), or DM Sans
- Features
- "ss01" on, "cv11" on
All UI, body, button, link, and supporting text. Negative letter-spacing across the scale tightens Inter into an editorial companion to Heldane — at 16px body the tracking reads noticeably tighter than default. Weights 400 for body, 500 for labels/buttons, 600–700 reserved for emphasis.
Additional typeface
Heldane Display
- Weights
- 400, 500
- Sizes
- 22px, 26px, 48px, 72px, 80px
- Line height
- 0.86–1.09 (extremely tight on display: 0.86 at 80px, 0.88 at 72px, 0.94 at 48px, 1.08–1.09 at 22–26px)
- Fallback
- Fraunces, Lora, or Playfair Display
Editorial display headlines at 48–80px. Near-regular weight (400) with tight tracking and compressed line-heights creates a literary, magazine-cover feel — the headline is the hero, not a shout. The 22–26px usage at weight 500 handles mid-size editorial subtitles.
Additional typeface
Aktiv Grotesk
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.5
Aktiv Grotesk — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 24px
Border radius
cards
12pxbuttons
60pxlargeCards
48pxsmallChips
8pxSpacing scale
4px8px12px14px16px17px20px24px28px32px33px34px38px40px50px52px53px80px100px123pxGuidelines
Do
- Use Heldane Display at weight 400 (never 500+) for all headlines 48px and above — the near-regular weight is the editorial signature
- Use the stadium-pill 60px radius for every button — filled dark on cream, filled white on colored bands, never square or small-radius
- Alternate full-bleed section bands: Fable Forest → cream → Storybook Sky → cream, using color as the primary section divider instead of hairlines or spacing
- Set Inter body text with negative letter-spacing matching the scale (-0.32px at 16px, -0.66px at 30px) — default Inter tracking breaks the editorial feel
- Use Paper Cream (#f7f4ee) as the default card and page surface over pure white — the warm off-white is the brand's "page"
- Let book covers speak for themselves: no card frames, no overlays, no badges — just the cover on a clean surface with 8–12px gaps
- Tighten display headline line-height to 0.86–0.94 at sizes 48–80px so lines lock together visually like editorial print
Don’t
- Don't use square or 4–8px radius buttons — the 60px pill is non-negotiable and defines the brand voice
- Don't place headlines on pure white over 24px — pair every display headline with either a cream, forest, or sky background
- Don't use chromatic color for CTAs — buttons are always dark or white; #43a1d7 and #064c37 are backgrounds only, never fills
- Don't introduce gradients, glows, or colored shadows — the only shadow allowed is the simple 0 4px 20px black drop
- Don't use Heldane Display for body, captions, or UI labels — it is headline-only at 22px+; everything else is Inter
- Don't add card borders or hairline dividers inside Section Bands — let the color contrast do the structural work
- Don't use 100% black for body or heading text — Ink (#161015) and Charcoal Plum (#292229) keep the warm editorial tone
Components
Filled Pill Button — Dark
Primary CTA on cream and white sectionsStadium-pill (60px radius), background #292229, white Inter text at 16px weight 500, padding 16px 28px, no border. Subtle shadow rgba(0,0,0,0.4) 0 4px 20px. Letter-spacing follows body tracking (~-0.32px).
Filled Pill Button — White
Primary CTA on colored bands (forest green, sky blue)Stadium-pill (60px radius), background #ffffff, Ink (#161015) text at 16px weight 500, padding 16px 28px, no border. Same 60px radius and shadow as dark variant — only fill and text color invert.
Ghost Text Link
Secondary inline actions in nav and body copyNo background, 1px underline, Inter 16px weight 500, color #161015, no padding. Used for nav items and inline editorial links.
Display Headline Section
Hero and feature section headline blockTwo-column layout: left column holds Heldane Display headline at 48–80px weight 400, line-height 0.86–0.94, color #161015 (on light) or #ffffff (on dark bands), max-width ~520px. Right column holds a 1:1 illustration or product mockup with generous negative space. 80px vertical padding top/bottom.
Book Cover Tile
Primary content unit — book cover grid itemsNo card chrome — book covers sit directly on the section background (cream or dark green). Slight 2–4px bottom shadow rgba(0,0,0,0.2) to lift covers off the page. 8–12px gap between covers. Arranged in a horizontally-scrolling row or 6-column grid.
Cream Card
General content card on white or colored backgroundsBackground #f7f4ee, radius 12px, padding 24px, no border. Optional lift shadow rgba(0,0,0,0.6) 0 4px 20px for elevated cards. Internal spacing: 16px between heading and body, 24px between card sections.
Elevated Feature Card
Phone mockup container and large feature blocksBackground #ffffff, radius 48px (large rounded card), padding 32–40px, shadow rgba(0,0,0,0.6) 0 4px 20px. Used to frame device mockups and product previews on colored section bands.
Navigation Bar
Top-of-page site navigationTransparent or solid section-color background, no border, horizontal layout with logo left, center links, account/cart icons right. Nav links in Inter 14–16px weight 500. Logo is a small mark with the wordmark — minimal, no background fill.
Section Band
Full-bleed colored content sectionEdge-to-edge background color (forest green, sky blue, or cream), internal max-width 1200px centered, vertical padding 80–120px. Contains a Display Headline Section or book grid. No visible borders between bands — the color change is the divider.
Book Cover Grid Row
Horizontal strip of book coversSingle row of 6–8 book covers, 12px gaps, no card frames, slight scale-on-hover. Sits inside a cream or dark-green Section Band. Overhangs the max-width slightly to imply the row scrolls or continues.
Illustration Scene
Brand artwork in hero and feature sectionsFlat, dimensional illustration of a person with bold solid color blocks (orange, teal, pink, white). Placed in the right column of a Display Headline Section, roughly 1:1 aspect ratio, with floating geometric accents (stars, circles) in brand colors. No stroke outlines — color blocks define the form.
Phone Mockup Frame
Product screenshot container on feature bandsWhite phone bezel with rounded corners (radius 36px), screen content visible at 9:16 aspect, floats inside an Elevated Feature Card. Subtle drop shadow lifts it above the blue section background.
Surfaces & elevation
Level 0
Page Canvas
#ffffffBase page background between colored section bands
Level 1
Paper Cream
#f7f4eeWarm card surface, light section bands, signature brand surface
Level 2
Soft Fog
#edededImage placeholders, muted inset surfaces
Level 3
Storybook Sky
#43a1d7Full-bleed mid-page blue band for feature storytelling
Level 4
Fable Forest
#064c37Full-bleed dark hero band — primary brand color moment
Level 5
Char Footer
#070607Darkest terminal surface for footer chrome
Elevation is reserved and simple: a single 4px-y 20px-blur black drop at 40–60% opacity. No layered shadows, no colored glows, no blur tricks. The system uses full-bleed color bands and surface tone (cream vs white vs green vs blue) to create depth before any shadow appears.
Filled Pill Button
0 4px 20px 0 rgba(0, 0, 0, 0.4)
Cream Card / Elevated Feature Card
0 4px 20px 0 rgba(0, 0, 0, 0.6)
Book Cover Tile
0 2px 8px 0 rgba(0, 0, 0, 0.2)
Layout & imagery
Layout
Max-width 1200px centered, but section bands break to full-bleed edge-to-edge. Hero and feature sections are always two-column: left text block (max-width ~520px) with headline + sub + single pill CTA, right illustration or phone mockup. After every Display Headline Section, a full-width Book Cover Grid Row runs edge-to-edge with slight overhang, implying a horizontal scroll. Section rhythm alternates: dark green band → cream band → blue band → cream band → dark footer. Navigation is a minimal transparent top bar with logo left, two center links, and two right-side icons (account, cart). No sidebar, no mega-menu, no sticky header behavior — the sections themselves carry the eye through the page.
Imagery
Illustration is the hero imagery style: flat, dimensional, color-block figures of people reading or interacting with books, painted in bold solids — burnt orange clothing, teal trousers, warm skin tones, pink and white accents. Scenes include floating geometric confetti (stars, circles, plus signs) in brand yellow/blue. The illustrations are roughly 1:1, sit in the right column of two-column sections, and are unsigned editorial-feeling. Photography is almost entirely book cover artwork, treated as editorial content — no lifestyle photography, no people photography outside the illustrations. The visual density is illustration-and-type-forward with very little photographic surface.
Design notes
Agent Guide
**Quick Color Reference** - text (primary): #161015 - text (body): #3f383d - background (page): #ffffff - background (card/surface): #f7f4ee - border: none (use color bands instead) - accent (decorative): #43a1d7 - primary action: #292229 (filled action) **Example Component Prompts** 1. *Create a hero section on Fable Forest (#064c37) full-bleed background, 80px vertical padding, max-width 1200px centered. Left column: headline in Heldane Display 72px weight 400, color #ffffff, line-height 0.88. Subtext in Inter 18px weight 400, color #ffffff, line-height 1.5, max-width 460px. Filled Pill Button — White: #ffffff background, Ink (#161015) text, 60px radius, padding 16px 28px, Inter 16px weight 500. Right column: 1:1 illustration of a reader with a bird, floating orange and yellow geometric accents.* 2. *Create a Cream Card on a white page: background #f7f4ee, radius 12px, padding 24px, shadow 0 4px 20px rgba(0,0,0,0.6). Heading in Inter 24px weight 600, color #161015, letter-spacing -0.48px. Body in Inter 16px weight 400, color #3f383d, letter-spacing -0.32px, line-height 1.5. 16px gap between heading and body.* 3. *Create a Book Cover Grid Row: horizontal row of 6 book covers, 12px gap, no card frames, covers sit directly on a Storybook Sky (#43a1d7) section background. Each cover has a subtle 0 2px 8px rgba(0,0,0,0.2) shadow. Row slightly overhangs the 1200px max-width to imply a scrollable strip.* 4. *Create a Display Headline on a cream section: Heldane Display 80px weight 400, color #161015, line-height 0.86, max-width 560px, letter-spacing 0. Below it a sub in Heldane Display 26px weight 500, line-height 1.08, color #3f383d. No underline, no italic.* 5. *Create a phone mockup in an Elevated Feature Card on a Storybook Sky (#43a1d7) section: card background #ffffff, radius 48px, padding 40px, shadow 0 4px 20px rgba(0,0,0,0.6). Inside, a phone with 36px corner-radius bezel, screen showing a book list UI in Inter. Card sits in the right half of the section, left half holds a Display Headline Section in Ink color.*
Section Band System
Sections are the primary structural device, not cards or dividers. Use this sequence for any new page: 1. **Fable Forest (#064c37)** — opening hero or brand-moment section, white text, white pill CTA, large illustration right 2. **Paper Cream (#f7f4ee)** — explanatory or community section, dark Ink text, dark pill CTA 3. **Storybook Sky (#43a1d7)** — product feature section, dark Ink text, dark pill CTA, phone mockup or illustration right 4. **Paper Cream (#f7f4ee)** — secondary feature or social-proof section 5. **Char (#070607)** — terminal footer band Never put two bands of the same color adjacent. Never introduce a third chromatic background — the two-color (green + blue) rotation is the system.
Similar brands
Bookshop.org
Same editorial serif-headline + cream-surface approach with book covers as primary content units
The New Yorker digital
Same tight-line-height display serif and warm off-white reading surface for literary content
Substack homepage
Same full-bleed color-band section structure with left-text/right-illustration split and pill CTAs
Headspace
Same flat-illustration character art with bold color-block clothing floating against solid color backgrounds
MagicLinks / Literati
Same book-discovery grid pattern with covers as the dominant visual, cream and dark contrast
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
