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 auto-scroll as infinite Svelte marquees at staggered speeds (14–26s), masked top and sides with white fades. Chrome is deliberately quiet so the vivid muted-editorial chart colours read clearly — a white canvas, Roboto throughout (Roboto Mono for numbers and axis labels), a full 26-step grey ramp for text and surfaces, and ONE confident teal the design system names “scooter” (#007da0) owning links and the primary CTA, darkening to #015f7a on hover. A thin teal bar caps the very top and the wordmark carries a small bracket/axis motif. Type is Roboto 700 dark-grey #2e2e2e headings with slight negative tracking (56/64.4 -0.14px display) over body that runs unusually at weight 500 grey #808080, with teal 16px nav links. Buttons and cards sit at a 4px radius with soft rgba(0,0,0,.04) 0 1px 2px shadows and 1px #dedede hairlines; the primary is a teal 40px fill, the secondary a white 35px button with a #d1d1d1 border. The vivid categorical palette — orange #fc9c00, yellow #ffd145, green #00b297 and the teal ramp — is reserved entirely for the charts and never leaks into the chrome. Motion is a short all-0.2s-ease-in-out house transition plus the chart-gallery scroll and reveal keyframes with an overshoot spring cubic-bezier(0.34,1.56,0.64,1); the site ships three reduced-motion blocks. One captured anti-pattern: focus is suppressed site-wide with outline:none (a 2px teal ring is the recommended replacement). Built in Svelte on a dense min/max breakpoint ladder from 359 to 1750.
⚠ needs-dashboard
Browse Datawrapper in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
Datawrapper ships a large --color-* system (a 26-step grey ramp plus named colour ramps). Brand-relevant tokens:
| 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 |
| 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 |
| 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 |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.