fable.co website design: fonts, colors and UI patterns

Design character

Fable is a warm consumer social-reading product. Marketing and store surfaces use pill-dominant corners (often 48–60px), friendly mid-size type, and clear card/store modules. It feels approachable and app-like rather than literary-austere — community and discovery first.

What should survive adaptation: - Pill-heavy geometry (44–60px common, 12–24px secondary) - 24px page padding and 60–100px section padding - Friendly weight contrast (400 body, 600 labels) - Store/home as browsable content grids, not dense admin UI

Foundations

Color

Structured color roles unsupported in this set. Visually expect light marketing surfaces with brand accents carried in illustration and buttons (confirm per screenshot when implementing). Do not invent a palette token list beyond what you see in pins.

Typography

Families unsupported. Observed: - Body ~16/24 - Titles ~26/28 - Labels ~12–14/16 weight 600

Spacing and layout

• Padding top ~60px common; 100px on larger bands
• Horizontal 24px
• Margin bottom ~24px stacks
• Home + /store share the consumer system

Radii: 48px and 60px prominent (pills), 12px cards, 24px medium.

Visual language

Border-separated surfaces, pill CTAs/chips, book-cover imagery as primary media. Taxonomy: software SaaS, pill-dominant corners, moderate density.

Components and states

• App-style top nav
• Hero with soft CTA pills
• Book/store grids
• Feature rows with rounded media

Practical guidance

Preserve pill language and friendly consumer spacing. Avoid sharp enterprise dashboards and tiny 2px radii everywhere. Adaptation for social consumer apps and media storefronts.

Scope note

Eight captures on / and /store. Color roles unsupported — rely on pins for hue. Font families unsupported.