Storytel DESIGN.md

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