Docker Design System

Overview

Docker's marketing homepage does not attempt to impress with color or decoration. Single-Voltage Technical Credibility. The hero is a white surface, a 48px Repro headline, a metric counter showing CVE reduction, and a partner-logo wall. Where Cloudflare announces its brand with a full-canvas orange hero and Vercel uses matte black, Docker uses white and lets the security numbers do the persuasion. The system is built around a single electric-blue voltage (#2560ff) wired to 30+ CSS custom properties — buttons, links, icons, focus rings, tab borders, table accents — making it visually consistent without being visually exciting. This is the same restraint discipline Stripe uses, but without Stripe's serif headlines or mesh gradients.

The two-family typography — Repro for 24–48px display, Inter for everything below — divides responsibility clearly: Repro signals brand identity at the moment of first contact (headline, section h2), Inter carries the reading work (body, labels, nav). Unlike Cloudflare, which uses FT Kunst Grotesk across all tiers, Docker's split acknowledges that a single display family optimized for large sizes is rarely optimal at 14px body.

Conservative-technical rounding: 4px buttons, 8px cards. No pill. No 16px default. The conservatism is a positioning signal — Docker's nearest peer in the dev-tools category, Kubernetes, uses 8px as its only radius; Docker's tighter 4px CTA matches the "tooling" register.

Key Characteristics:

