Design tokens (YAML front matter)
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 EuclidDesign 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.
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,#10101016px/600, radius 1000px, 48px. Hover#f2eeeb, press#eae6e0. Focus is the browser’sautoring. 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
#ff501cfor brand accents and step to#c6461b,#a33815for hover and press. - Ground sections in sand
#dcd5cdand 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,
#10101016px/600 Storytel Euclid label; hover#f2eeeb, press#eae6e0.” - “White header links that turn
#ff501con hover.”
