Docker

---
name: docker-com-design-system
source: https://www.docker.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  text-muted: "#949494"
  surface: "#444444"
  accent: "#2560ff"  # blue
  accent-2: "#e7eaef"  # pale-blue
  accent-3: "#434c5f"  # blue
fonts:
  primary: "Inter"
  mono: "JetBrains Mono"
---

# Docker: Accelerated Container Application Development — Design System

Extracted from **https://www.docker.com/** on 2026-07-03.

> Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 164 light against 49 dark. The palette is chromatic: 12 saturated values against 4 neutrals, led by blue (`#2560ff`). **Inter** carries the interface; **JetBrains Mono** handles code and data. Geometry mixes sharp corners (.25rem) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 60% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 164:49). Don't flip individual sections to the opposite mode.
- `.25rem` is the workhorse radius (x10); treat the other radii as exceptions, not options.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.
- `JetBrains Mono` is the monospace — keep it for code, data, and metadata roles.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 164 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-500` | `#949494` | 2 | **text-muted** — most-used mid-luminance neutral |
| `neutral-800` | `#444444` | 2 | **surface** — neutral closest to canvas luminance |
| `neutral-950` | `#000000` | 47 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `blue` | `#2560ff` | 80 | **accent** — most-used chromatic color |
| `pale-blue` | `#e7eaef` | 50 | **accent-2** — supporting chromatic color |
| `blue-2` | `#434c5f` | 28 | **accent-3** — supporting chromatic color |
| `pale-cyan` | `#c0e0fa` | 24 | — |
| `blue-3` | `#c8cfda` | 24 | — |
| `blue-4` | `#8b99b2` | 21 | — |
| `blue-5` | `#6c7e9d` | 16 | — |
| `cyan` | `#8bc7f5` | 16 | — |
| `blue-6` | `#a9b4c6` | 16 | — |
| `deep-cyan` | `#0e1217` | 15 | — |
| `blue-7` | `#003db5` | 14 | — |
| `cyan-2` | `#1c90ed` | 12 | — |

## Typography

**Inter** is the primary interface face; **JetBrains Mono** is the monospace. Full list by usage:

| Family | Usage |
| --- | --- |
| Inter | 137 |
| Manrope | 38 |
| Repro | 31 |
| JetBrains Mono | 19 |
| IBM Plex Mono | 15 |
| Jost | 2 |
| Roboto Flex | 1 |
| Mali | 1 |

**Size scale (px):** `10`, `11.5`, `12`, `13`, `14`, `16`, `18`, `20`, `24`, `32`, `40`, `48`

**Weights in use:** `100` (x7), `200` (x3), `400` (x83), `500` (x87), `600` (x18), `700` (x31)

**Line-heights (unitless):** `0.68`, `1`, `1.05`, `1.1`, `1.3`, `1.5`, `1.55`, `1.6`

**Letter-spacing values:** `-.6px`, `-.5px`, `-.25px`, `-.225px`, `-.2px`, `-.15px`

## Spacing

Most-used values (px): `1`, `6`, `8`, `10`, `12`, `16`, `20`, `24`, `28`, `32`, `40`, `48`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.25rem` | 10 |
| `radius-md` | `10px` | 2 |
| `radius-lg` | `14px` | 5 |
| `radius-xl` | `1rem` | 2 |
| `radius-2xl` | `18px` | 3 |
| `radius-3xl` | `22px` | 2 |
| `radius-4xl` | `12.5rem` | 2 |
| `radius-full` | `50%` | 6 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 .692px 1.385px 0 rgba(0,0,0,.2)` (x4)
- `shadow-md` — `0 1px 2px rgba(15, 23, 42, 0.03)` (x2)
- `shadow-lg` — `0 50px 40px 0 rgba(0,0,0,.14)` (x1)
- `shadow-xl` — `0 2px 5px 0 rgba(0,0,0,.05)` (x1)
- `shadow-2xl` — `unset` (x1)
- `shadow-3xl` — `0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 80px -20px rgba(0,0,0,0.7), 0 8px 24px -8px rgba(0,0,0,0.5)` (x1)

## Breakpoints

`424px`, `425px`, `499px`, `500px`, `600px`, `640px`, `767px`, `768px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #2560ff */
  color: var(--color-canvas); /* #ffffff — contrast 5.0:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.modal {
  background: var(--color-surface); /* #444444 */
  border-radius: .25rem;
  box-shadow: var(--shadow-3xl); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #000000 */
}

.input-error {
  /* no red exists in the mined palette — this site does not expose an error color in its CSS. */
  /* Introduce one deliberately rather than borrowing a random red; keep saturation near the accent's. */
}
```

## Observations

- 4 of 16 extracted colors are neutrals.
- 6 distinct shadows; the softest reaches 0px blur.
- 8 breakpoints, from 424px to 768px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --imageHeight: 3.0625rem;
  --imageMaxWidth: 8rem;
  --imageMinWidth: 2.625rem;
  --imageContainerPadding: 2.5rem;
  --backgroundColor: transparent;
  --logoColor: #00153c;
  --backgroundSecondary: #e7eaef;
  --cardBackgroundColor: #f9fafb;
  --cardBackgroundHover: #fff;
  --borderColor: #c8cfda;
  --shadowColor: hsla(0,0%,100%,.08);
  --shadowColorActive: hsla(0,0%,100%,.5);
  --shadowColorHover: hsla(0,0%,100%,.25);
  --highlightColor: #2560ff;
  --eyebrowColor: #fff;
  --headlineColor: #000;
  --subheadColor: #2c333f;
  --copyColor: #2c333f;
  --copyColor2: #566581;
  --linkColor: #2560ff;
  --inlineCodeBackgroundColor: #e7eaef;
  --inlineCodeBorderColor: #c8cfda;
  --headlineHighlightedColor: #2560ff;
  --entryTitleColor: blue800;
  --listItemColor: #2560ff;
  --arrow-button-icon: url('data:image/svg+xml;
  --search-icon: url('data:image/svg+xml;
  --chevron-right-solid-icon: url('data:image/svg+xml;
  --buttonTextDecoration: "none";
  --buttonPrimaryBorder: #003db5;
  --buttonPrimaryBorderWidth: 1.5px;
  --buttonPrimaryBackground: #2560ff;
  --buttonPrimaryText: #fff;
  --buttonPrimaryShadow: #c0e0fa;
  --buttonPrimaryHoverBorder: transparent;
  --buttonPrimaryHoverBackground: #2560ff;
  --buttonPrimaryHoverText: #fff;
  --buttonPrimaryHoverShadow: #c0e0fa;
  --buttonPrimaryActiveBorder: transparent;
  --buttonPrimaryActiveBackground: #2560ff;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.