Docker Brand Design System Deep Dive

1. Brand Overview

Docker’s brand is built around developer confidence and containerization clarity. The site feels engineered, not decorated — every pixel serves a functional purpose. It’s a brand for people who think in systems, not moods. The vibe: professional, tech-forward, slightly playful in color, but rigid in structure. No whimsical flourishes. This is for developers, DevOps teams, and technical decision-makers.

The blue is the anchor. It’s everywhere — logo, CTAs, link accents — communicating trust and technical stability. White space is generous, giving breathing room for technical copy. Blacks and grays are precise, not muddy, signaling a clean separation between content tiers. You never get the sense that colors are chosen for style alone. They’re tokens in a design system.

Typography is split: Repro for hero headings (brand personality) and Inter for everything else (UI clarity). Inter is a workhorse — modern, legible, no surprises. Repro adds just enough personality without affecting technical readability.

Spacing is disciplined. The 8px grid is rigid, with occasional 4px adjustments. This matches developer expectations: predictable, modular, reusable.

Shadows are minimal — mostly inset for inputs, sometimes large drops for modals. Depth is not the primary visual cue; borders carry weight here.

Overall: Docker’s design language is engineered to scale across docs, dashboards, and marketing. It’s a UI designer’s brand — built for consistency over expression.

2. Color System

2.1 Primary Colors

The main brand color is #2560ff (RGB 37,96,255). This is the Docker blue — bright enough to stand out, saturated enough to hold its own against white backgrounds, but not so neon that it feels cheap. Blue is predictable in tech (trust, stability, intelligence), but Docker’s shade leans toward optimism and modernity. Compare it to IBM’s deeper blue — Docker’s is more agile, less corporate.

They also use #1d63ed (RGB 29,99,237) as a functional variant — slightly darker, used for certain buttons and active states. Think of it as the "action" blue. There’s also #005fcc for hover/focus states — even deeper, for contrast.

2.2 Complete Palette

2.3 Color Relationships

Contrast is solid. #2560ff on white easily meets WCAG AA for normal text (contrast ratio ~8.59:1). Black on white is max contrast. Light gray-blue surfaces keep text readable without killing contrast.

Dark mode isn’t implemented, but the palette could adapt easily: swap white for deep navy, keep blue accents.

2.4 Usage Guide

Works well:

• Primary blue + white text for CTAs.
• White background + black text for content.
• Light gray-blue surfaces with dark gray text for secondary UI.

Avoid:

• Blue text on blue background (kills contrast).
• Overusing dark gray for body copy — drops accessibility.
• Transparent blue over blue surfaces — muddles brand clarity.

3. Typography

3.1 Font Families

Two main families:

• Repro, fallback Helvetica, Arial — custom brand type for headings.
• Inter, fallback Helvetica, Arial — UI and body text.

No Google Fonts or Adobe Fonts loaded — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

Repro is only for big, brand-level headings. Inter handles everything else, from H2 down to captions. Sizes drop in predictable increments — no random jumps — so hierarchy feels consistent. Small weights (400, 500) keep body text light; bold weights (700) are reserved for emphasis.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints are granular: 400px, 425px, 476px, 530px, 550px, 600px, 769px, 782px, 890px, 896px, 897px, 1023px, 1024px, 1280px. This suggests tailored layouts for device ranges rather than generic mobile/tablet/desktop.

5. Visual Elements

Border Radius

Values range from sharp (1px) to rounded (50px). Common:

• 2px — badges, buttons
• 4px — buttons
• 8px — images, buttons
• 20px — switches
• 50px — search field pills

This mix means: small radii for functional UI, large radii for interactive comfort.

Shadows

Mostly inset shadows for inputs (rgba(0,0,0,0) 0px 0px 1px 1px inset). Occasional large drop shadows (rgba(0,0,0,0.14) 0px 50px 40px 0px) for modals.

Borders

Dominant style: 1px solid #c8cfda for inputs/divs. Blue borders for active buttons (#1d63ed, #0,61,181). Borders are used more than shadows for separation.

6. Components

6.1 Buttons

Primary (Blue)

Default: background #2560ff, text white, padding 8px 12px, radius 4px, border 1px solid #003db5, inset shadow rgb(192,224,250). Hover: background white, text #2285f7, slight translateX. Active: background var(--menuLinkActive), translateY(-4px). Focus: outline black 1px, background #1eaedb, text white.

Secondary (White)

Default: background white, text black, padding 8px 12px, radius 4px, border #a9b4c6. Hover: background white, text #2285f7. Focus: same as primary.

CTA Link-style

Default: transparent background, text blue, no padding, no visible border. Hover: background white, text #2285f7.

Consent Button (Green)

Default: background #efefef, text #68b631, padding ~10px, border #68b631.

6.2 Links

Five variants: blue, dark gray, black, white, muted gray. All remove underline, hover changes to #3860be.

