---
name: Storytel
colors:
  brand: '#ff501c'
  brand-hover: '#c6461b'
  brand-press: '#a33815'
  primary: '#101010'
  primary-hover: '#333333'
  foreground: '#101010'
  sand: '#dcd5cd'
  invert-hover: '#f2eeeb'
  invert-press: '#eae6e0'
  canvas: '#ffffff'
  text-muted: '#c2c2c2'
  text-secondary: '#5c5c5c'
  brand-light: '#ffeae4'
  yellow: '#ffc739'
  green: '#1fa37d'
  info: '#50a2ef'
typography:
  button:
    fontSize: 16px
    fontWeight: 600
    use: hero pill button
  nav:
    fontSize: 16px
    fontWeight: 400
    use: header links
rounded:
  sm: 4px
  pill: 1000px
components:
  button-invert:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#101010'
    rounded: 1000px
    height: 48px
    typography: 16px / 600
    hover: '#f2eeeb'
    pressed: '#eae6e0'
    use: 'Starta erbjudandet on the dark hero — --color-btn-primary-invert: white pill, hover #f2eeeb, press #eae6e0. Focus is the browser''s ring. Prova nu in the header is a 40px, 13px version.'
    padding: 12px 20px
  link-nav:
    type: button
    backgroundColor: transparent
    textColor: '#ffffff'
    rounded: 0px
    height: 22px
    typography: 16px / 400
    hover: 'fg #ff501c'
    pressed: 'fg #ff501c'
    use: Ljudböcker, E-böcker, Podcasts in the header — white links that turn Storytel orange on hover and press.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Storytel Euclid
---

# Design System Inspiration of Storytel

## Overview

### Visual Theme & Atmosphere

Storytel is an audiobook and e-book streaming service from Stockholm. In its own words it is "one
of the world's largest audiobook and e-book streaming services", with more than 1.8 million titles
in 55 languages, more than 2.7 million paying subscribers and 25 launched markets. The group,
Storytel AB (publ), is based at Tryckerigatan 4 in Stockholm.

The Swedish site is warm and bookish: a dark hero in near-black **`#101010`**, then sections on a
sand tone **`#dcd5cd`**, with Storytel's orange **`#ff501c`** for links, badges and brand headings.
Buttons are full pills; type is **Storytel Euclid**, a face named for the company.

What makes it worth reading:

- **Tokens named for every variant and state.** `--color-btn-primary-invert-background-hover`,
  `--color-btn-brand-hollow-text-press`, `--color-btn-primary-text-background-press` — 75 tokens for
  the primary button alone.
- **An orange ladder.** `--color-theme-accent-01` `#ff501c`, `-02` `#c6461b`, `-03` `#a33815` —
  used as rest, hover and press across the brand buttons.
- **Warm neutrals.** The page ground is sand, not grey; disabled states use the same sand.

#### Primary tasks
- Start the offer or a free trial.
- Browse audiobooks, e-books and podcasts; sign in.

### Brand Narrative

Storytel wants to move the world through stories, and its site feels like a bookshop: warm sand,
dark covers, and an orange that marks what is Storytel's. The token system is exhaustive — every
button variant, every state — and a typeface named for the company carries it.

### Principles

- **Warm, not cold.** Sand and near-black rather than grey.
- **Orange is Storytel.** Brand accents only.
- **Every state named.** Tokens for rest, hover, press, selected, disabled.

### Personas

Not researched. No persona claim is made from a UI capture.

## Colors

Measured with `getComputedStyle` on `storytel.com/se`: 1,027 root custom properties — `--typography-*`
550, `--color-*` 472, `--breakpoint-*` 3 — all Storytel's.

### Brand

- **Brand** (`#ff501c`) — `--color-theme-accent-01`, `--color-badge-background-accent`,
  `--color-typography-text-heading-brand`.