• Pure white canvas ({colors.canvas} — #f9fafb) with {colors.surface-1} (#efefef) for card and code-block backgrounds.
• Single electric-blue voltage ({colors.primary} — #2560ff) across 29 rendered occurrences — the only chromatic brand element.
• High-frequency dark-slate ink ({colors.ink-slate} — #2c333f, 644 occurrences) as the label, subhead, and copy workhorse.
• Repro display family at 24–48px / weight 500–700; Inter body family at 12–20px / weight 400–500.
• Conservative binary rounding: 4px buttons, 8px cards. No larger radius tier.
• 8px base spacing. Section padding at 48×40px. Button at 8×12px.
• Security-credibility positioning: partner-logo grid (Salesforce, Rakuten, HelloFresh, Adobe, Atlassian) and CVE-count metrics rather than decorative illustration.
• Semantic color set fully declared: error red (#ff5757), warning amber (#f8b60f), success green (#38bd7d) — all zero occurrences on the captured marketing surface but live in CSS variables.

Colors

Brand

• Primary ({colors.primary} — #2560ff): frequency 29. Used as text (12), background (8), border (9). The single brand voltage — wired as --buttonPrimaryBackground, --linkColor, --iconColor, --highlightColor, --headlineHighlightedColor, --tabActiveAnimationColor, and 20+ more. Every interactive state on the page resolves to this blue.
• Primary Dark ({colors.primary-dark} — #003db5): frequency 7, all border. The button's 1.5px border color wired as --buttonPrimaryBorder. Creates visible definition on the blue-fill CTA without a separate shadow.
• Primary Hover ({colors.primary-hover} — #0d4df2): declared as --tableHighlightBorderColor. Slightly deeper than the primary voltage — used on hover/focus table row borders.

Text

• Ink ({colors.ink} — #000000): frequency 79. Used as text (42), border (35). Pure black — deployed on headlines and the heavy-contrast tab border. Wired across dozens of focus and active state variables.
• Ink Slate ({colors.ink-slate} — #2c333f): frequency 644 — the dominant body tone. Used as text (343) and border (301). Wired as --labelColor, --subheadColor, --copyColor. The workhorse color: darker than typical body gray but not pure black.
• Ink Secondary ({colors.ink-secondary} — #434c5f): frequency 0 (rendered), declared. Carries --standardCopy, --menuLinkDescriptionColor, disabled button text.
• Ink Muted ({colors.ink-muted} — #6c7e9d): frequency 0 (rendered), declared. Secondary metadata text — input descriptions, placeholder values, card secondary labels.

Surface

• Canvas ({colors.canvas} — #f9fafb): frequency 105. The near-white page floor and default card/button background. Not pure white — the slight off-white reading reduces glare on a page with zero decorative color.
• Surface-1 ({colors.surface-1} — #efefef): frequency 1. Code-block background, secondary section background. Wired as --codeBoxBackgroundColor, --backgroundSecondary.
• Surface-2 ({colors.surface-2} — #e5f2fc): light blue-tinted surface. Used for quote backgrounds and the nav mega-menu button fill. Wired as --quoteBackground, --menuLinkButtonBackgroundColor.

Hairlines

• Hairline ({colors.hairline} — #c8cfda): frequency 13, all border. Card outlines, table borders, tab toggle borders. The dominant separation color.
• Hairline Soft ({colors.hairline-soft} — #a9b4c6): frequency 8, all border. Secondary button border, disabled input border, slider track.

Semantic

• Error ({colors.error} — #ff5757): declared as --inputErrorBorder, --inputRequiredAsteriskColor. Zero rendered occurrences on the marketing surface.
• Warning ({colors.warning} — #f8b60f): declared as --warningCopy, --warningIconFill. Zero rendered occurrences.
• Success ({colors.success} — #38bd7d): declared as --successIconFill, --successCopy. Zero rendered occurrences.
• Error Background ({colors.error-bg} — #fddfdf): declared as --dangerBackground. Zero rendered occurrences.

Typography

Font Families

Two voices: Repro for the display tier (24–48px), carrying the editorial brand identity; Inter for the body tier (12–20px), carrying the reading work. The Repro fallback stack walks Helvetica, Arial, sans-serif; the Inter stack walks Helvetica, Arial, sans-serif identically — the two families share the same fallback, meaning in environments where neither is loaded the page degrades gracefully to system sans.

The split is sharper than Cloudflare's (which uses a single grotesk across all tiers) and more conventional than Spline's (which uses Spline Sans across all tiers). Docker uses one face to signal brand, one face to reduce eye-strain at reading sizes.

Hierarchy

Principles

Repro display tops out at 48px / 500 in the hero. A 48px / 700 variant appears on h2 section headings in the extraction — Docker uses bold weight selectively at the section level rather than the hero level. Inter body at 400 carries the reading register. The negative letter-spacing values (-0.15px to -0.6px) scale proportionally with font size — a standard optical correction that tightens the spacing as size increases.

Note on Font Substitutes

Repro is a proprietary display family. The closest open-source substitute is DM Sans at equivalent weights (the proportions match at 32–48px); Geist is another close option with slightly tighter cap height. Inter is already open-source and requires no substitution.

Layout

Spacing System

• Base unit: 8px (60 occurrences — the dominant module).
• Tokens: {spacing.xs} 6px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 48px.
• Section padding: 48×40px on major editorial sections (from 6px 12px button → 48px 40px section: a 1:40 ratio).
• Button padding: 8×12px — notably compact compared to Cloudflare (12×24px) or Spline (16×24px).
• Card padding: 24px internal padding on content cards.

Grid & Container

• Max content width: ~1080px for the hero and feature sections.
• Hero layout: left column (headline + body + CTA), right column (product screenshot/metric panel). Split roughly 55/45.
• Partner logo wall: horizontal strip of 6–8 partner logos at uniform grayscale treatment below the hero.
• Feature grid: 3-column grid for "Docker Scout," "Docker Build," "Docker Desktop" feature panels with {rounded.sm} 8px cards.
• Security section: 2-column alternating layout — text block left or right, screenshot or metric visual on the opposite side.

Rhythm

The page alternates between editorial prose (headline + 2-3 paragraph body, white canvas) and proof-point grid (logo wall, metric counter, partner testimonial). Unlike Cloudflare's alternating generous/dense bands, Docker's rhythm is more uniform — sections sit at approximately the same vertical cadence, with less dramatic density contrast between bands.

Elevation

The system uses light shadow on interactive elements rather than hairline-only:

• Card hover: {colors.canvas} background shifts to a slightly elevated tone; shadow appears via CSS on --cardBackgroundHover / --shadowColorHover (hsla(0,0%,100%,.25)).
• Nav shadow: --shadowColor: hsla(0,0%,100%,.08) — a very subtle white-glow for the nav bar on dark contexts.
• Focus outline: --buttonPrimaryFocusOutline: {colors.surface-2} — the sky-blue focus ring on primary button focus states. Not visible on the resting marketing surface.
• Tooltip: --tooltipBackgroundColor: {colors.ink} (#000000) — a pure-black tooltip fill.

Shapes

The radius scale is conservative-binary: 4px for interactive elements, 8px for content surfaces.

• {rounded.none} 0px — only for nav borders and inlined typography.
• {rounded.xs} 4px — primary and secondary buttons, input fields, small chips. The tightest functional radius, used on all tap targets.
• {rounded.sm} 8px — content cards, feature panels, nav mega-menu surfaces. The dominant card radius.
• {rounded.full} 9999px — reserved for circular avatar marks and toggle switch thumbs; not used on any marketing-surface CTA.

No 12 / 16 / 20px middle tier. No pill CTA. The entire button vocabulary — primary, secondary, tertiary — uses {rounded.xs} 4px. This is the sharpest CTA rounding in the dev-tools segment; even Kubernetes, which has a similarly technical aesthetic, uses 8px on its buttons. Docker's 4px is a deliberate signal.

Components

button-primary — Electric-blue {colors.primary} fill, canvas text, {rounded.xs} 4px radius, 8×12px padding, 36px height, 1.5px {colors.primary-dark} border. "Get Started" in the top nav is the canonical instance.

button-secondary — Canvas fill, ink text, {rounded.xs} 4px radius, 8×12px padding, 36px height, 1.5px {colors.hairline-soft} border. Used for secondary nav actions and "Learn more" card CTAs.

button-tertiary — Canvas fill, {colors.primary} text, no border, {rounded.xs} 4px. Ghost-button style for inline tertiary actions.

top-nav — Canvas {colors.canvas} surface, slate {colors.ink-slate} link text in {typography.label-md} (14px / 500), 58px height, 20×16px nav-link padding. Houses the Docker whale logo, product nav (Products, Developers, Open Source, Pricing), and right-aligned "Sign in" + "Get Started" cluster.

nav-link — Transparent fill, slate ink, 14px / 500, 20×16px padding. Hover state not captured on the resting surface.

hero-heading — Pure-black {colors.ink} text, {typography.display-xl} (48px / 500). Left-aligned on a white canvas with no background color — the hero is a typographic statement, not a visual scene.

section-heading — Pure-black text, {typography.display-lg} (40px / 500) or {typography.display-md} (32px / 500) depending on section weight.

body-paragraph — {colors.ink-slate} text at {typography.body-lg} (18px / 400) for lead paragraphs; {typography.body-md} (16px / 400) for running text.

card — Canvas fill, {colors.hairline} 1px border, {rounded.sm} 8px radius, 24px padding. Default content card for the feature grid.

card-accent — {colors.surface-2} (#e5f2fc) light-blue tinted fill, {rounded.sm} 8px. Used for highlighted feature tiles and the quote background.

text-input — Canvas fill, ink-slate text, {rounded.xs} 4px radius, 8×12px padding, 36px height, 1px {colors.hairline-soft} border.

tab-active — {colors.ink} (pure black) fill, canvas text, no radius, 12×0px padding. The active tab indicator in the product-feature tabbed panel uses a pure-black fill — a deliberate contrast against the blue button primary.

tab-inactive — Transparent fill, {colors.ink-muted} text, no radius.

logo-chip — Canvas fill, partner logo at {rounded.sm} 8px, 12×20px padding. All partner logos rendered in full color (unlike Cloudflare's monochrome-white logo wall or Spline's monochrome treatment).

footer — Canvas fill, muted text, 48×40px padding, {colors.surface-1} top border. The footer continues the white canvas — no dark reversal like AWS's pitch-black footer.

Do's and Don'ts

Do use {colors.primary} (#2560ff) for every interactive state — button fill, link color, icon fill, focus ring, tab border. The system's internal consistency depends on this voltage appearing exclusively as the interactive signal; splitting it into an accent fill AND a neutral interactive color creates ambiguity.

Do keep the button radius at {rounded.xs} 4px for primary and secondary CTAs. Bumping to 8px blurs the distinction between buttons (4px) and cards (8px). Bumping to a pill loses the "tool, not toy" signal entirely.

Do use Repro (or a DM Sans substitute) only for the 24px+ display tier. Below 24px, Inter's optical warmth at small sizes outperforms Repro's geometric proportions; switching Repro into body text reduces readability.

Do treat the testimonial or partner-logo section as a credibility anchor rather than a design moment. Docker's logo wall renders partner marks in full color (not monochrome) — each partner brand retains its own visual identity, signaling that Docker integrates with real enterprise stacks rather than absorbing them.

Don't introduce a 16px or pill radius tier. The binary 4/8px scale is the system's shape signature; a 16px card or a pill CTA imports a consumer aesthetic that contradicts Docker's dev-tool positioning.

Don't use {colors.surface-2} (#e5f2fc) as a hero background. It is a quote-background and nav-accent tone — applying it to the hero surface makes the page feel like a product highlight rather than an editorial statement.

Don't use weight 700 in Repro above 48px. The largest captured instance at 700 weight is 48px on a section h2; the hero h1 uses 500. Inverting this — 700 on the hero, 500 on the section — breaks the hierarchy.

Don't add a shadow to cards on the resting (non-hover) state. Docker's card system uses hairline borders, not shadows, for the resting elevation. Shadows appear only on hover — adding them to all cards makes the page feel webby rather than native-tool.

Known Gaps

• Hero illustration / screenshot: the right-side panel in the captured hero shows a Docker-branded "Hardened Images" UI. The component renders as a screenshot rather than a tokenized component — its internal colors, typography, and layout are product-surface tokens not exposed on the marketing page.
• Hover and focus state matrix: only the resting state is fully captured. Focus rings ({colors.surface-2} — the sky-blue --buttonPrimaryFocusOutline stop), disabled tints ({colors.hairline} on disabled button background), and active shadow states are declared in CSS but not rendered in the captured surface.
• Dark-variant nav: CSS exposes --menuAltBackgroundColor: #002978 (midnight navy) and --menuAltCopyColor: hsla(0,0%,100%,.8) for an alternate dark navigation state (likely the mega-menu or a sticky scroll variant). This surface is not represented in the resting capture.
• Mobile breakpoints: the marketing page at desktop (1280px+) uses a two-column hero layout and a 3-up feature grid. Below 768px both collapse to single-column; responsive token overrides are not captured.
• Product surfaces (Docker Desktop, Docker Hub): this DESIGN.md captures the marketing site only. Docker Desktop's Electron UI and Docker Hub's web dashboard each carry their own design systems distinct from the marketing surface.
• Animation: section entries appear to animate on scroll (fade-in + translate); easing curves and duration values are not in the extracted static tokens.