# Datawrapper — Marketing Site Design Spec

> Source: datawrapper.de (live DOM, computed styles), 2026-07-30 (desktop 1512px). Stylesheets readable; publishes a large `--color-*` token system (grey + named colour ramps) captured in full for the brand-relevant tokens.
> Coverage: logged-out homepage. Editor app (chart builder): behind login, `needs-dashboard`. The full categorical chart palette lives in raster/img thumbnails and is not fully token-extractable; the captured data colours below are the ones read from computed styles.
> Reality check: the queue hint ("newsroom charting tool, clean editorial, chart-led") is accurate. The defining move it undersells: the entire page is wallpapered with columns of REAL data-viz thumbnails that auto-scroll as Svelte marquees at staggered speeds, so the product output IS the background. Brand colour is a single teal ("scooter" `#007da0`) over Roboto + a full grey ramp, with an orange secondary; body copy is unusually set at weight 500 grey.

## 1. Visual Theme & Atmosphere

A clean, editorial, newsroom-grade charting tool whose homepage makes the product the wallpaper: the hero headline sits in a clearing surrounded by columns of real scatter plots, choropleth maps, line charts and donut charts that scroll infinitely at staggered speeds. Chrome is restrained and Germanic-precise — white canvas, Roboto throughout, a full numbered grey ramp for text and surfaces, and one confident teal (the internal token name is "scooter") owning links and the primary CTA. A thin teal bar caps the very top and the wordmark carries a small bracket/frame motif (a chart axis). Nothing decorative competes with the charts themselves; the palette in the UI is deliberately quiet so the vivid, muted-editorial chart colours read clearly. Feels: precise, editorial, data-led, trustworthy.

## 2. Color Palette & Roles

Datawrapper ships a large `--color-*` system (a 26-step grey ramp plus named colour ramps). Brand-relevant tokens:

### Text
| Token | Hex | Role / usage |
|---|---|---|
| gray-900 | `#1a1a1a` | Strong headings |
| gray-800 | `#2e2e2e` | Display + section headings, primary ink |
| gray-550 | `#727272` | Secondary text |
| gray-500 | `#808080` | Body copy (weight 500) |
| gray-450 | `#8e8e8e` | Muted / captions |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Canvas, cards |
| gray-025 | `#f9f9f9` | Section tint, white-button hover |
| gray-075 | `#f0f0f0` | Insets |
| gray-100 | `#ebebeb` | Subtle dividers |
| gray-150 | `#dedede` | Hairline borders (most-used border) |
| gray-200 | `#d1d1d1` | Secondary-button border |
| gray-850 | `#242424` | Dark band |
| gray-950 | `#141414` | Footer / dark sections |

### Brand teal — "scooter"
| Token | Hex | Role / usage |
|---|---|---|
| dw-scooter | `#007da0` | Brand accent: links, primary CTA fill (also `scooter-550`) |
| scooter-650 | `#015f7a` | Link + ghost-button hover (darker teal) |
| dw-scooter-light | `#0b9bbf` | Lighter teal |
| scooter-500 | `#008db1` | Teal step |
| scooter-750 | `#004254` | Deep teal (gradient end) |
| dw-scooter-lightest | `#ecf4f6` | Pale teal panel bg |
| dw-scooter-lighter | `#e0eef1` | Pale teal tint |

### Data / accent (editorial chart colours, observed)
| Token | Hex | Role / usage |
|---|---|---|
| orange | `#fc9c00` | Secondary accent / highlight |
| orange-mid | `#ec8d00` / `#dc7f00` | Chart orange / gradient |
| yellow | `#ffd145` | Chart yellow |
| green-400 | `#00b297` | Chart / UI green |

Rule: UI chrome is grey + one teal `#007da0`; keep the vivid categorical colours for the charts themselves, never the chrome. Orange is a secondary accent, not a second brand colour.

## 3. Typography Rules

- Font stack: **Roboto** (workhorse, 1436×) + **Roboto Mono** (labels/code, 38×) + Times (11×, minor). Roboto is an open Google face, so the preview uses the real font.
- Body: 20px / 27px / **500** / `#808080` (note: body runs weight 500 medium, not 400).

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 56 / 64.4 | 700 | -0.14px |
| Section (h2) | 32 / 36.8 | 700 | -0.08px |
| Sub (h3) | 20 / 23 | 700 | normal |
| Body / lead | 20 / 27 | 500 | normal `#808080` |
| Nav links | 16 / 16 | 400 | normal `#007da0` (teal) |
| Nav (bold item) | 16 | 600 | normal |
| Button | 14–16 | 500 | normal |

