---
title: "Fable design system"
variant: extended
source: https://fable.co/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/fable-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Fable · Design System

> A vivid, bookish world built for shared stories

**Theme:** light · **Industry:** media · **Source:** https://fable.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Fable pairs literary display typography with bold, full-width colour fields and lively reader-focused illustrations. The page moves from a deep green book-cover gallery into bright blue product showcases, then closes with a restrained black editorial footer.

## North star

Build a literary, community-first experience by pairing expressive serif headlines and vivid section colour with approachable product imagery.

## Overview

Fable’s visual strategy combines the intimacy of a reading journal with the energy of a social app. Deep forest green (#064c37) anchors the opening and frames rows of colourful book covers, while vivid blue (#43a1d7) carries the product-story sections. Warm paper (#f7f4ee) panels hold app screens and feature cards, creating contrast against the saturated canvas without adding visual clutter. Heldane Display gives major headlines a literary, high-contrast character; Inter handles navigation, explanatory copy, buttons, and compact interface text. The layout alternates broad, spacious two-column feature sections with dense image-led book and club galleries. Hand-drawn people, app mockups, and real community imagery keep the page personable and product-specific. Rounded pill CTAs and softly rounded cards support the friendly tone; most surfaces stay flat, with only subtle navigation shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Clean Page | `#ffffff` | `--color-clean-page` | surface | White surface and border colour; used on prominent pill CTAs and visible against dark sections. |
| Reader Blue | `#43a1d7` | `--color-reader-blue` | brand | Bright blue canvas for the product feature sections, with dark headline text and pale app cards. |
| Plum Ink | `#292229` | `--color-plum-ink` | neutral | Muted dark text and the dark-filled version of the Get the app button. |
| Soft Charcoal | `#3f383d` | `--color-soft-charcoal` | neutral | Secondary text and headings where a softer tone than the main ink is needed. |
| Book Paper | `#f7f4ee` | `--color-book-paper` | surface | Warm off-white cards and app-preview panels set against blue or green sections. |
| Story Ink | `#161015` | `--color-story-ink` | neutral | Primary dark text and button text on white CTA surfaces. |
| Night Black | `#070607` | `--color-night-black` | surface | Black testimonial and footer bands, with light text and social-proof content. |
| Library Green | `#064c37` | `--color-library-green` | brand | Deep green hero and book-gallery background, framing the opening imagery. |
| Footer Gray | `#838383` | `--color-footer-gray` | neutral | Low-emphasis footer and supporting text; not a primary brand field. |
| Mist Gray | `#ededed` | `--color-mist-gray` | semantic | Subtle media and navigation detail, not a defining page surface. |
| Footer Hairline | `#201f20` | `--color-footer-hairline` | semantic | Fine footer divider against the black background. |

### Semantic aliases

`--color-canvas` → `#43a1d7` (Reader Blue) · `--color-surface` → `#ffffff` (Clean Page) · `--color-surface-2` → `#070607` (Night Black) · `--color-surface-3` → `#064c37` (Library Green) · `--color-surface-4` → `#f7f4ee` (Book Paper) · `--color-text` → `#161015` (Story Ink) · `--color-text-muted` → `#3f383d` (Soft Charcoal) · `--color-text-subtle` → `#292229` (Plum Ink) · `--color-border` → `#ffffff` (Clean Page) · `--color-accent` → `#43a1d7` (Reader Blue) · `--color-accent-2` → `#064c37` (Library Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#161015` | `#43a1d7` | 6.54:1 | AA |
| `#161015` | `#ffffff` | 18.77:1 | AAA |
| `#161015` | `#070607` | 1.08:1 | fail |
| `#161015` | `#064c37` | 1.87:1 | fail |
| `#3f383d` | `#43a1d7` | 3.97:1 | AA-large |
| `#3f383d` | `#ffffff` | 11.39:1 | AAA |
| `#3f383d` | `#070607` | 1.78:1 | fail |
| `#3f383d` | `#064c37` | 1.14:1 | fail |
| `#292229` | `#43a1d7` | 5.4:1 | AA |
| `#292229` | `#ffffff` | 15.5:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700, 500 | Navigation, body copy, buttons, card labels, and compact interface text. | Inter |
| Heldane Display | `--font-display` | webfont | 500 | Large editorial headlines and selected display-scale feature titles. | DM Serif Display |

- **Inter:** Use mostly regular weight for copy and semibold for navigation and CTAs; compact text has slightly tight tracking.
- **Heldane Display:** Medium-weight serif with high contrast and tight leading; keep casing natural, not all caps.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 0.94 | 0 | — | Heldane Display | Oversized editorial hero or campaign headline. |
| h1 | 72px | 500 | 0.86 | 0 | — | Heldane Display | Primary hero headline introducing the reading app. |
| h2 | 48px | 500 | 0.88 | 0 | — | Heldane Display | Major feature and testimonial headlines. |
| h3 | 30px | 600 | 1.13 | -0.033em | — | Inter | Feature-card headings and compact section labels. |
| h4 | 26px | 500 | 1.08 | 0 | — | Heldane Display | Smaller serif titles within feature content. |
| body | 20px | 400 | 1.5 | -0.015em | — | Inter | Explanatory feature copy and supporting descriptions. |
| caption | 12px | 400 | 1.33 | -0.017em | — | Inter | Compact metadata and small supporting labels. |
| button | 14px | 600 | 1.5 | -0.018em | — | Inter | Get the app calls to action. |
| nav | 14px | 600 | 1 | -0.018em | — | Inter | Header navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 14, 16, 17, 20, 24, 28, 32, 33, 34, 40, 50, 64, 80 px.
- Section rhythm 80px · element gap 40px · card padding 12px · max content width 1200px.

The page uses a spacious, wide composition with a measured maximum content width of 1200px. The hero is full-bleed, with copy aligned left and a large illustration occupying the right; book-cover rows span the canvas beneath it. Product sections use alternating two-column arrangements, balancing text against app mockups and feature cards. Large section gaps keep the feature narrative unhurried, while gallery rows intentionally become denser. A centered testimonial sits above a multi-column footer.

## Shape & elevation

- Radius: button `9999px` · card `24px` · nav `12px` · xs `8px` · sm `12px` · md `24px` · lg `48px` · pill `9999px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.04) 0px 2px 3px -2px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Surfaces are mostly flat: saturated section backgrounds and pale cards provide the main separation. Cards use soft, generous rounding, while primary calls to action are pill-shaped. Borders are sparse; white is also used as a hairline colour. Navigation receives subtle layered shadows, but feature cards and galleries should not feel heavily elevated.

## Imagery

The opening pairs a large, playful reader illustration with rows of book covers treated as colourful, edge-to-edge media. Blue feature sections mix illustrated characters, phone mockups, and warm card panels that show app screens. Community imagery includes club member portraits and book-related posts. Keep illustrations vivid and friendly, and let media retain its own colours rather than recolouring it to match the interface.

## Components

### Primary app CTA

A compact pill button labeled Get the app, shown as white with dark text or dark plum with white text depending on its background.

### Editorial hero

Left-aligned Heldane Display headline and supporting Inter copy on Library Green, balanced by a large reader illustration.

### Book-cover gallery

Dense horizontal rows of colourful covers placed directly on the green hero canvas, creating a lively reader-community showcase.

### Feature card

Warm Book Paper card with rounded corners, a short Inter heading, and an app screen or feature illustration.

### Feature split

Two-column blue section pairing editorial text and a CTA with layered phone mockups, illustrations, or cards.

### Club preview

Community feed and club previews combine member photos, book imagery, compact labels, and low-emphasis metadata.

### Footer navigation

Multi-column links and social icons on Night Black, separated from the legal row with a fine dark hairline.

### Measured component styles

- **Primary button** (“Get the app”): background #ffffff · text #161015 · border 2px solid #ffffff · radius 60px · padding 0px · 600 14px Inter
- **Secondary button** (“Get the app”): background #292229 · text #ffffff · border 2px solid #292229 · radius 60px · padding 0px · 600 14px Inter
- **Link** (“Laura moderates romance bookclub 2.8k”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Build a habit with streaks”): background #f7f4ee · text #000000 · radius 24px · padding 12px · 400 16px Inter
- **Navigation item** (“Clubs Books Library Blog”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter · shadow rgba(0, 0, 0, 0.04) 0px 2px 3px -2px

## Do

- Use Library Green for the opening hero and book-cover showcase.
- Reserve Reader Blue for the long product-feature narrative.
- Pair Heldane Display headlines with practical Inter interface copy.
- Use Book Paper panels to set app screens apart from saturated backgrounds.
- Keep the hero full-bleed and feature content spacious.
- Show book, app, and community imagery as distinct content.

## Don't

- Do not replace the strong section colour fields with gradients.
- Do not use the serif display face for dense interface text.
- Do not add heavy shadows to cards or gallery media.
- Do not crowd the feature sections with extra decorative borders.
- Do not flatten the book covers or community portraits into generic placeholders.
- Do not make all calls to action the same colour regardless of background.

## Agent prompt

Build a new Fable-style page as a warm, literary social-reading experience. Use Library Green (#064c37) for a full-bleed opening or community gallery and Reader Blue (#43a1d7) for major product-story sections. Set display headlines in a high-contrast serif similar to Heldane Display, with Inter for navigation, body copy, labels, and CTAs. Compose broad two-column feature blocks with generous breathing room, alternating copy and app imagery. Use Book Paper (#f7f4ee) for rounded app-preview cards, Clean Page (#ffffff) for light pill CTAs, and Plum Ink (#292229) for dark CTAs. Keep the imagery colourful and reader-focused: book covers, friendly illustrations, phone screens, and club portraits. Finish with a Night Black (#070607) social-proof or footer band; keep elevation subtle and borders sparse.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed green hero with left-aligned text, right-side illustration, and media beginning below. | App download CTA, Clear introductory value proposition | Serif display headline, Deep green canvas, Illustrated reader |
| 2 | gallery | Horizontal rows of book covers span the green canvas beneath the hero. | Browse visual book inspiration, Clickable cover links | Edge-to-edge cover gallery, Dense media rows |
| 3 | gallery | Additional media row on the same deep green background. | Continue browsing titles, Explore linked media | Book-cover imagery, Green section continuation |
| 4 | feature-split | Blue two-column feature with explanatory text, app CTA, and a cluster of rounded product cards. | Download app, Preview reading lists and streaks | Reader Blue background, Warm paper cards, Layered app mockups |
| 5 | feature-split | Blue feature section with alternating copy and app-summary mockups. | Download app, Preview personal reading insights | Serif feature heading, Phone summary screen, Floating cards |
| 6 | feature-split | Blue two-column feature pairing community copy with discussion-room and feed mockups. | Download app, Explore clubs and spoiler-free rooms | Illustrated character, Rounded discussion panel, App feed previews |
| 7 | gallery | Multi-column community gallery with club names, member photos, covers, and compact metadata. | Explore popular clubs, Discover community hosts | Portrait-led cards, Compact club labels, Blue canvas |
| 8 | testimonials | Centered quote and app CTA on a black band, with social-post cards arranged beneath. | Read social proof, Download app | Centered editorial quote, Black background, White post cards |
| 9 | content-feed | Horizontal row of social-post cards on the black section background. | Scan reader reactions, View post engagement | Light post cards, Compact social metadata |
| 10 | footer | Black footer with grouped navigation columns, social links, and a separated legal row. | Navigate site categories, Open social channels, Review policies | Multi-column link groups, Subtle divider, Low-emphasis footer text |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(24,13,67,0);
--osano-button-border-color: #070607;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #070607;
--osano-dialog-background-color: #070607;
--osano-dialog-foreground-color: #FFFFFF;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #37CD8F;
--osano-toggle-off-track-color: #b1acaf;
--osano-toggle-off-thumb-color: #5b5b5b;
--osano-toggle-on-track-color: #88c900;
--osano-toggle-on-thumb-color: #626262;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #FFFFFF;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #070607;
--osano-button-accept-foreground-color: #070607;
--osano-button-deny-background-color: #ffffff;
--osano-button-deny-border-color: #070607;
--osano-button-deny-foreground-color: #070607;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: #ebebeb;
--osano-button-reject-all-border-color: #070607;
--osano-button-reject-all-foreground-color: #070607;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #070607;
--osano-button-manage-foreground-color: #070607;
--osano-info-dialog-link-color: #37CD8F;
--osano-info-dialog-button-close-color: #FFFFFF;
--osano-info-dialog-toggle-off-track-color: #b1acaf;
--osano-info-dialog-toggle-off-thumb-color: #5b5b5b;
--osano-info-dialog-toggle-on-track-color: #88c900;
--osano-info-dialog-toggle-on-thumb-color: #626262;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #070607;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fable-co