W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Docker
Docker, Inc. is the company behind the Docker container engine, Docker Desktop, Docker Hub, and a developer-platform suite for building and shipping containerized applications. The brand identity is anchored on Docker Blue (#2496ED) — the fill of the Moby whale mark — paired with a deeper Navy used on dark-canvas marketing and on Docker Hub. The voice is developer-direct and workflow-forward: short verbs, runnable commands, and a strong preference for the live `docker run` over the marketing abstraction.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/docker/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/docker/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Docker
Docker, Inc. is the company behind the Docker container engine, Docker Desktop, Docker Hub, and a developer-platform suite for building and shipping containerized applications. The brand identity is anchored on Docker Blue (#2496ED) — the fill of the Moby whale mark — paired with a deeper Navy used on dark-canvas marketing and on Docker Hub. The voice is developer-direct and workflow-forward: short verbs, runnable commands, and a strong preference for the live docker run over the marketing abstraction.
Tags: tech, containers, docker, devops, infrastructure
Atoms
Palette
Docker · [email protected] · Proprietary — All Rights Reserved
Docker brand palette anchored on Docker Blue (#2496ED) — the signature blue of the Moby whale logo and the principal accent across docker.com and Docker Desktop. The palette pairs Docker Blue with a deeper Navy used in dark-canvas marketing and on Docker Hub chrome, plus a Material-style neutral ramp for body copy and UI surfaces.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
docker-blue |
Docker Blue | #2496ED |
docker-blue-bright |
Docker Blue Bright | #0DB7ED |
docker-navy |
Docker Navy | #0A1F44 |
docker-navy-deep |
Docker Navy Deep | #06122A |
docker-blue-dark |
Docker Blue Dark | #1769A6 |
docker-ink |
Docker Ink | #17191E |
docker-gray |
Docker Gray | #677285 |
docker-gray-light |
Docker Gray Light | #8993A5 |
docker-surface |
Docker Surface | #F4F6F9 |
docker-border |
Docker Border | #E1E2E6 |
docker-white |
Docker White | #FFFFFF |
docker-success |
Docker Success | #1CB97A |
docker-warning |
Docker Warning | #F2A33A |
docker-error |
Docker Error | #E2574C |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
docker-white |
#FFFFFF |
surface |
docker-surface |
#F4F6F9 |
surface-elevated |
docker-white |
#FFFFFF |
text-primary |
docker-ink |
#17191E |
text-secondary |
docker-gray |
#677285 |
text-tertiary |
docker-gray-light |
#8993A5 |
primary |
docker-blue |
#2496ED |
primary-hover |
docker-blue-dark |
#1769A6 |
accent |
docker-blue-bright |
#0DB7ED |
accent-hover |
docker-blue |
#2496ED |
warning |
docker-warning |
#F2A33A |
warning-hover |
docker-error |
#E2574C |
error |
docker-error |
#E2574C |
success |
docker-success |
#1CB97A |
border |
docker-border |
#E1E2E6 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
docker-navy-deep |
#06122A |
surface |
docker-navy |
#0A1F44 |
surface-elevated |
docker-blue-dark |
#1769A6 |
text-primary |
docker-white |
#FFFFFF |
text-secondary |
docker-surface |
#F4F6F9 |
text-tertiary |
docker-gray-light |
#8993A5 |
primary |
docker-blue-bright |
#0DB7ED |
primary-hover |
docker-blue |
#2496ED |
accent |
docker-blue |
#2496ED |
accent-hover |
docker-blue-bright |
#0DB7ED |
warning |
docker-warning |
#F2A33A |
warning-hover |
docker-error |
#E2574C |
error |
docker-error |
#E2574C |
success |
docker-success |
#1CB97A |
border |
docker-blue-dark |
#1769A6 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
docker-blue |
#2496ED |
on-identity |
docker-white |
#FFFFFF |
primary |
docker-blue |
#2496ED |
primary-hover |
docker-blue-dark |
#1769A6 |
accent |
docker-blue-bright |
#0DB7ED |
accent-hover |
docker-blue |
#2496ED |
background |
docker-white |
#FFFFFF |
surface |
docker-surface |
#F4F6F9 |
surface-elevated |
docker-white |
#FFFFFF |
text-primary |
docker-ink |
#17191E |
text-secondary |
docker-gray |
#677285 |
text-tertiary |
docker-gray-light |
#8993A5 |
chrome |
docker-navy |
#0A1F44 |
chrome-deep |
docker-navy-deep |
#06122A |
mark |
docker-blue |
#2496ED |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (4)
colorChoice → logo.whale.fill
- allowed: docker-blue, docker-white
- forbidden: docker-blue-bright, docker-blue-dark, docker-navy
The Moby whale renders in Docker Blue (#2496ED) or reversed white. The hover Docker Blue Dark, the marketing-illustration bright cyan, and the Docker Navy chrome are interactive-state and canvas tokens — none are valid mark fills.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, whale-detached-from-wordmark, gradient-fill
Docker's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the Moby whale mark. The whale must not be detached from the Docker wordmark on shared lockups, and gradient fills are not part of the published brand system.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Docker Ink (#17191E) on Docker White gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on docker.com surfaces.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Docker Desktop and the docker.com marketing surfaces both target AA as the floor for accessibility across developer tooling.
⚠️ warning (1)
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Docker Blue on Docker White sits around 3.6:1 — it clears AA-large for headlines and large interactive text but falls short of AA for body-sized text. Use Docker Blue as a CTA / heading color, not for body copy on white.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: docker-navy, docker-white, docker-surface
- doesNotPairWith: docker-warning, docker-error
Docker Blue pairs cleanly against the navy chrome and the white canvas. Pairing the brand blue directly with the warning amber or error red on the same surface creates a status-color conflict that competes with the brand voice.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Docker's marketing surfaces use Inter for both heading and body. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source: https://www.docker.com/company/newsroom/media-resources/
- License:
Proprietary — All Rights Reserved - Attribution: Docker, the Docker logo, the Moby whale, Docker Desktop, and Docker Hub are trademarks of Docker, Inc. Brand colors and identity guidance documented here are derived from Docker's media-resources page (docker.com/company/newsroom/media- resources/) and the visible style values across docker.com and Docker Desktop.
- Imported:
2026-05-18 - Notes: Brand-atoms' read of Docker's publicly available brand-resources page. This file is not an official Docker brand-guidelines document. The Moby whale is one of the most-protected open-source-adjacent marks in developer tooling; no asset files are bundled here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Docker
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Docker
A clear hierarchy in Docker's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ docker-blue-bright #0DB7ED accent-hover
→ docker-blue #2496ED background
→ docker-white #FFFFFF chrome
→ docker-navy #0A1F44 chrome-deep
→ docker-navy-deep #06122A identity
→ docker-blue #2496ED mark
→ docker-blue #2496ED on-identity
→ docker-white #FFFFFF primary
→ docker-blue #2496ED primary-hover
→ docker-blue-dark #1769A6 surface
→ docker-surface #F4F6F9 surface-elevated
→ docker-white #FFFFFF text-primary
→ docker-ink #17191E text-secondary
→ docker-gray #677285 text-tertiary
→ docker-gray-light #8993A5 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from docker)
Light mode (15 roles)
accent
→ docker-blue-bright accent-hover
→ docker-blue background
→ docker-white border
→ docker-border error
→ docker-error primary
→ docker-blue primary-hover
→ docker-blue-dark success
→ docker-success surface
→ docker-surface surface-elevated
→ docker-white text-primary
→ docker-ink text-secondary
→ docker-gray text-tertiary
→ docker-gray-light warning
→ docker-warning warning-hover
→ docker-error Dark mode (15 roles)
accent
→ docker-blue accent-hover
→ docker-blue-bright background
→ docker-navy-deep border
→ docker-blue-dark error
→ docker-error primary
→ docker-blue-bright primary-hover
→ docker-blue success
→ docker-success surface
→ docker-navy surface-elevated
→ docker-blue-dark text-primary
→ docker-white text-secondary
→ docker-surface text-tertiary
→ docker-gray-light warning
→ docker-warning warning-hover
→ docker-error Rules (7 typed constraints)
error · 4 rules
colorChoice logo.whale.fill allowed docker-blue, docker-white forbidden docker-blue-bright, docker-blue-dark, docker-navy The Moby whale renders in Docker Blue (#2496ED) or reversed white. The hover Docker Blue Dark, the marketing-illustration bright cyan, and the Docker Navy chrome are interactive-state and canvas tokens — none are valid mark fills.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, whale-detached-from-wordmark, gradient-fill Docker's brand guidelines explicitly prohibit altering the proportions, color, or orientation of the Moby whale mark. The whale must not be detached from the Docker wordmark on shared lockups, and gradient fills are not part of the published brand system.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Docker Ink (#17191E) on Docker White gives ~17:1 — well above WCAG 2.1 Level AA. The rule encodes the floor for any new foreground/background pairing on docker.com surfaces.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Docker Desktop and the docker.com marketing surfaces both target AA as the floor for accessibility across developer tooling.
warning · 1 rule
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Docker Blue on Docker White sits around 3.6:1 — it clears AA-large for headlines and large interactive text but falls short of AA for body-sized text. Use Docker Blue as a CTA / heading color, not for body copy on white.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith docker-navy, docker-white, docker-surface doesNotPairWith docker-warning, docker-error Docker Blue pairs cleanly against the navy chrome and the white canvas. Pairing the brand blue directly with the warning amber or error red on the same surface creates a status-color conflict that competes with the brand voice.
fontPairing typography.heading requires body minSizeRatio 1.5 Docker's marketing surfaces use Inter for both heading and body. Keep headings at least 1.5× body to preserve hierarchy when one family does both jobs.
Provenance
- Source
- https://www.docker.com/company/newsroom/media-resources/
- License
Proprietary — All Rights Reserved- Attribution
- Docker, the Docker logo, the Moby whale, Docker Desktop, and Docker Hub are trademarks of Docker, Inc. Brand colors and identity guidance documented here are derived from Docker's media-resources page (docker.com/company/newsroom/media- resources/) and the visible style values across docker.com and Docker Desktop.
- Imported
2026-05-18- Notes
- Brand-atoms' read of Docker's publicly available brand-resources page. This file is not an official Docker brand-guidelines document. The Moby whale is one of the most-protected open-source-adjacent marks in developer tooling; no asset files are bundled here.