6.3 Forms

Inputs: borders 1px solid #c8cfda, inset shadows. Focus likely changes border color to blue.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-primary: #2560ff;
  --color-blue-secondary: #1d63ed;
  --color-blue-deep: #005fcc;
  --color-gray-light-blue: #c8cfda;
  --color-gray-dark: #696969;
  --color-gray-medium: #555555;
  --color-blue-transparent: rgba(37,96,255,0.05);

  /* Typography */
  --font-repro: "Repro", Helvetica, Arial;
  --font-inter: "Inter", Helvetica, Arial;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-20: 20px;
  --radius-50: 50px;

  /* Shadows */
  --shadow-inset-light: rgba(0,0,0,0) 0px 0px 1px 1px inset;
  --shadow-inset-blue: rgb(192,224,250) 0px 0px 1px 1px inset;
  --shadow-drop-large: rgba(0,0,0,0.14) 0px 50px 40px 0px;
}

8. AI Coding Assistant Prompt

# Docker Design System Specification

You are a Docker design expert. Build UIs matching their visual language exactly.

## Brand Context
Docker’s UI is engineered, minimal, and functional. Blue is the brand anchor, white space is generous, typography is pragmatic. Borders define depth more than shadows.

## Color Palette
- Black: #000000 — text, icons
- White: #ffffff — backgrounds, text on dark buttons
- Docker Blue: #2560ff — logo, primary buttons, CTAs
- Light Gray-Blue: #c8cfda — surfaces, input borders
- Dark Gray: #696969 — secondary text
- Medium Gray: #555555 — icons, secondary UI
- Action Blue: #1d63ed — buttons, active states
- Deep Blue: #005fcc — hover/focus
- Transparent Blue: rgba(37,96,255,0.05) — hover fills

## Typography
- Headings: "Repro", Helvetica, Arial
- Body/UI: "Inter", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 500/700 | 1.20 | Page titles |
| H2 | 40px | 500 | 1.20 | Section headings |
| H3 | 32px | 500 | 1.20 | Subsections |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 14px | 500-700 | 1.3 | CTAs |
| Caption | 12-14px | 400-700 | 1.3-1.5 | Meta info |

## Spacing & Grid
Base: 8px
Scale: 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 28px, 32px, 48px
Use multiples for padding, gaps, margins.

## Border Radius
- xs: 1px — spans
- sm: 2px — badges, buttons
- md: 4px — buttons
- lg: 8px — images, buttons
- xl: 20px — switches
- full: 50px — pill search

## Shadows & Depth
- Inset light: rgba(0,0,0,0) 0px 0px 1px 1px inset
- Inset blue: rgb(192,224,250) 0px 0px 1px 1px inset
- Large drop: rgba(0,0,0,0.14) 0px 50px 40px 0px

## Component Specifications
### Primary Button
Default: bg #2560ff, color #fff, padding 8px 12px, radius 4px, border #003db5, inset shadow blue
Hover: bg #fff, color #2285f7, translateX 0.125em
Active: bg var(--menuLinkActive), translateY -4px
Focus: outline black 1px, bg #1eaedb, color #fff

### Secondary Button
Default: bg #fff, color #000, border #a9b4c6, radius 4px
Hover: bg #fff, color #2285f7
Focus: same as primary

### Link
Default: color #2560ff, no underline
Hover: color #3860be

### Input Field
Default: border 1px solid #c8cfda, inset shadow light
Focus: border-color #1d63ed

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 476px, 530px, 550px, 600px, 769px, 782px, 890px, 896px, 897px, 1023px, 1024px, 1280px

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus: clear outline with brand color
- Loading: opacity 0.5

## DO
- Use ONLY palette colors
- Maintain 8px grid
- Use Repro for headings, Inter for body/UI
- Apply correct border radius per component
- Keep link underline off, change color on hover

## DON'T
- Use shadows for depth unless specified
- Mix rounded and sharp corners arbitrarily
- Invent new colors
- Overuse dark gray for body text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #2560ff;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #003db5;
  box-shadow: rgb(192,224,250) 0px 0px 1px 1px inset;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 14px;
  transition: all 150ms ease;
}
.btn-primary:hover { background: #fff; color: #2285f7; transform: translateX(0.125em); }
.btn-primary:focus { outline: 1px solid #000; background: #1eaedb; color: #fff; }
```

### Card
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #c8cfda;
}
```

### Input
```css
.input {
  border: 1px solid #c8cfda;
  border-radius: 4px;
  padding: 8px;
  font-family: var(--font-inter);
}
.input:focus { border-color: #1d63ed; outline: none; }
```

9. Summary

TL;DR: Docker’s design system is engineered for clarity and scalability. Blue anchors the brand, borders define depth, typography is pragmatic. The 8px grid keeps everything predictable.

Brand Keywords: tech-precise, developer-focused, blue-trust, border-driven, grid-disciplined