Blinkist DESIGN.md

Design System Inspiration of Blinkist

Overview

Visual Theme & Atmosphere

Blinkist turns nonfiction books into 15-minute "blinks" in text and audio. "Founded in 2012 by four friends, Blinkist now connects 44-million readers worldwide to the biggest ideas from bestselling nonfiction." It collaborates with authors ("humans before algorithms") and lists a UN World Summit Award, a Google Material Design Award and Apple's Best Apps of 2017. Its legal notice names Blinks Labs GmbH, Revaler Straße 31, 10245 Berlin.

The site is fresh and legible: white and a pale mint-grey #eff5f3, deep midnight blue #033049 for headings and text, Blinkist green #2ee081 for the conversion button, a blue #0266f2 for links and focus, and Cera Pro throughout, with a Blinkist serif available.

What makes it worth reading:

• Container / content / outline roles. --color-container-*, --color-content-* and --color-outline-* for primary, secondary, accent, conversion, info, success, warning, danger and disabled — each with an on- content colour.
• "Conversion" as a role. The green is named for its job: --color-container-conversion, --color-content-on-conversion (midnight).
• Extended ramps with names. Midnight, blue, green, orchid-violet, raspberry and summer-yellow, eight steps each.

Primary tasks

• Get started with a trial; log in.
• Browse categories; learn about Blinkist for Business.

Brand Narrative

Four friends' answer to having no time to read: key ideas in 15 minutes. The interface is calm midnight and mint, with one green button that means "start".

Principles

• 15-minute discoveries.
• Humans before algorithms.
• One conversion colour.

Personas

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

Colors

Measured with getComputedStyle on blinkist.com: 385 root custom properties — --color-* 157, --text-* 52, --dim-* 23, --type-* 15 … and Tailwind's --tw-* (32, excluded).

Brand

• Brand green (#2ee081) — --color-brand-green, --color-container-conversion.
• Brand midnight (#033049) — --color-brand-midnight, --color-content-primary.
• Brand blue (#0266f2) — accent, info, focus ring · Blue hover (#0552bd).
• Conversion text (#008566) — --color-content-conversion, success.

Extended accents

Violet #694dd1 · Raspberry #c81e34 (danger) · Summer yellow #fdbe21 · Rating #edab02.

Neutrals

• Foreground (#033049) · Text secondary (#3b474a) · Text tertiary (#6d787e) · Black (#000000) — navigation.
• Canvas (#ffffff) · Pale mint grey (#eff5f3) · Surface neutral (#f9fbfa).
• Light grey (#bac8ce) · Lightest grey (#e1e7ea).

Typography

Font family

Cera Pro (400, 500, 700) for everything measured, with blinkist-serif (400–700) also loaded; both via document.fonts.

Scale

H1 64px/400; H2 48–64px/700 in midnight; buttons and navigation 14–16px/500.

Layout

• A white header with categories, a hero with the green call to action, then content rows on white and pale mint grey.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

A soft 0 3px 6px #bac8ce shadow appears on the hovered conversion button.

Motion & Easing

Not measured.

---

Tier 1 sources: https://www.blinkist.com/ (live homepage — 385 root custom properties read via getComputedStyle, Tailwind excluded; Cera Pro and blinkist-serif loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-27); https://www.blinkist.com/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-27); https://www.blinkist.com/about (About — founded 2012 by four friends, 44 million readers, 15-minute format, awards, read 2026-09-27); https://www.blinkist.com/en/disclaimer (legal notice — Blinks Labs GmbH, Revaler Straße 31, 10245 Berlin, read 2026-09-27)

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched. The grey button border (oklch(0.928 0.006 264.5)) is Tailwind's default and is not recorded.

• Conversion button — Get started: #2ee081, #033049 16px/500, 6px, 44px. Hover and press drop it to 80% (rgba(46,224,129,0.8)) with a 0 3px 6px #bac8ce shadow; focus a 2px #0266f2 outline.
• Navigation link — Log in, For Business, Categories: black 14–16px/500. Hover #0552bd; same focus.

Radius

4–8px (--radius-*).

States

Hover: the green drops to 80% with a shadow; links turn #0552bd. Press: the same. Focus: a 2px #0266f2 outline.

Do's and Don'ts

Do

• Use green #2ee081 with midnight #033049 text for the one conversion action.
• Set headings in midnight, not black.
• Use blue #0266f2 for links and focus.

Don't

• Don't put white text on the green; the pairing is midnight on green.
• Don't use green for secondary actions.
• Don't adopt Tailwind's default grey border as a brand token.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#2ee081 Blinkist green · #033049 midnight · #0266f2 blue · #0552bd hover · #eff5f3 pale mint · #3b474a secondary · #6d787e tertiary · #fdbe21 yellow

Example Component Prompts

• "A 44px #2ee081 button, #033049 16px/500 Cera Pro, 6px radius; hover 80% with a soft shadow."
• "A 64px Cera Pro 700 heading in #033049 on #eff5f3."

Governance

Known Gaps

• Contrast, link-nav. Text #000000 on #00000000 measures 1.00:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.