Patterns: headings are Roboto 700 dark grey with slight negative tracking; body is medium-weight grey. Nav links are teal, not grey. Mono (Roboto Mono) for axis labels / numbers.

## 4. Component Stylings

### Buttons
- **Primary (Start creating)**: bg teal `#007da0`, text `#ffffff`, radius 4px, h 40px, padding `0 16px`, Roboto 16px. Hover: teal darkens (Bulma `is-primary` pattern; ghost/link variants resolve to `#015f7a`).
- **Secondary (Sign in)**: bg `#ffffff`, text `#2e2e2e`, border 1px `#d1d1d1`, radius 4px, h 35px, 14px/500, soft shadow `rgba(0,0,0,.04) 0 1px 2px`. Hover: text → `#141414`, border → `#a9a9a9`.
- **Ghost/nav**: transparent, teal `#007da0` text; hover → `#015f7a`. White variant hover: bg `#f9f9f9`.

### Inputs
- No form field on the marketing hero (the CTA opens the editor). In the editor, inputs use the Bulma `.input` pattern at 4px radius; **`.input:focus` sets `outline:none`** (see states).

### Cards / panels
- White bg, 1px `#dedede` hairline, 4px radius, soft shadow `rgba(0,0,0,.04) 0 1px 2px`; larger feature cards use `rgba(0,0,0,.1) 0 12px 40px -2px`.

### Chart-gallery columns (signature)
- Vertical columns of real chart thumbnails, each column an infinite Svelte `scrolling` marquee at a distinct duration (14.2s / 21.3s / 25.56s …), masked top and bottom with white fade gradients.

### States
- Link hover: color → `#015f7a`.
- Focus: **suppressed** — `.button:focus`, `.input:focus`, `.pagination-link:focus` all set `outline:none` (anti-pattern). Recommend a `2px #007da0` focus ring with 2px offset.

## 5. Layout Principles

- Centered hero (max ~1100–1200px content) with the chart-gallery columns bleeding to the viewport edges on both sides.
- Nav: 64px, white, wordmark (with bracket motif) left, centered dropdown links (Features / Learn / Pricing / Contact), Sign in outline button right. A thin teal bar caps the very top.
- Hero anatomy: 56px display → 20px grey lead → teal "Start creating →" CTA → "no account needed" microcopy.
- Section rhythm alternates white and pale-teal / dark bands; a dotted radial grid (`radial-gradient(#636363 1px, transparent 0)`) textures some panels.
- Dense responsive ladder (see §10) — this is a precisely engineered layout.

## 6. Depth & Elevation

- Radii: `4px` dominant (buttons, cards, inputs, 99×), `50%` for dots/avatars, plus `6px` / `8px` / `16px` for larger cards and one-sided `4px 0 0 4px` pills.
- Shadows: soft and low — `rgba(0,0,0,.04) 0 1px 2px` (91×, buttons/cards); deeper card shadows `rgba(0,0,0,.1) 0 12px 40px -2px`, `0 4px 20px`, `0 5px 25px -5px`.
- Borders: 1px `#dedede` (86×) and 1px `#2e2e2e` (84×, dark-on-light emphasis) plus 1px teal `#007ea0` (18×) for active/selected.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.2s | ease-in-out | buttons, hovers |
| background-color | 0.2s | ease-in-out | fills |
| opacity, color | 0.3s | ease | reveals |
| box-shadow | 0.2s | ease | card lift |
| (marquee) | 14.2–25.56s | linear infinite | chart-gallery scroll |

- Signature: `svelte-*-scrolling` drives the infinite chart-column marquees at staggered durations; reveal keyframes (`revealLeftToRight`, `revealTopToBottom`, `fadeInZoom`) animate content in.
- Easings include an overshoot spring `cubic-bezier(0.34,1.56,0.64,1)` and the material `cubic-bezier(0.4,0,0.2,1)`; also `steps(8)` for a stepped loader.
- Built with **Svelte** (no GSAP/Framer detected). Ships **3 `prefers-reduced-motion` blocks** plus a dedicated `fadeOutOverlayReduced` keyframe — motion is genuinely reduced-motion aware.

