---
version: alpha
name: "Kubernetes"
description: "Kubernetes combines a white documentation system with a dark charcoal hero and the unmistakable Kubernetes blue. Open Sans, straightforward navigation, diagram-led education, and visible documentation routes make a complex platform feel organized without concealing its operational depth."
colors:
  bg: "#ffffff"
  surface: "#f5f7fa"
  text: "#212529"
  brand: "#326ce5"
  on-brand: "#ffffff"
  border: "#dee2e6"
  text-soft: "#5f6b76"
  hero: "#303030"
  on-hero: "#ffffff"
  brand-soft: "#dce8ff"
  focus: "#174ea6"
typography:
  display:
    fontFamily: "Open Sans"
    fontSize: "40px"
    lineHeight: 1.5
    letterSpacing: "0"
  body:
    fontFamily: "Open Sans"
    fontSize: "16px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "6px"
  card: "8px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

Kubernetes balances authority with approachability. A charcoal hero creates a strong technical stage, while white documentation sections and Kubernetes blue actions make the path into concepts, tutorials, and reference clear. The ship-wheel mark and simple cloud-native diagrams provide recognition without becoming decoration.

The atmosphere is operational, community-maintained, and educational. Preserve complexity through hierarchy rather than hiding it behind vague promises.

**Key Characteristics**
- Kubernetes blue as the single dominant action color
- Charcoal hero with high-contrast white copy
- Open Sans for readable technical hierarchy
- White documentation canvas and restrained gray surfaces
- Diagram-led explanations
- Visible routes to learn, docs, community, and releases
- Responsive navigation without horizontal overflow

## Colors

Use #326ce5 for primary actions, selected navigation, links, and the wheel mark. Charcoal #303030 belongs to hero or high-emphasis bands, not every panel. White is the main reading surface; #f5f7fa groups secondary material. Keep body copy at #212529 and use the darker #174ea6 focus token where a blue ring must remain visible on pale blue.

## Typography

Open Sans is the complete display and body system. The desktop hero uses 40px/500; reduce it to about 28px on mobile. Use 28-32px section headings, 22px card titles, 16px body copy, and monospace for YAML, kubectl commands, resource kinds, and status output. Keep letter spacing at zero and avoid ultra-bold marketing headlines.

## Layout

Use a 1200px shell and 760px reading measure. Alternate full-width charcoal or white bands with constrained inner content. Concepts may use a two- or three-column grid, but documentation prose remains single-column with a stable table of contents. Keep the product name, first explanation, and useful action in the first viewport.

Below 992px, collapse the navigation and multi-column concept grids. Below 640px, use a 28px hero, stack actions, constrain code overflow, and keep the table of contents in a labeled disclosure. Diagrams should recompose or scroll inside a bounded region; they must not widen the page.

## Elevation & Depth

Default content stays flat. Use a 1px border and subtle shadow only for menus, sticky navigation, and overlays. Technical diagrams create visual depth through connection and grouping, not glass effects. Every elevated element needs an interaction reason.

## Shapes

Use 4px for buttons and fields, 6px for cards, 8px for menus, and 12px only for a large illustrated panel. Pills are for compact status labels, not general navigation. Diagrams may use circles and hexagonal infrastructure forms without forcing rounded containers around all content.

## Components

Primary buttons are solid blue with white labels; secondary actions are white or transparent with blue text and a clear border; tertiary actions are underlined text links; destructive actions require an explicit red semantic token and confirmation. Cards use borders rather than heavy shadows. Badges label versions, maturity, or status. Inputs include visible labels, help text, and a dark-blue focus ring. Navigation exposes Documentation and Learn as first-class routes, with a labeled mobile menu.

Use 120ms hover feedback, 200ms disclosures, and 300ms maximum for diagram entrance. Navigation state should not shift layout. Focus is a 2px dark-blue ring with 2px offset. Reduced motion removes diagram transforms and smooth scrolling while retaining state labels.

Maintain white-on-charcoal and white-on-blue contrast, use text with every status color, and provide meaningful alternatives for architecture diagrams. Resource examples need accessible names and copy controls. Preserve heading order, skip navigation, keyboard menus, and at least 44px mobile targets.

Write in precise, explanatory verbs: "Learn Kubernetes Basics", "Read the Concepts", "Install kubectl", and "View the release notes". Define platform terminology near first use. Error and empty-state copy should state the resource, observed condition, and next command.

The audited homepage uses a light documentation theme with a dark hero rather than a full dark mode. A future dark reader mode requires separate tokens for code, diagrams, navigation, surfaces, and semantic states. Do not treat the hero palette as a complete dark theme.

Kubernetes inherits from infrastructure diagrams, operations manuals, and open-source documentation portals, then adds a strong blue identity and community framing. It should feel like a platform map: many moving parts, clearly named and connected, with documentation always closer than promotion.

## Do's and Don'ts

**Do**
- Keep Kubernetes blue consistent.
- Show commands and resource state explicitly.
- Use diagrams to clarify relationships.
- Keep documentation routes visible.
- Label version and maturity.
- Reflow complex grids on mobile.
- Use strong keyboard focus.
- Pair status color with text.

**Don't**
- Do not make every section charcoal.
- Do not hide complexity behind generic cloud copy.
- Do not use unlabeled architecture icons.
- Do not animate diagrams continuously.
- Do not put cards inside cards.
- Do not clip YAML or command output.
- Do not reduce mobile targets below 44px.
- Do not invent a multicolor palette.

**Quick colors:** background #ffffff; text #212529; Kubernetes blue #326ce5; hero #303030; surface #f5f7fa; border #dee2e6; focus #174ea6.

**Example prompts**
- Create a Kubernetes hero with a charcoal stage, white Open Sans copy, and one blue documentation action.
- Design a cloud-native concept grid with labeled diagrams and restrained bordered cards.
- Build a kubectl tutorial with copyable commands, visible prerequisites, and version context.
- Create a responsive documentation rail that becomes a labeled disclosure below 992px.

**Iteration guide:** establish task and resource hierarchy; set the blue/charcoal contrast; add command and diagram states; verify mobile reflow; test keyboard navigation; then remove any decorative depth that does not explain structure.