--- version: alpha name: "Kubernetes" website: "https://kubernetes.io" description: >- The open-source container-orchestration project whose site runs on Bootstrap 5 with a single bold brand color — the Kubernetes royal blue (#326ce5) — wired as link, nav accent, and hero panel fill. The body copy is Open Sans at 14–16px on a white canvas; the hero banner is a dark near-black panel that carries the KubeCon event announcement in white at 32px / weight 700. A secondary amber-gold accent from the helm-wheel logo gradient appears once, in a CSS gradient stop, and nowhere else. The aesthetic is open-source documentation rather than commercial SaaS — honest, minimal, Bootstrap-vanilla. seo: title: "Kubernetes Design System for React — royal blue on white, Open Sans, 14 components" metaDescription: "Kubernetes marketing site as a DESIGN.md file. Bootstrap 5 base, royal blue #326ce5 as the single brand voltage, Open Sans across all tiers, 8px default rounding, 12 color tokens, 14 components. For React, Next.js, and AI tools." highlights: - "Bootstrap 5 foundation — the entire CSS variable set is --bs-* prefixed, making token sourcing and overriding predictable for any Bootstrap-familiar developer" - "Single royal-blue brand voltage — #326ce5 wired as --bs-primary and --bs-link-color across 44 rendered occurrences" - "Open Sans across all tiers — one family, weight 400 body and weight 700 heading, no display/body split" - "Dark event banner — the KubeCon announcement panel is near-black (#13110f) with white text, making it the page's only true dark surface" - "CNCF ecosystem credibility — a logo grid of CNCF member projects and a 'Case Studies' section substitute for brand illustration" tags: - "Backend, Database & DevOps" - "Web Infrastructure & Hosting" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Kubernetes.io is an open-source documentation site that also functions as the project's primary marketing surface. It does not use a proprietary typeface, a bespoke design system, or a brand-hero illustration. It uses Bootstrap 5 with a theme override that maps the Bootstrap primary color to Kubernetes royal blue (#326ce5), and Open Sans as the system body font. The page's strongest visual statement is the KubeCon event announcement banner — a near-black panel carrying white text and two event-date chips — and beneath that, a series of content sections: a "Planet scale" feature list, a "Kubernetes Features" grid of 8 tiles, a CNCF case-study section, and the Cloud Native Computing Foundation affiliation footer. The helm-wheel logo mark is the most distinctive brand asset, but its azure-to-royal blue gradient appears nowhere in the CSS surface tokens — only once, as a gradient stop in the extraction. For a project that underpins a significant fraction of global enterprise infrastructure, the design is deliberately restrained. This is not a marketing failure — it reflects the open-source governance model: the community owns the project, not a marketing team, and the visual system must signal trustworthiness and longevity rather than commercial ambition. Compared to Docker (which uses the same container ecosystem positioning but runs a bespoke Repro + electric-blue commercial design system), Kubernetes reads as the reference implementation — technically authoritative, visually neutral. The analogy in software is stable API over flashy UI. Feed this file to an AI coding tool and it reproduces Kubernetes's specific moves: white canvas, Bootstrap 5 token structure, royal blue as the single link/interactive voltage, Open Sans at weight 400 body and 700 heading, conservative 8px default rounding, and a dark event-announcement banner as the one deliberate chromatic departure. The system is among the easiest in the directory to clone: few tokens, one family, one voltage, Bootstrap base. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://kubernetes.io" title: "Kubernetes — official site" description: "The Kubernetes project's public site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Kubernetes's primary brand color?" answer: "Kubernetes's brand voltage is royal blue (#326ce5), wired as --bs-primary and --bs-link-color. It appears 44 times in the rendered page — 22 as text, 22 as border — carrying every link, nav accent, and highlighted interactive state. The site's theme color metadata also declares #326de6 (one step brighter, from the tag), confirming the family. The helm-wheel logo uses a gradient from azure to royal blue, but that gradient does not appear in any structural surface token. The amber-gold secondary color (#eeb32d) visible in the logo gradient appears once, as a gradient stop in the CSS extraction, and nowhere in the page chrome." - id: "typography" title: "What typeface does Kubernetes use, and what should I substitute?" answer: "Kubernetes runs Open Sans across every tier — body text at 14px / 400, nav links at 16px / 400 and 20.8px / 500, section headings at 32px / 700, the hero banner at 32px / 700. There is no display / body split and no secondary typeface family. The --bs-font-sans-serif and --bs-body-font-family CSS variables both resolve to 'Open Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'. Open Sans is an open-source Google Font available at fonts.google.com, so no substitution is required for most development contexts. If a strictly system-native fallback is needed, the declared stack already degrades gracefully through -apple-system → BlinkMacSystemFont → Segoe UI → Roboto." - id: "bootstrap-foundation" title: "Does Kubernetes actually use Bootstrap?" answer: "Yes — the extracted CSS variables are uniformly --bs-* prefixed, which is Bootstrap 5's custom-property convention. The token set includes --bs-body-color, --bs-body-bg, --bs-primary, --bs-secondary, --bs-border-radius, --bs-border-radius-lg, --bs-border-radius-pill, and the full Bootstrap semantic color family (--bs-success, --bs-danger, --bs-warning, --bs-info). The radius values (0.25rem sm, 0.375rem default, 0.5rem lg) are standard Bootstrap 5 defaults converted to pixel equivalents. Bootstrap 5 with a primary-color override to #326ce5 and the Open Sans font import accounts for essentially the full Kubernetes.io design system." - id: "cncf-relationship" title: "How does the CNCF relationship show up in the design?" answer: "The Cloud Native Computing Foundation affiliation appears in two ways: a 'Trusted by' or 'Case Studies' section near the bottom of the page that names end-user organizations (Spotify, Pinterest, BlaBlaCar, and similar), and the CNCF logo and wordmark in the footer. The footer renders a CNCF branding section with the 'Cloud Native Computing Foundation' logotype and a 'We are a Cloud Native Computing Foundation graduated project' statement. The CNCF's own visual identity (a teal-and-blue gradient mark) does not override the Kubernetes royal-blue voltage — the CNCF logo renders in its own brand color, separate from the page chrome." - id: "differences-from-docker" title: "How is Kubernetes's design different from Docker's?" answer: "Both systems target the same container-infrastructure audience, but the visual registers are entirely different. Docker runs a bespoke commercial design system: a proprietary Repro display typeface, electric blue (#2560ff), 4px CTA rounding, and a security-marketing hero with CVE metrics. Kubernetes runs Bootstrap 5 defaults: Open Sans (a Google Font), royal blue (#326ce5), 8px default rounding, and an open-source documentation aesthetic. Docker's system reads like a VC-backed startup with a design team; Kubernetes reads like a CNCF graduate project with a community maintainer. For the developer audience, both signals are credible — they just position differently on the commercial/community axis." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#326ce5" primary-hover: "#234ca0" ink: "#212529" ink-secondary: "#495057" ink-muted: "#6c757d" canvas: "#ffffff" surface-1: "#e9e9e9" nav-dark: "#13110f" logo-amber: "#eeb32d" hairline: "#e9e9e9" hairline-dark: "#ced4da" shadow: "#000000" typography: display-lg: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 38.4px letterSpacing: 0 display-md: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 36px letterSpacing: 0 heading-lg: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 21.6px fontWeight: 500 lineHeight: 25.92px letterSpacing: 0 heading-md: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 20.8px fontWeight: 500 lineHeight: 28px letterSpacing: 0 body-lg: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 19.2px fontWeight: 400 lineHeight: 28.8px letterSpacing: 0 body-md: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0 label-md: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 21px letterSpacing: 0 nav-link: fontFamily: "\"Open Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 20.8px fontWeight: 500 lineHeight: 28px letterSpacing: 0 rounded: none: "0px" xs: "4px" sm: "6px" md: "8px" pill: "50rem" spacing: xs: "8px" sm: "16px" md: "20px" lg: "60px" xl: "72px" 2xl: "128px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "6px 12px" height: "38px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "6px 12px" height: "38px" borderColor: "{colors.primary}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "5px 0px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.nav-link}" padding: "5px 0px" hero-banner: backgroundColor: "{colors.nav-dark}" textColor: "{colors.canvas}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: "32px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-lg}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "16px" borderColor: "{colors.hairline}" feature-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "16px" borderColor: "{colors.surface-1}" link-text: textColor: "{colors.primary}" typography: "{typography.body-sm}" event-chip: backgroundColor: "{colors.ink-secondary}" textColor: "{colors.canvas}" typography: "{typography.label-md}" rounded: "{rounded.pill}" padding: "0px 12px" logo-grid-item: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: "16px" footer: backgroundColor: "{colors.nav-dark}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" padding: "60px 20px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-lg}` | 32px | 700 | 38.4px | Hero banner h2 ("Attend upcoming KubeCon + CloudNativeCon events"), section h2 | | `{typography.display-md}` | 24px | 700 | 36px | Sub-section display headings, feature section h2 | | `{typography.heading-lg}` | 21.6px | 500 | 25.92px | h4 feature-cell headings | | `{typography.heading-md}` | 20.8px | 500 | 28px | Nav link and secondary headings | | `{typography.body-lg}` | 19.2px | 400 | 28.8px | Lead paragraphs | | `{typography.body-md}` | 16px | 400 | 24px | Default running text | | `{typography.body-sm}` | 14px | 400 | 21px | The dominant body size — most captured elements at 14px | | `{typography.label-md}` | 14px | 700 | 21px | Bold inline labels and event-chip text | | `{typography.nav-link}` | 20.8px | 500 | 28px | Nav link labels (the largest nav link in the directory) | ### 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.