Docker

---
version: alpha
name: Docker-design-analysis
description: Docker's design language is a bright, technical interface anchored on the signature whale blue `#2496ed` and a secondary aqua `#0db7ed` against clean white and deep navy surfaces. It pairs geometric shapes with a friendly, rounded visual tone, and uses the blue/aqua duo for brand moments, primary actions, and data visualization.

colors:
  primary: "#2496ed"
  primary_dark: "#1d63ed"
  secondary: "#0db7ed"
  secondary_dark: "#0a85c9"
  navy: "#002f6c"
  navy_deep: "#0b214a"
  canvas: "#ffffff"
  surface: "#f5f7fa"
  surface_2: "#eef1f5"
  fg_default: "#1f2933"
  fg_muted: "#616e7c"
  border_default: "#e4e7eb"
  on_primary: "#ffffff"
  on_navy: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Geomanist", system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Docker

## 1. Visual Theme & Atmosphere

Docker's interface is bright, technical, and confident — a friendly face on developer infrastructure. The whale-blue `#2496ed` and aqua `#0db7ed` pair against a clean white canvas with deep navy `#002f6c` for contrast moments. The tone is approachable and modern, avoiding the coldness of typical infra tools.

## 2. Color System

- **Docker blue** `#2496ed` — primary buttons, links, active states.
- **Aqua** `#0db7ed` — secondary accents, gradients, and chart series.
- **Navy** `#002f6c` / `#0b214a` — headers, footers, dark feature sections.
- Neutrals `#ffffff` / `#f5f7fa` / `#eef1f5` with hairlines `#e4e7eb`; text `#1f2933`, muted `#616e7c`.

## 3. Typography

Geomanist (system fallback) with a geometric, slightly rounded character. Headlines are medium-to-bold with tight tracking; body at 16px/1.6. The system reads friendly and technical at once.

## 4. Components & Shape

Buttons use full-radius pills or 8px rounded rectangles; the primary is a solid Docker blue. Cards are clean white boxes with 8px radius and soft shadows. Terminal/code blocks use the deep navy surface with monospace type. Diagrams and illustrations lean on geometric line work with the blue/aqua palette.

## 5. Layout & Spacing

A generous 8px grid with 16/24/32/48 spacing tokens. Marketing surfaces are airy and centered; product surfaces (Docker Desktop, Hub) are denser but still breathe. The header is a clean white bar with a bold blue CTA.

## 6. Motion

Friendly and subtle: buttons lift slightly on hover, diagrams animate their connectors, and charts draw in. Durations 200-300ms with a gentle ease, reinforcing approachability.