# How fable.co is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/fable.co-design)

Last updated: 2026-07-28

## 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.

## Captured pages

[![Fable: The social app for bookworms and bingewatchers](https://pin.fontofweb.com/6894?format=jpg)](https://design.withfudge.com/share/pin-6894)

[Fable: The social app for bookworms and bingewatchers](https://design.withfudge.com/share/pin-6894)

[![Fable | Stories for everyone](https://pin.fontofweb.com/6895?format=jpg)](https://design.withfudge.com/share/pin-6895)

[Fable | Stories for everyone](https://design.withfudge.com/share/pin-6895)

[![Fable | Stories for everyone](https://pin.fontofweb.com/6898?format=jpg)](https://design.withfudge.com/share/pin-6898)

[Fable | Stories for everyone](https://design.withfudge.com/share/pin-6898)

[![Fable: The social app for bookworms and bingewatchers](https://pin.fontofweb.com/6892?format=jpg)](https://design.withfudge.com/share/pin-6892)

[Fable: The social app for bookworms and bingewatchers](https://design.withfudge.com/share/pin-6892)