Bol Brand Design System Deep-Dive

1. Brand Overview

Bol.com isn’t new to the game. They’ve been a digital retailer in the Netherlands for decades, and their design system shows it — matured, disciplined, stripped-down to what works in e-commerce.

Their website gives off a civilian-friendly, utility-first vibe: not luxury, not hyper-minimal, but accessible and real-world. You land there and nothing distracts you from looking for an item. Navigation is straightforward. Interactions are direct.

Bol’s design language isn’t chasing trends. They’re sitting firmly in a “trustable retailer” space. That means functional typography, simple colour coding, and very light visual decoration. If you’re looking for flourish, you won’t find it here. They’ve made strong choices about iconography (or rather, the absence of a complex icon set in the scraped data) and about depth — flat design dominates, with borders playing a role for separation instead of shadows.

The brand’s visual system has a strong anchor in blue — a classic for e-commerce in Europe. Blue says trust, reliability, no-nonsense. On bol.com, the blue is pure (#0000ff from the extracted data) — almost web-blue — which is unusually unbranded compared to competitors who tend to custom-tint their primary blues. This works for them because layering product imagery over highly neutral white backgrounds needs a colour that cuts through without fighting.

Typography is utilitarian: Produkt for display headings, Graphik for body and navigation. Both are legible, modern sans-serifs. They’re not free fonts (no Google Fonts here), so they lean on license-required typefaces — a sign of investment in the brand. The fallback stacks (Arial, Helvetica) keep it safe if custom fonts fail to load.

Spacing is on a strict 8px base grid. That matters in e-commerce — product cards, grids, buttons, all align to predictable gaps. This gives them scalability. Insert a new widget, and spacing stays coherent.

If you’re building on Bol’s system, the vibe is: don’t get fancy. Play by their grid. Be precise with type. Let the blue do the heavy lifting for brand identity. And keep everything light — no heavy shadows, no gradient theatrics.

2. Color System

2.1 Primary Colors

Bol’s main brand colour is pure blue:
#0000ff (RGB 0,0,255).

That’s the most “web” blue you can imagine — the default link colour from HTML days. While many brands tone this down toward teal or navy, Bol embraces its purity. Psychologically, blue = trust, safety, calm. In retail, it’s also strongly associated with clickable text and interactive elements. Bol leverages that familiarity — links and likely CTAs adopt this blue.

Compared to Amazon’s orange or Coolblue’s custom bright blue, Bol feels more neutral. Their blue isn’t trying to “brand” every pixel, but when it shows up, you know what to do with it — it signals interaction.

Their supporting colour is white (#ffffff) — the neutral canvas for everything else. Keeping backgrounds pure white allows products to pop and ensures the brand blue isn’t competing for visual dominance.

2.2 Complete Palette

These are the only extracted colours. That tells you something: Bol’s visual aesthetic is brutally minimal on colour. This isn’t a rainbow UI — it's blue for action, grey for structure, white for everything else.

2.3 Color Relationships

Pure blue on white is accessible from an AA and AAA standpoint for text, with a contrast ratio above 8:1. Blue against light grey (as border backgrounds) still holds contrast but avoid setting blue text directly on grey — it can get shaky in WCAG compliance for smaller text.

White + light grey: subtle separation without drawing too much attention. The medium grey (#808080) is a safe neutral but less contrasty; suited for dividers, not text.

Dark mode? Not in this extracted set. No reversed palette. If you implement dark mode, you’ll have to create it from scratch while respecting the minimal palette.

2.4 Usage Guide

• Do: Use #0000ff sparingly; it should only decorate interactive components or critical visual cues.
• Do: Keep large areas white for product imagery space.
• Don’t: Apply blue as background for large panels — it overpowers content.
• Do: Use #e6e6e6 for structural borders; they keep the layout in check without shadows.
• Don’t: Blend blue and grey for text — keep things high-contrast.

3. Typography

3.1 Font Families

Two main families are deployed:

1. Produkt — for headings. Modern sans-serif with geometric construction. Bold (700) for hierarchy. Fallbacks: arial, helvetica.
2. Graphik — for smaller headings, links, and likely body text. Clean sans-serif, high readability. Normal weight (400). Fallbacks: Arial, Helvetica.

No Google Fonts here — licensing likely through a type foundry. This is a deliberate choice. Graphik and Produkt convey a professional, paid aesthetic.

3.2 Type Scale

Interesting note: They have two heading-1 entries — one probably used for hero titles and another for something like category labels. Graphik’s H1 at 16px is atypical; likely a smaller variant within component titles.

3.3 Hierarchy

Produkt’s large bold size is the clear attention-getter — page-level titles, key sections. Graphik's smaller H1 suggests a component-title usage, keeping things compact. Links are set identically to small Graphik headings, so navigation and inline links feel consistent.

It's all sans-serif, modern, no serifs in sight — which fits retail, keeping readability high in quick-scan environments.

4. Spacing & Layout

4.1 Spacing Scale

Strictly on an 8px grid:

Base unit: 8px. Even the odd 6.85715px likely comes from scaling or a rem conversion anomaly — treat it as “tight spacing”.

4.2 Layout

No explicit breakpoints detected — they might compute them in JS or handle them via an external CSS. The lack of breakpoint data doesn’t mean no responsive — we just don’t have extracted numbers.

Container widths? Not given, but expect alignment on 8px multiples. This supports modular layouts for product grids.

5. Visual Elements

• Border Radius: Single value — 8px. It appears in div elements, likely for cards or panels. That’s medium rounding — not pill-shape, not sharp.
• Shadows: None. Flat design. Separation and layering are done with borders and background colour, not depth.
• Borders: Two combos:
  • 1px solid #e6e6e6 — soft structural lines.
  • 1px inset #808080 — subtle inset lines, used in hr elements for section division.

This is consistent: 8px corners across UI, 1px borders in neutral greys.

6. Components

6.1 Buttons

No direct button data extracted — they may be generated dynamically or styled inline. That means either:

• Buttons match link colour for text, or
• Buttons follow a minimal flat style with border-radius 8px and blue text or background.

For system-building, map their rules:

• Keep radius at 8px.
• Use pure blue for primary actions.

6.2 Links

Default link style:

• Colour: #0000ff
• Text-decoration: none (no underline, so they rely on colour recognition)
• Font-weight: 400
  No hover style extracted — possibly unchanged or gets underline via pseudo-element.

6.3 Forms

No inputs captured — might be framework-driven and loaded post-flight. Expect radius+border grey scheme.

6.4 Cards

From border-radius data, cards likely have 8px corners and 1px grey borders. No shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-blue-primary: #0000ff;
  --color-grey-light: #e6e6e6;
  --color-grey-medium: #808080;

  /* Typography */
  --font-heading: "Produkt", arial, helvetica;
  --font-body: "Graphik", Arial, Helvetica;
  --heading1-size: 1.86rem; /* 29.7142px */
  --heading1-weight: 700;
  --heading1-lineheight: 1.25;
  --heading1-small-size: 1rem; /* 16px */
  --heading1-small-weight: 400;
  --heading1-small-lineheight: 1.5;
  --link-size: 1rem;
  --link-weight: 400;
  --link-lineheight: 1.5;

  /* Spacing */
  --space-tight: 0.43rem; /* 6.85715px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */

  /* Border radius */
  --radius-md: 8px;

  /* Borders */
  --border-light: 1px solid #e6e6e6;
  --border-inset-grey: 1px inset #808080;
}

8. AI Coding Assistant Prompt

# Bol Design System Specification

You are a Bol.com design expert. Build UIs matching their visual language exactly.

## Brand Context
Bol’s design philosophy is functional retail UI with zero fluff. Colours are minimal, typography is clean sans-serif, and layouts stick to an 8px grid. Borders and pure colour separate elements — no shadows, no gradients.

## Color Palette
- White: #ffffff — Page background, card background
- Pure Blue: #0000ff — Links, primary actions, interactive text
- Light Grey: #e6e6e6 — Divider borders, card outlines
- Medium Grey: #808080 — HR lines, muted dividers

## Typography
Families:
- Headings: "Produkt", arial, helvetica
- Body & links: "Graphik", Arial, Helvetica

Sizes:
| Level          | Size    | Weight | Line Height | Use For            |
|----------------|---------|--------|-------------|--------------------|
| Heading-1 large| 29.7142px | 700    | 1.25        | Page titles        |
| Heading-1 small| 16px    | 400    | 1.50        | Component titles   |
| Link           | 16px    | 400    | 1.50        | Navigation, inline |

## Spacing & Grid
Base: 8px grid.
Scale: 6.85715px (tight), 8px (small), 16px (medium).
Map:
- Tight (6.85715px): icon gaps
- Small (8px): button padding, small component gaps
- Medium (16px): card padding, section gaps

## Border Radius
- md: 8px — cards, buttons, containers

## Shadows & Depth
Flat design — use borders for separation. No shadows.

## Component Specifications
### Primary Button
Default:
- Background: #0000ff
- Text color: #ffffff
- Radius: 8px
- Border: none
- Font: Graphik 16px 400
- Padding: 8px 16px
Hover: Darken blue slightly
Focus: Outline 2px solid #0000ff
Disabled: Opacity 0.5, cursor not-allowed

### Navigation Links
- Default: color #0000ff, text-decoration: none
- Hover: underline or keep style consistent

### Cards
- Background: #ffffff
- Border: 1px solid #e6e6e6
- Radius: 8px
- Padding: 16px

## Layout & Responsive Rules
- Align to 8px grid
- Mobile: stack components vertically, 16px page padding
- Desktop: multi-column product grids

## Interaction Rules
- Transition timing: 150ms ease for hover/focus states
- Focus indicators: visible and in brand blue

## DO
- Use only #0000ff, #ffffff, #e6e6e6, #808080
- Maintain 8px grid
- Use Produkt for headings, Graphik for body
- Keep corners at 8px radius
- Avoid shadows

## DON'T
- Introduce new colours
- Mix corner radii
- Remove focus states
- Use gradients

## Code Examples
Primary Button:
```css
.btn-primary {
  background: #0000ff;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-family: "Graphik", Arial, Helvetica;
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #0000e6; }
.btn-primary:focus { outline: 2px solid #0000ff; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Card:
```css
.card {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 16px;
}
```

Link:
```css
a {
  color: #0000ff;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
```

9. Summary

TL;DR
Bol’s design system is minimal, blue-first, grid-consistent. Four colours, two typefaces, one border radius. All about utility and clarity — the retail UI stripped to essentials.

Brand Keywords

• trust-heavy
• minimal-retail
• grid-disciplined
• flat-interface
• blue-driven