coderef

Coolblue

Coolblue is a Dutch online retailer of electronics and appliances — "Alles voor een glimlach", everything for a smile, as its homepage title says.
DownloadRaw
coolblue.nlVisit ↗
View full
coolblue.nlVisit site ↗
Coolblue website, full page

Palette

At a glance

Website
coolblue.nl ↗
Theme
light
Typefaces
System
Sections
11
Length
1,337 words

Add it to your project

Then prompt your agent

Design System · Coolblue

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
name: Coolblue
colors:
  brand: '#0090e3'
  primary: '#285dab'
  primary-hover: '#1c4684'
  primary-inset-hover: '#14315c'
  action: '#008a00'
  action-hover: '#026902'
  action-inset-hover: '#005200'
  link: '#0072d1'
  icon: '#0088d6'
  foreground: '#1b1e24'
  text-subtle: '#6c6e75'
  text-additional: '#5b5c62'
  accent: '#ff6600'
  canvas: '#ffffff'
  surface-secondary: '#f2f7fc'
  surface-tertiary: '#f7f7f7'
  border: '#d2d5d5'
  danger: '#da001e'
  warning: '#ed9f02'
typography:
  button:
    fontSize: 13px
    fontWeight: 700
    use: buttons
  body:
    fontSize: 13px
    fontWeight: 400
    use: search field and links
rounded:
  sm: 4px
components:
  button-main:
    type: button
    backgroundColor: '#285dab'
    textColor: '#ffffff'
    rounded: 4px
    height: 48px
    padding: 12px 16px 14px
    typography: 13px / 700
    shadow: 'inset 0 -2px 0 #1c4684'
    hover: '#1c4684'
    focus: 'outline 2px solid #14315c'
    use: 'A blue main button on the home page — --cb-color-background-interactive-main-base with a 2px darker inset along its bottom. Hover darkens it to #1c4684 and the inset to #14315c; focus drops the inset and draws a 2px navy outline.'
  button-action:
    type: button
    backgroundColor: '#008a00'
    textColor: '#ffffff'
    rounded: 4px
    height: 48px
    padding: 12px 16px 14px
    typography: 13px / 700
    shadow: 'inset 0 -2px 0 #026902'
    hover: '#026902'
    focus: 'outline 2px solid #14315c'
    use: 'The green action style (--cb-color-background-interactive-action-base), measured on the consent dialog''s button: hover #026902 with the inset deepening to #005200; focus a 2px navy outline.'
  link:
    type: button
    backgroundColor: transparent
    textColor: '#0072d1'
    rounded: 0px
    height: 52px
    typography: 13px / 400
    hover: 'underline #0072d1'
    focus: 'box-shadow 0 0 0 2px #14315c'
    use: A blue content link — hover underlines it; focus rounds it to 4px and draws a 2px navy ring.
  input-search:
    type: input
    backgroundColor: transparent
    textColor: '#1b1e24'
    rounded: 0px
    height: 38px
    padding: 0 8px 0 0
    typography: 13px / 400
    hover: transparent
    focus: transparent
    use: The header search field. None of its own measured values change on hover or focus; the frame belongs to a wrapper that was not read.
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: Open Sans
    display: Dobra Slab

Design System Inspiration of Coolblue

Overview

Visual Theme & Atmosphere

Coolblue is a Dutch online retailer of electronics and appliances — “Alles voor een glimlach”, everything for a smile, as its homepage title says. By its own history, Pieter Zwart and his friends Paul de Jong and Bart Kuijpers founded it in 1999 from Zwart’s dorm room with a first webshop, “MP3man.nl”. It reached Belgium in 2004, opened physical stores by 2008, and in 2011 set down the brand values it still uses — “friends, flexible, unconventional, and go for it” — and designed the Coolblue logo and colour scheme. It has since added its own delivery network, a central warehouse in Tilburg and an energy business.

The shop is crisp and friendly: white and pale-blue surfaces, near-black #1b1e24 text, Coolblue blue #0090e3 for the brand, a deeper #285dab for buttons, green #008a00 for actions and a hot orange #ff6600 for accents. Buttons are small-radius (4px) with a darker inset line along their base.

What makes it worth reading:

  • Names with character. Primitive colours are called coolblue, factblue, eveningblue, springblue, hotorange, freshgreen, coolblack, rubyred — the brand’s tone in the token names.
  • Every state spelled out. Semantic tokens go base → hovered → disabled → loading for each role (--cb-color-background-interactive-main-hovered, -action-loading …).
  • A pressed-key button. A 2px darker inset 0 -2px 0 under each button; on hover the fill and the inset both step darker.

Primary tasks

  • Search and browse products; compare and read advice.
  • Add to basket; check delivery and installation.

Brand Narrative

Coolblue started as MP3man.nl in a student room in 1999 and grew into a retailer that delivers and installs what it sells. Its 2011 brand work fixed the values and the logo and colours still in use, and the interface carries them: a friendly blue, a green that means go, and token names with the same sense of humour as the brand.