## 8. Backgrounds, Effects & WebGL

- White canvas; atmosphere is the scrolling chart thumbnails plus subtle CSS effects.
- Gradients: a teal brand gradient `linear-gradient(90deg, #004254 0%, #007da0 100%)`, an orange gradient `linear-gradient(90deg, #984d00 0%, #dc7f00 100%)`, a shimmer `linear-gradient(110deg,#141414, rgba(255,255,255,.075) 45%, #141414)`, and white fade masks over the marquees.
- A **dotted radial grid** `radial-gradient(#636363 1px, transparent 0)` textures some sections.
- No canvas/WebGL, no background video, no grain. Chart thumbnails are raster/SVG imagery.

## 9. Do's and Don'ts

### Do
- Keep chrome grey + one teal `#007da0`; reserve vivid colour for charts.
- Use Roboto (700 headings with slight negative tracking, 500 grey body, teal 16px nav links); Roboto Mono for numbers/axis labels.
- Make the product the wallpaper: columns of real chart thumbnails auto-scrolling at staggered linear speeds, masked with white fades.
- Buttons and cards at 4px radius with soft `rgba(0,0,0,.04) 0 1px 2px` shadows; hairlines `#dedede`.
- Ship reduced-motion blocks (there are 3) and reduced keyframe variants.
- Cap the page with a thin teal bar; give the wordmark a bracket/frame motif.

### Don't
- Don't colour the chrome beyond teal + a secondary orange; the categorical palette belongs to charts.
- Don't set body at weight 400 — Datawrapper body is Roboto 500.
- Don't suppress the focus ring the way the site does (`outline:none`); use a teal ring instead.
- Don't add gradients or effects that compete with the chart imagery.

## 10. Responsive Behavior

- Dense min/max breakpoint ladder: 359, 480, 512, 560, 575/576, 640, 767/768, 769/770, 960, 1023/1024, 1026, 1199/1200, 1280, 1399/1400, 1749/1750 — a precisely engineered layout with many seams.
- `containerQueries: 0`; `darkSchemeBlocks: 0`, but a theme toggle element is present (`hasDarkToggle: true`) — the editor has themeable chart output; the marketing page is light.
- Captured at desktop 1512px; the chart columns collapse and the nav condenses on narrow widths.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#2e2e2e` · Muted `#808080` · Border `#dedede` · Accent `#007da0`
- Font: Roboto (Mono for numbers) · Body: 20px / weight 500 · Radius: 4px · Control height: 40px (primary) / 35px (secondary)
- Focus: site sets `outline:none` — recommend `2px #007da0` ring · Link hover: `#015f7a`
- Secondary accent: orange `#fc9c00`

<datawrapper-marketing_design_language>
Use the Datawrapper design language: a clean, editorial, newsroom-grade charting tool on a white canvas where the product is the wallpaper — columns of real scatter, map, line and donut chart thumbnails auto-scroll as staggered linear marquees (14–26s) behind a centered hero, masked with white fades. Typography is Roboto throughout (Roboto Mono for numbers/axis labels): 700 dark-grey #2e2e2e headings with slight negative tracking (56/64.4 -0.14px display), body set unusually at weight 500 grey #808080 20/27, and teal #007da0 16px nav links. Chrome is a full grey ramp (#1a1a1a/#2e2e2e ink, #727272/#808080/#8e8e8e muted, #f9f9f9/#ebebeb/#dedede surfaces and hairlines, #141414 footer) plus ONE brand teal, internally "scooter" #007da0, owning links and the primary CTA (going to #015f7a on hover), with pale teal panels #ecf4f6/#e0eef1 and a secondary orange #fc9c00 — all vivid categorical colour reserved for the charts, never the UI. Buttons and cards are 4px radius with soft rgba(0,0,0,.04) 0 1px 2px shadows and #dedede hairlines; a thin teal bar caps the page and the wordmark carries a bracket/axis motif. Motion is short 0.2s ease-in-out transitions plus the scrolling chart marquees, built in Svelte with 3 reduced-motion blocks. Feels: precise, editorial, data-led, trustworthy. Avoid: colouring the chrome beyond teal + a little orange, setting body at weight 400, suppressing the focus ring (the site wrongly uses outline:none — use a #007da0 ring), or effects that compete with the chart imagery.
</datawrapper-marketing_design_language>