Kubernetes

---
version: alpha
name: Kubernetes-design-analysis
description: Kubernetes' design language is a clean, community-driven system anchored on the signature K8s blue `#326ce5` against white and light-gray surfaces. The interface is documentation- and dashboard-heavy, so clarity, tables, and code blocks dominate. The blue is the single brand color, used for links, primary actions, and the heptagon logo mark.

colors:
  primary: "#326ce5"
  primary_dark: "#2b5fc3"
  primary_light: "#e8f0fe"
  canvas: "#ffffff"
  surface: "#f4f6f8"
  surface_2: "#eef1f4"
  fg_default: "#24292e"
  fg_muted: "#586069"
  border_default: "#e1e4e8"
  border_strong: "#c9d1d9"
  code_bg: "#f6f8fa"
  on_primary: "#ffffff"
  danger: "#cb2431"
  success: "#22863a"

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

# Design System Inspired by Kubernetes

## 1. Visual Theme & Atmosphere

Kubernetes (K8s) is a documentation-first system: the site and dashboard are built for clarity, navigation, and scanning large amounts of reference material. A single brand blue `#326ce5` — the color of the heptagon wheel — punctuates an otherwise neutral, near-white canvas. The tone is authoritative, precise, and community-owned.

## 2. Color System

- **K8s blue** `#326ce5` — links, primary buttons, active nav, the heptagon logo.
- A subtle blue tint `#e8f0fe` for selected/hover states.
- Neutrals `#ffffff` / `#f4f6f8` / `#eef1f4` with hairlines `#e1e4e8`; text `#24292e`, muted `#586069`.
- Semantic accents: danger `#cb2431`, success `#22863a`.

## 3. Typography

Inter (system fallback) at a documentation-optimized scale. Body 16px/1.6 for long-form reading; code uses a clear monospace on a `#f6f8fa` background. Headings are medium weight with generous spacing above.

## 4. Components & Shape

The signature element is the heptagon — the seven-sided K8s logo — echoed subtly in iconography. Buttons are 4px-radius rectangles; primary is solid blue. Code blocks and tables are the workhorses: bordered, striped, and tightly typeset. Nav uses a left sidebar with active-item blue highlighting.

## 5. Layout & Spacing

A clean documentation layout: full-width content column with a persistent left sidebar, 24-32px gutters, and a sticky header. Tables and code samples break the measure for horizontal scroll. Spacing follows an 8px rhythm.

## 6. Motion

Minimal — active nav states and link hovers shift color quickly. Motion is nearly absent, keeping the reference material stable and fast.