UI Skillbook
2

Docker DESIGN.md

Brands

Container tooling with unmistakable blue branding and developer-centric product proof. Docker's public site uses a bright blue palette, white base surfaces, rounded cards, and code/product screenshots that keep the…

Raw DESIGN.md

At a glance

Group
Brands
Main color
#2496edBlue design systems
Fonts
InterJetBrains Mono

Colors in this file

  • #0f172a

    Unnamed

  • #dceaf8

    Unnamed

  • #2496ed

    Unnamed

  • #0b6fc2

    Unnamed

  • #ffffff

    Unnamed

  • #f4faff

    Unnamed

  • #64748b

    Unnamed

Container tooling with unmistakable blue branding and developer-centric product proof. Docker's public site uses a bright blue palette, white base surfaces, rounded cards, and code/product screenshots that keep the experience technical but accessible.

1. Visual Theme & Atmosphere

Overall Aesthetic

Docker feels like developer tooling with product confidence and accessible platform messaging.

Mood & Feeling

  • Developer-first
  • Clean
  • Technical
  • Approachable
  • Platform-oriented

Design Density

Medium density. Platform breadth is balanced with clear sections and cards.

Visual Character

  • Bright Docker blue
  • White and pale-blue surfaces
  • Container and workflow imagery
  • Product screenshots and code examples

2. Color Palette & Roles

TokenHexRole
--docker-blue#2496EDPrimary brand color
--docker-blue-deep#0B6FC2Hover/support
--docker-white#FFFFFFCanvas and cards
--docker-surface#F4FAFFSoft background
--docker-ink#0F172AText
--docker-muted#64748BSecondary text
--docker-border#DCEAF8Borders

3. Typography Rules

Font Stack

css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

Type Scale

Hero 56/700, H1 40/700, H2 30/700, Body 16/400, Small 14/400

Typography Philosophy

Use precise developer-friendly type with clear hierarchy and strong code support.

4. Component Stylings

css.button-primary { background:#2496ed; color:#fff; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:600; }
.button-secondary { background:#fff; color:#0f172a; border:1px solid #dceaf8; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #dceaf8; border-radius:22px; box-shadow:0 12px 24px rgba(15,23,42,.06); }
.code-card { background:#0f172a; color:#fff; border-radius:20px; font-family:var(--font-mono); }

Component Notes

  • Blue brand accents should stay bright and recognizable
  • Code and workflow proof should remain visible

5. Layout Principles

Spacing Scale

4, 8, 12, 16, 24, 32, 48, 64px

Layout Behavior

  • Group by build, ship, and run workflow
  • Support clear developer scanning
  • Use screenshots and diagrams to anchor capability claims

6. Depth & Elevation

Docker uses clean product-card elevation with strong border separation.

7. Do's and Don'ts

Do

  • Keep it developer-native and clear
  • Use blue strongly but structurally
  • Preserve code and product realism

Don't

  • Don’t replace technical proof with generic marketing visuals
  • Don’t muddy the palette with too many extra accents

8. Responsive Behavior

Breakpoints

  • Mobile <768px
  • Tablet 768px-1023px
  • Desktop 1024px+

Responsive Rules

  • Stack code and workflow cards
  • Keep pricing and primary CTA paths obvious

9. Agent Prompt Guide

textDesign this like Docker: bright blue developer-platform branding, white and pale-blue product surfaces, code-aware cards, clean technical typography, and clear build-ship-run workflow storytelling.

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/docker.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "docker" })

Related Design.md files

Channel Talk

Brands · Pretendard

Channel Talk is a customer-service platform that joins live chat, team inbox, calls, marketing, workflows, and AI assistance around one ongoing customer relationship. Its public identity has evolved from a bright…

Unity

Brands · Inter

Creator-platform design with dark technical confidence and game-industry energy. Unity’s current web presence leans on black-and-white contrast, cool slate surfaces, bold product screenshots, and clean…

Zenn (ゼン)

Brands · Hiragino Kaku Gothic ProN

Zenn is a Japanese publishing platform for developers — articles, books and scraps, run by Classmethod. The surface is white on a pale blue-grey #edf2f7, with one saturated blue #3ea8ff doing every action, and it is…

Genie Music

Brands · Spoqa Han Sans

Genie (지니) is the music-streaming service of 케이티지니뮤직 (KT Genie Music), a KT-affiliated company in Seoul whose own history starts in 2000 with the personal music-broadcast site Muzcast.com. The company ran KTF's…

Expo

Brands · Inter

A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink…

Bluesky

Brands · Inter

Decentralized social platform with a clean, airy aesthetic — sky-blue brand accents, white surfaces, and a feed-first interface.

All Design.md filesBrowse by font