Principles

  • Blue for trust, green for go. Two button colours with clear jobs.
  • States all the way down. Base, hovered, disabled, loading — for every role.
  • Say it with a smile. Even the tokens have personality.

Personas

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

Colors

Read with getComputedStyle on coolblue.nl: 441 root custom properties, all --cb-* — --cb-color-* 332, --cb-font-* 15, --cb-spacing-* 14, --cb-motion-* 13, --cb-input-* 12, --cb-border-* 11, --cb-shadow-* 10, --cb-control-* 10, --cb-opacity-* 7.

Brand and actions

  • Brand (#0090e3) — --cb-color-background-brand, --cb-color-primitive-blue-coolblue.
  • Primary (#285dab) — --cb-color-background-interactive-main-base (factblue); hover #1c4684 (-main-hovered), inset hover #14315c.
  • Action (#008a00) — --cb-color-background-interactive-action-base; hover #026902, inset hover #005200.
  • Link (#0072d1) — --cb-color-font-interactive-base.
  • Icon (#0088d6) — --cb-color-icon-base.
  • Accent (#ff6600) — --cb-color-background-accented-base, hotorange.

Text and surfaces

  • Foreground (#1b1e24) — --cb-color-font-base; 82 of 90 <p> elements.
  • Text subtle (#6c6e75) · Text additional (#5b5c62).
  • Canvas (#ffffff) · Surface secondary (#f2f7fc, 18 backgrounds) · Surface tertiary (#f7f7f7) · Border (#d2d5d5, --cb-color-border-base).

Status

Danger #da001e · Warning #ed9f02 · positive uses the action green #008a00.

Typography

Font family

Open Sans on body text and controls ("Open Sans", Arial, Helvetica, Verdana, sans-serif), loaded at 400, 600 and 700. Dobra Slab (Book 400, Medium 500) and Avenir Black (900) also load (document.fonts). Where each is applied beyond body text was not traced.

Scale

Buttons 13px/700; the search field and links 13px/400.

Layout

  • White pages with #f2f7fc blue-tinted panels; a dense product grid.

Responsive Behavior

Not measured. Desktop only.

Elevation & Depth

Buttons carry a 2px inset along the bottom; --cb-shadow-* tokens hold the rest. Backdrops use --cb-color-background-backdrop-base #1b1e24cc.

Motion & Easing

13 --cb-motion-* tokens are declared. Not measured on controls.

Components

Measured on the home page in a fresh browser tab, 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.

  • Main button — #285dab, white 13px/700, radius 4px, 48px, 12px 16px 14px, shadow inset 0 -2px 0 #1c4684. Hover: fill #1c4684, inset #14315c. Focus: the inset goes and outline: 2px solid #14315c appears.
  • Action button — #008a00, same shape, inset #026902. Hover: fill #026902, inset #005200. Focus: the same navy outline. (Measured on the button in the consent dialog, which uses the action style.)
  • Link — #0072d1, 13px. Hover underlines it. Focus rounds it to 4px and draws 0 0 0 2px #14315c.
  • Search field — transparent, #1b1e24, 38px. Nothing on the input itself changes on hover or focus.

Radius

4px on buttons and focus rings.

States

Hover: main #1c4684, action #026902, links underline, the search field unchanged. Focus: a 2px #14315c outline on buttons, a 2px ring on links. Disabled and loading tokens exist (--cb-color-background-interactive-main-disabled #cfd5dc) but were not observed.

Do’s and Don’ts

Do

  • Use #285dab for main buttons and #008a00 for action; step both darker on hover.
  • Give buttons the 2px darker bottom inset.
  • Draw focus with the navy #14315c outline or ring.

Don’t

  • Don’t use the brand blue #0090e3 as the button colour; buttons are #285dab.
  • Don’t round buttons beyond 4px.
  • Don’t use orange #ff6600 for actions; it is an accent.

Voice & Tone

The brand values are stated: “friends, flexible, unconventional, and go for it”. Copy was not assessed further.

Agent Prompt Guide

Quick Color Reference

#0090e3 brand · #285dab button · #1c4684 hover · #008a00 action · #026902 action hover · #0072d1 link · #1b1e24 ink · #f2f7fc panel · #ff6600 accent · #14315c focus

Example Component Prompts

  • “A 48px button, #285dab, white 13px/700 Open Sans, 4px radius, a 2px #1c4684 inset along the bottom; hover #1c4684 with a #14315c inset; focus a 2px #14315c outline.”
  • “A green #008a00 add-to-basket button in the same shape.”

Governance

Known Gaps

  • Contrast, link. Text #0072d1 on #00000000 measures 4.33:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
  • Contrast, input-search. Text #1b1e24 on #00000000 measures 1.26:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.

More like Coolblue

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses