Kubernetes Design System

Overview

Kubernetes.io operates on a design system most commercial brands would never accept: Bootstrap 5 with a color-theme override. Open-Source Honesty. The page announces itself without commercial artifice — no bespoke typeface, no hero gradient, no brand illustration. What it has is a single royal-blue voltage (#326ce5) wired to Bootstrap's --bs-primary and --bs-link-color, Open Sans across all text tiers, a near-black KubeCon event banner as the above-fold centrepiece, and an 8px default card radius. The system is technically readable as "Bootstrap project with a theme" — which is exactly what it is.

The contrast with Docker is instructive. Docker targets the same container-ecosystem audience but uses a commercial design system (Repro + bespoke blue + 4px rounding) to signal product maturity. Kubernetes uses Bootstrap + Open Sans to signal community stewardship. For a CNCF graduated project, the open-source aesthetic is a form of brand alignment: the design communicates that the project belongs to its community, not to a vendor. Where Vercel and Cloudflare use distinctive design systems to assert commercial brand authority, Kubernetes uses Bootstrap defaults to assert technical credibility.

The page's most distinctive visual move is the KubeCon event-announcement banner: a near-black (#13110f) full-width panel with white 32px / 700 Open Sans text, two event-date chips in the Bootstrap secondary gray, and a gradient background overlay. It is the only dark surface on the page — the rest of the system is white canvas + hairline borders + blue links.

Key Characteristics:

• White canvas ({colors.canvas} — #ffffff) with {colors.surface-1} (#e9e9e9) for hairline borders and section dividers.
• Single royal-blue voltage ({colors.primary} — #326ce5) wired as --bs-primary and --bs-link-color across 44 rendered occurrences.
• Near-black event banner ({colors.nav-dark} — #13110f) as the only dark surface — the page's maximum chromatic contrast moment.
• Open Sans across all tiers, weight 400 for body and 700 for headings — no display/body family split.
• Bootstrap 5 token structure: --bs-* prefixed custom properties, standard Bootstrap radius values.
• 8px default radius (12 occurrences), 6px on smaller chips (1 occurrence), 20px on select surfaces (1 occurrence).
• No shadow system visible in the captured surface — hairline borders carry all elevation work.
• CNCF ecosystem positioned through case-study section (Spotify, Pinterest) and footer affiliation, not through illustration.

Colors

Brand

• Primary ({colors.primary} — #326ce5): frequency 44. Used as text (22) and border (22). Wired as --bs-primary, --bs-link-color. Every rendered link, nav logo text, and interactive border resolves to this royal blue. The site's themeColor metadata declares #326de6 — one step brighter, possibly the logo's lighter blue.
• Primary Hover ({colors.primary-hover} — #234ca0): declared as --bs-link-hover-color. The darker navy hover state for links. Zero rendered occurrences in the resting capture.

Text

• Ink ({colors.ink} — #212529): frequency 192. Used as text (96) and border (96). The dominant body text and border tone. Wired as --bs-body-color, --bs-gray-900. Near-black but with a cool gray tint, not pure black.
• Ink Secondary ({colors.ink-secondary} — #495057): frequency 4. Secondary text and the event-date chip background. Wired as --bs-secondary, --bs-gray-700.
• Ink Muted ({colors.ink-muted} — #6c757d): frequency 2. Muted text — captions, footnote references. Wired as --bs-gray, --bs-gray-600.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 109. The page floor, card fills, and content surfaces. Pure white. Wired as --bs-body-bg, --bs-white.
• Surface-1 ({colors.surface-1} — #e9e9e9): frequency 59. Used as text (24), background (11), and border (24). The dominant hairline tone — card outlines, section dividers, grid separators. Wired as --bs-border-color, --bs-gray-200, --bs-gray-300.
• Nav Dark ({colors.nav-dark} — #13110f): frequency 1, background only. The KubeCon event-announcement banner — the page's single near-black surface.

Brand Accent (logo gradient only)

• Logo Amber ({colors.logo-amber} — #eeb32d): frequency 1, in a gradient. Appears only as a gradient stop — the helm-wheel logo's amber-gold band in the CSS gradient decoration. Does not appear in any structural surface.

Hairlines

• Hairline ({colors.hairline} — #e9e9e9): the dominant card border tone, shared with surface-1.
• Hairline Dark ({colors.hairline-dark} — #ced4da): declared as --bs-gray-400. Used for denser-contrast borders.

Shadow

• Shadow ({colors.shadow} — #000000): frequency 1, shadow only. Wired as --bs-black, --bs-border-color-translucent (rgba). The system uses a single translucent-black shadow token.

Typography

Font Family

A single voice: Open Sans across every tier. The font stack is declared in both --bs-font-sans-serif and --bs-body-font-family CSS variables identically, walking through -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol. There is no display family split (contrast with Docker's Repro + Inter or Cloudflare's FT Kunst Grotesk + Apercu Mono Pro). Open Sans does all the work, differentiated only by weight: 400 for body, 500 for headings and nav links, 700 for display headings and bold labels.

Open Sans is an open-source Google Font — no substitution required for any standard development environment.

Hierarchy

Principles

Body text runs primarily at 14px — smaller than most commercial SaaS marketing sites (16px is more typical), consistent with a documentation-first project where content density is expected. The 32px / 700 display heading uses weight 700 — the heaviest weight in the system and the system's only bold display moment. Unlike Cloudflare (500 display, track-tight) or Spline (500 display, moderate), Kubernetes uses weight 700 at the section level and 400 at the body level, with 500 used only for headings and nav labels.

Note on Font Substitutes

Open Sans is freely available at fonts.google.com and requires no substitution. If a self-hosted alternative is needed for performance reasons, Source Sans Pro (Adobe's open-source humanist sans) is optically close at the same sizes and weights.

Layout

Spacing System

• Base unit: 8px and 16px (both appearing 27 times — tied for most-frequent spacing value).
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 20px · {spacing.lg} 60px · {spacing.xl} 72px · {spacing.2xl} 128px.
• Hero banner padding: 32×16px on the event-announcement panel.
• Section padding: 60px vertical for major section breaks.
• Header top padding: 128px top on the hero content area, from the extracted 128px 0px 32px compound value.

Grid & Container

• Max content width: ~1296px on the KubeCon banner (from extracted element width); ~1200px on body sections.
• Hero: the KubeCon event banner spans full width, near-black background, centered headline + event-location chips + CTA.
• Kubernetes Features grid: 3-column (desktop) or 2-column grid of feature tiles covering service discovery, load balancing, storage orchestration, self-healing, secret management, horizontal scaling.
• Case Studies section: 3–4-up logo/company grid referencing Spotify, Pinterest, BlaBlaCar, and similar enterprise end-users.
• Footer: CNCF branding section plus nav link columns, near-black background.

Rhythm

The page alternates between prose sections (the "What is Kubernetes?" introductory text blocks) and grid sections (the 8-tile feature grid, the case-study logo grid). Unlike commercial marketing pages that use full-bleed color bands to separate sections, Kubernetes uses hairline dividers and whitespace alone — every band sits on the white canvas. The KubeCon banner is the single color-band exception.

Elevation

The captured marketing surface has no shadow tier. Elevation comes entirely from hairline borders:

• Card borders: 1px {colors.hairline} (#e9e9e9) outlines on feature tiles and content cards.
• Grid separation: the feature tile grid uses {colors.surface-1} fills and {colors.hairline} borders, not shadows.
• No box-shadow: the extracted rendered elements carry no visible shadow values beyond the declared --bs-border-color-translucent: rgba(0, 0, 0, 0.175) Bootstrap token, which is not rendered in the captured surface.

This is consistent with a documentation-first project that inherits Bootstrap's conservative elevation model.

Shapes

The radius scale is conservative-Bootstrap:

• {rounded.none} 0px — the hero banner and full-bleed sections.
• {rounded.xs} 4px — Bootstrap --bs-border-radius-sm: 0.25rem — small chips and minimal surfaces.
• {rounded.sm} 6px — Bootstrap --bs-border-radius: 0.375rem — the default Bootstrap element radius, used on inputs and cards in the Bootstrap default.
• {rounded.md} 8px — Bootstrap --bs-border-radius-lg: 0.5rem — the dominant card radius (12 occurrences on the captured surface). Feature tiles, content cards.
• {rounded.pill} 50rem — Bootstrap --bs-border-radius-pill — the event-location chips in the KubeCon banner. Full pill at the maximum representable radius.

The scale is standard Bootstrap 5 defaults — no custom radius tokens beyond the Bootstrap system. The 8px dominant card radius is in line with Docker (also 8px) and slightly tighter than AWS (16px default).

Components

button-primary — Royal-blue {colors.primary} fill, white text, {rounded.md} 8px radius, 6×12px padding, 38px height. Standard Bootstrap btn-primary styling overridden to the Kubernetes royal blue.

button-secondary — White canvas fill, royal-blue text, 1px royal-blue border, {rounded.md} 8px radius. Standard Bootstrap btn-outline-primary.

top-nav — White canvas surface, Open Sans 20.8px / 500, 48px height, 5px vertical padding. Houses the Kubernetes helm-wheel logo (SVG with cls-1: white fill and cls-2: #326ce5 fill classes), plus nav links (Documentation, Blog, Training, Partners, Community, Case Studies, Versions).

nav-link — Transparent fill, royal-blue {colors.primary} text at {typography.nav-link} (20.8px / 500), 5×0px padding. The nav links render in the primary blue by default — not muted gray as in most marketing systems.

hero-banner — Near-black {colors.nav-dark} (#13110f) full-width fill, 32×16px padding. The KubeCon + CloudNativeCon event announcement: white 32px / 700 headline, two event-location chips (Europe and North America dates), CTA button.

hero-heading — White text on the near-black banner, {typography.display-lg} (32px / 700). The heaviest typographic moment on the page.

body-paragraph — Ink {colors.ink} text at {typography.body-sm} (14px / 400). The dominant reading size throughout the project description sections.

card — White canvas fill, 1px {colors.hairline} border, {rounded.md} 8px radius, 16px padding. Default content card.

feature-tile — White canvas fill with {colors.surface-1} (#e9e9e9) border, {rounded.md} 8px radius, 16px padding. Used in the 8-tile Kubernetes Features grid (Service Discovery, Load Balancing, Storage Orchestration, Self-Healing, Secret Management, Horizontal Scaling, Automatic Rollouts, IPv4/IPv6 Dual-Stack).

link-text — {colors.primary} (#326ce5) text with underline. The system's inline link treatment — consistent with Bootstrap's default link rendering.

event-chip — {colors.ink-secondary} (#495057) fill, white text, {typography.label-md} (14px / 700), Bootstrap pill rounding ({rounded.pill}), 0×12px padding. Used for the event-date location chips in the KubeCon banner ("Europe · May 19–23, 2026", "North America · Oct 7–9, 2026").

logo-grid-item — White canvas fill, {rounded.sm} 6px, 16px padding. Used in the CNCF case-study logo grid. Logos render in full brand color (Spotify green, Pinterest red), not monochrome.

footer — Near-black {colors.nav-dark} fill, white text at {typography.body-sm}, 60×20px padding. The CNCF branding section and nav links.

Do's and Don'ts

Do use {colors.primary} (#326ce5) for every link, interactive border, and CTA background. The system routes all interactive signals through a single voltage — never split it into a "link blue" and a separate "button blue."

Do use weight 700 only for the 24px+ display tier ({typography.display-lg}, {typography.display-md}, {typography.label-md}). Below 24px, 700 reads as shouting; the system uses 500 for headings and 400 for body at smaller sizes.

Do let Open Sans carry the full typographic range without adding a secondary display face. The single-family discipline is part of the system's community-project identity — adding a bespoke display font imports a commercial aesthetic that contradicts the CNCF governance signal.

Do render the CNCF case-study logos in their native brand colors. Unlike Cloudflare's monochrome-white logo wall or Spline's uniform-white customer logos, Kubernetes presents partner marks in full color — signaling that the ecosystem is a collection of independent brands, not a vendor portfolio.

Don't extend the radius scale beyond 8px ({rounded.md}) for cards or 50rem for pill chips. The Bootstrap 5 defaults top out at 8px for large elements; adding a 16px or 24px radius tier imports a softness that reads as non-Bootstrap and breaks the system's honest-foundation aesthetic.

Don't add decorative illustration or gradient hero backgrounds. The KubeCon banner is the system's single chromatic departure; adding a second colored band turns an honest documentation site into a commercial marketing page. The credibility mechanism is sparse, not saturated.

Don't use the logo amber ({colors.logo-amber} — #eeb32d) anywhere outside the helm-wheel logo SVG gradient. It appears once, in a CSS gradient stop, and carries no structural or interactive role. Extending it to button accents or chip backgrounds would invent a secondary brand color the system does not have.

Don't introduce a shadow tier. The page carries no rendered shadows; the hairline-only elevation model is consistent with Bootstrap's default card behavior and with the documentation-site aesthetic. Box shadows on marketing cards would feel anachronistic relative to the resting system.

Known Gaps

• Hero above the fold: the extraction captured the KubeCon event banner as the primary hero surface; the section immediately below it (the "Production-Grade Container Orchestration" tagline and the "Learn Kubernetes" / "Download Kubernetes" CTA cluster) is the true product hero but was not fully captured in the component extraction.
• Primary button rendering: the components.primaryButton field is null in the extraction — no primary CTA button was captured in a rendered state. The button spec above is derived from Bootstrap btn-primary defaults overridden with the --bs-primary color.
• Dark mode: the site is light-only. No dark-mode token overrides are declared in the Bootstrap CSS variables.
• Documentation surfaces: this DESIGN.md captures the kubernetes.io marketing homepage only. The Kubernetes documentation (k8s.io/docs) uses a separate Hugo/Docsy theme with its own heading hierarchy, sidebar navigation, and code-block styling — all distinct from the marketing surface tokens here.
• CNCF ecosystem subpages: the /community, /blog, /training, and /case-studies pages each extend the base Bootstrap theme with their own layout patterns (article grids, author cards, certification tables) not represented in this spec.
• Motion: the feature-tile scroll animations (fade + translate) are not captured in static tokens.
• Responsive breakpoints: the feature grid collapses from 3-column to 2-column to 1-column at tablet and mobile widths; Bootstrap breakpoint tokens (sm: 576px, md: 768px, lg: 992px, xl: 1200px) are inherited but not theme-overridden.