- **Brand hover** (`#c6461b`) — `--color-theme-accent-02`.
- **Brand press** (`#a33815`) — `--color-theme-accent-03`.
- **Brand light** (`#ffeae4`) — `--color-banner-brandlight-03-background-default`.

### Ink and ground

- **Primary** (`#101010`) — `--color-btn-primary-background-default`, `--color-page-background-branded`.
- **Primary hover** (`#333333`) — `--color-btn-primary-background-hover`.
- **Foreground** (`#101010`) — text on light sections.
- **Sand** (`#dcd5cd`) — the section ground (534 elements) and the disabled colour.
- **Canvas** (`#ffffff`) · **Text muted** (`#c2c2c2`, on dark) · **Text secondary** (`#5c5c5c`).
- **Invert hover** (`#f2eeeb`) · **Invert press** (`#eae6e0`) — the white button's states.

### Other brand colours

**Yellow** `#ffc739` (`--color-theme-brand-01-primary`, banners) · **Green** `#1fa37d`
(`--color-theme-brand-04-primary`) · **Info** `#50a2ef`.

## Typography

### Font family

**Storytel Euclid** at 400, 500 and 600, loaded (`document.fonts`); body `"Storytel Euclid",
sans-serif`. The 550 `--typography-*` tokens hold the scale.

### Scale

The hero pill is 16px/600, the header pill 13px/600, header links 16px/400.

## Layout

- A dark hero, then sand sections with rows of book covers.
- Three breakpoint tokens.

### Responsive Behavior

**Not measured.** Desktop 1440×1000 only.

## Elevation & Depth

Flat on the measured controls; overlays use `--color-theme-bg-overlay` `#0006`.

## Motion & Easing

Not measured.

---

**Tier 1 sources:** https://www.storytel.com/se (live homepage — 1,027 root custom properties read via `getComputedStyle`; Storytel Euclid loaded; two components measured at rest, hover, pressed and focus after declining cookies, captured 2026-09-26); https://www.storytel.com/se/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://investors.storytel.com/en/ (Storytel Group — "one of the world's largest audiobook and e-book streaming services", 1.8 million titles, 2.7 million subscribers, 25 markets; Storytel AB (publ), Tryckerigatan 4, Stockholm, read 2026-09-26)

## Components

Measured after declining cookies (Cookiebot), focus read under a real Tab key, and a hover counted
only when `:hover` matched; background-image, text-decoration and pseudo-elements were compared too.

- **Invert pill** — Starta erbjudandet: **`#ffffff`**, `#101010` 16px/600, radius 1000px, 48px. Hover
  **`#f2eeeb`**, press **`#eae6e0`**. Focus is the browser's `auto` ring. Prova nu is the 40px,
  13px header version with the same states.
- **Header link** — Ljudböcker and siblings: white 16px/400. Hover and press turn it **`#ff501c`**.

### Radius

Pills at 1000px; book covers at 4px.

### States

Hover: the white pill to `#f2eeeb`, header links to `#ff501c`. Press: `#eae6e0`. Focus: the browser's
ring. Disabled tokens use sand `#dcd5cd` (not observed).

## Do's and Don'ts

### Do
- Use orange `#ff501c` for brand accents and step to `#c6461b`, `#a33815` for hover and press.
- Ground sections in sand `#dcd5cd` and near-black `#101010`.
- Keep buttons as full pills.

### Don't
- Don't use cold greys for the page ground.
- Don't use pure black; the ink is `#101010`.
- Don't square off buttons.

## Voice & Tone

Not assessed as authored voice.

## Agent Prompt Guide

### Quick Color Reference
`#ff501c` orange · `#c6461b` / `#a33815` orange steps · `#101010` ink · `#dcd5cd` sand · `#f2eeeb` /
`#eae6e0` white-button states · `#ffc739` yellow

### Example Component Prompts
- "A 48px white pill on near-black, `#101010` 16px/600 Storytel Euclid label; hover `#f2eeeb`, press
  `#eae6e0`."
- "White header links that turn `#ff501c` on hover."