# Kubernetes: brand book and build spec

One blue (#326CE5), a ship's wheel in a heptagon, and a deep documentation style guide. Kubernetes publishes logo files and naming rules, not a visual system; its site runs on Open Sans, Bootstrap greys and flat blue-teal illustrations.

From unfairly.ai/brand-guidelines/kubernetes, checked 2026-10-30. Unofficial study; not affiliated with Kubernetes.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** A helm, not a brand campaign. Kubernetes steers by one mark, one blue and a strict, plain writing style, and lets a whole ecosystem build around it. Based on: Only the color, the logo files, naming rules and the SIG Docs style guide are published; the trademark policy exists to keep the name neutral.

## Purpose

Stated job: Automate deployment, scaling and management of containerized applications (paraphrase of the homepage definition; no mission statement is published). (our reading; https://kubernetes.io/)

Story: The name is Greek for helmsman or pilot, which is why the mark is a ship's wheel. Google open sourced Kubernetes in 2014 on 15 years of running production workloads (Borg); it is now a graduated CNCF project under the Linux Foundation, written and maintained by the Kubernetes Authors and its SIGs. (published)

## Fixed and flexible

Never changes:
- The helm in the blue heptagon, from the official files only
- Kubernetes Blue #326CE5 / Pantone 285 C
- Kubernetes capitalized; K8s as the abbreviation
- You, present tense, plain words

The one thing that varies: Everything visual beyond the logo and the blue: the site's greys, layout, illustration and type are conventions, not rules, and non-commercial uses (t-shirts, stickers) may even modify the mark.

## Positioning

- **Statement**: A portable, extensible, open source platform for managing containerized workloads and services, with declarative configuration and automation (paraphrase). (published)
- **Category**: Container orchestration (published)
- **Audience**: Teams running containerized applications in production, from local testing to global enterprises, and the platform builders who extend it (paraphrase of homepage and overview). (our reading)
- **Problem**: Containers in production must be managed so nothing goes down: when one fails, another must start (paraphrase). (published)
- **Promise**: A framework to run distributed systems resiliently: scaling, failover and deployment patterns handled for you (paraphrase). (published)
- **Differentiators**: Open source and vendor-neutral, governed in the open under the CNCF.; Runs anywhere: on-premises, hybrid or public cloud.; Extensible without changing upstream code.; Google-scale lineage: 15 years of production experience.
- **Alternatives**: Traditional all-inclusive PaaS systems (the overview names what Kubernetes is not).

## Messaging

Boilerplate (published): Kubernetes, also known as K8s, is an open source system that automates deploying, scaling and managing containerized applications. It groups an application's containers into logical units for management and discovery, and builds on 15 years of running production workloads at Google plus the community's best ideas.

Taglines:
- Production-Grade Container Orchestration (Homepage h1 and page title (content/en/_index.html in kubernetes/website))
- Automated container deployment, scaling, and management (Homepage abstract)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Planet scale | Built on the principles Google uses to run billions of containers a week; scales without a bigger ops team (paraphrase). | Builds on 15 years of Google's experience running production workloads.; Google runs billions of containers a week on the same principles. | published |
| Never outgrow | From a laptop test to a global enterprise, it grows with the application (paraphrase). | Self-healing, automated rollouts and rollbacks, service discovery, storage orchestration, bin packing, horizontal scaling, IPv4/IPv6 dual-stack, extensibility. | published |
| Run K8s anywhere | Open source, so workloads run on-premises, hybrid or public cloud and move where needed (paraphrase). | A CNCF graduated project.; Google open sourced the project in 2014. | published |

They never claim:
- Not a traditional, all-inclusive PaaS: it gives building blocks and keeps logging, monitoring and CI/CD optional and pluggable (paraphrase).
- Nothing may imply that the Linux Foundation or Kubernetes sponsors or endorses a product.

## Voice

Tone words: Direct, Precise, Neutral, Inclusive.

Traits:
- Direct, but not Curt (our reading)
- Precise, but not Pedantic (our reading)
- Neutral, but not Promotional (our reading)
- Inclusive, but not Assuming expertise (our reading)
- Durable, but not Trendy (our reading)

- Kubernetes' published voice is a documentation voice: SIG Docs' style guide, which calls itself guidelines, not rules.
- Write for a reader who may speak English as a second language: no idioms, no Latin, no 'just' or 'simply'.
- Vendor-neutral: the project speaks as itself ('Kubernetes provides...'), not as a company ('we provide...').
- Precision is the voice: API kinds in UpperCamelCase, code in code style, values in plain text.
- The homepage copy is older and looser than the style guide (it uses 'easily' and 'effortlessly'); new copy follows the guide.

Rules a copy check enforces:
- American spelling
- Sentence case headlines
- Address the reader as "you"; avoid "we" (the reader can't tell if they're included)
- Present tense ("This command starts a proxy"), unless the meaning needs another
- Active voice, unless it makes the sentence awkward
- Simple, direct language: "To create", not "In order to create"; no "please"
- Say "for example / that is", not "e.g." or "i.e."
- Say "internally / create", not "under the hood" or "turn up"
- Never: just, simply, easy, easily, simple
- Never: currently, new. Say a version number ("In version 1.4") instead
- No promises or hints about the future, except announced deprecations
- Say "K8s", not "K8S" or "K8"
- Say "cloud native", not "cloud-native" or "Cloud Native"
- Say "open source", not "open-source" or "Open Source"
- Say "on-premises / on-prem", not "on-premise"
- Kubernetes is always capitalized (a proper noun)
- API kinds in UpperCamelCase, never split and never in code style (a ConfigMap, a PodTemplateList)
- Code style for commands, tools, components, fields, files and paths (`kubectl`, `replicas`, `kube-system`)
- Bold for UI elements; italics to introduce a new term
- Punctuation outside quotes (international standard)
- Link text that says where it goes; never "click here"
- Paragraphs under six sentences
- Use the mark as an adjective with a generic noun, never plural or possessive
- Third parties say "<product> for Kubernetes" or "compatible with Kubernetes", never "Kubernetes <product>"

Their words: K8s, cloud native, open source, on-premises, SIG Docs.
Never: just, simply, easy, easily, simple, please, currently, new, e.g., i.e., under the hood, K8S, K8, cloud-native, open-source, on-premise, we (for the project), click here.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Kubernetes Blue | #326CE5 | accent | The only official color. Logo heptagon, links, buttons. Pantone 285 C in print. |
| White | #FFFFFF | paper | Page ground; the helm and heptagon outline; text on blue and dark. |
| Body ink | #212529 | ink | Site text on white (observed). |
| Medium-light grey | #6F6F6F | ink_muted | Site muted text (observed SCSS); our reading as muted ink. |
| Light grey | #F9F9F9 | surface | Feature-section ground (observed). |
| Dark grey | #303030 | night | Site dark grey and dark-mode ground (observed SCSS). |
| Black (wordmark) | #000000 | extra | Wordmark in the full-color lockup. |
| Feature card blue | #DAEAF9 | extra | Light-blue feature cards (observed). |
| Announcement navy | #113E82 | extra | KubeCon announcement band (observed). |
| Secondary grey | #495057 | extra | Events band (observed). |
| Footer ground | #403F4C | extra | Textured footer as rendered (observed). |
| Illustration teal | #09C1D1 | extra | Illustrations only (observed). |
| Illustration pale teal | #C9E9EC | extra | Illustration tints (observed). |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Open Sans | Open (SIL OFL 1.1), Google Fonts | Open Sans | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| body | Open Sans | Open (SIL OFL 1.1), Google Fonts | Open Sans | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif |
| mono | SFMono-Regular | System fonts, not distributed | Roboto Mono | SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Features heading (H2 in blue) | --text-h2-* | Open Sans | 32px | 24.71px | 1.2 | 0px | 400 |
| Events band H2 (white, bold) | --text-h2-bold-* | Open Sans | 32px | 24.71px | 1.2 | 0px | 700 |
| Phone hero H1 (phone only) | --text-h1-phone-* | Open Sans | 27.85px | 27.85px | 1.2 | 0px | 400 |
| Announcement title / section H4 | --text-h4-* | Open Sans | 21.6px | 20.6px | 1.2 | 0px | 400 |
| Feature card title | --text-card-title-* | Open Sans | 20.8px | 20.8px | 1.346 | 0px | 400 |
| CNCF line | --text-lead-* | Open Sans | 19.2px | 19.2px | 1.5 | 0px | 400 |
| Event lines | --text-event-* | Open Sans | 24px | 24px | 1.5 | 0px | 400 |
| Feature card body | --text-body-* | Open Sans | 16px | 16px | 1.5 | 0px | 400 |
| Overview body / announcement body / footer legal | --text-small-* | Open Sans | 14px | 14px | 1.5 | 0px | 400 |
| Nav link | --text-nav-* | Open Sans | 14px | 14px | 1.5 | 0px | 700 |

## Layout

Measured on https://kubernetes.io/: Playwright computed styles at 1440 and 390, observed 2026-10-30.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 120px | 20px |
| Section padding | 60px | 60px |
| Container max width | 1200px | full |
| Hero text width | max 1200px | full |
| Grid columns | 2 | 1 |
| Gutter | 20px | 20px |
| Card gap | 20px | 20px |
| Navigation height | 64px | 64px |

Breakpoints from Kubernetes's CSS: px.

Homepage bands, top to bottom (observed):
1. Nav (overlay)
   - Desktop: 64px fixed at top 0, transparent over the navy announcement; links 14px/700 #FFFFFF from x 396; white wordmark
   - Phone: 64px fixed at top 0; lockup centred with white wordmark, hamburger 54x46 right
   - ground is transparent: it reads as the #113E82 announcement beneath it
   - no CTA
   - no hairline or shadow at the top of the page
   - scrolled: #212529 + shadow 0 1px 2px #495057, links #DEE2E6, wordmark letters #326CE5
2. Announcement
   - Desktop: 0-285, content 1072 centred, padding 128/32
   - Phone: 0-447, content 312 at x 39, lockup floats right beside title
   - time-bound, reproduce as captured 2026-10-30
3. Phone h1 band
   - Desktop: hidden (display:none) while the announcement shows
   - Phone: 447-600, 27.85px white centred
   - phone only
   - ground as observed: #303030 + texture.png
4. Search
   - Desktop: 285-361, field 936x38 radius 20 outline 1px #495057
   - Phone: 600-676, field 304x38
   - magnifier inside left
5. Overview
   - Desktop: 361-1735, column 1200 at x 120, images centred, text left
   - Phone: 676-2268, column x 20-370
   - 14px/21px #212529 body
   - H4 21.6px weight 500 (renders 400)
6. Video
   - Desktop: 1735-2119 (384), image auto 100% at 65% 50%
   - Phone: hidden
   - title text is in the image
   - ground as observed: #13110F + video_banner JPEG
7. Upcoming events
   - Desktop: 2119-2437, h2 32px/700, lines 24px
   - Phone: 2268-2673
   - centred white
8. Kubernetes Features
   - Desktop: 2437-3751, 2 x 472 cards, 20px gaps, last centred
   - Phone: 2673-5322, 1 x 312 cards
   - card radius 8, blue centred title, left body 16px
9. CNCF
   - Desktop: 3752-3942
   - Phone: 5323-5542
   - centred
10. Footer
   - Desktop: 3942-4170, padding 48 16
   - Phone: 5542-5917, icons stack vertically in side columns
   - 14px #E9E9E9 centred legal lines
   - ground as observed: #403F4C + 52% black gradient + texture (renders ~#1E1E24)

## Page anatomy

How Kubernetes's own landing pages are built, part by part (observed; https://kubernetes.io/, 2026-10-30). A homepage pattern, not a brand law: follow it for landing pages.

**Announcement bar**
- summary: Full-width navy band that sits UNDER the fixed nav (transparent at the top of the page) and fills the top of the page (y 0-285 desktop, 0-447 phone). Left: underlined event title link, one-paragraph invite with an underlined ticket link, a blue "Hide this notice" button. Right: white KubeCon | CloudNativeCon North America 2026 lockup image. Time-bound: KubeCon + CloudNativeCon North America 2026, observed 2026-10-30; reproduce it exactly as captured.
- ground: #113E82 flat, no image
- copy verbatim: title KubeCon + CloudNativeCon North America 2026; body Join us for four days of incredible opportunities to collaborate, learn and share with the cloud native community.; link Buy your ticket now! 9 - 12 November | Salt Lake City, Utah; button Hide this notice; href https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/register/ (title and ticket link share it)
- desktop: band 1440x285. Content box max-width 1072px centred (x 184-1256), padding 128px top (64px nav + 64px) and 32px bottom. Title h4 link 21.6px/25.92px Open Sans weight 500 (renders 400) #FFFFFF underlined at y 128 (w 486). Body p 14px/21px #FFFFFF at y 162-204: line 1 the invite sentence, line 2 the underlined ticket link (w 384). Button at x 184 y 220, 156x33. Lockup image 163x100 floated right, top-aligned with the title (x 1093-1256, y 128-228)
- phone: band 390x447. Content box x 39-351 (312px), padding 32px top under the 64px nav (title starts y 96). The 163x100 lockup floats right at x 188 y 96, so the title wraps "KubeCon +" on the left beside it, then "CloudNativeCon North America / 2026" below (title block y 96-246, 20.6px/24.75px). Body p y 254-359 (5 lines). Button x 39 y 375, 156x33
- resting state: Visible at load. "Hide this notice" removes the band (dismissal remembered by the site). Build the visible state.

**Navigation**
- summary: Fixed 64px bar at the top of the page (position fixed, top 0). At the top it is transparent, so it reads as the navy #113E82 of the announcement beneath it: horizontal kubernetes lockup (blue #326CE5 heptagon, white helm, white wordmark) at left, eight right-hand items (six links, Versions and English dropdowns, #FFFFFF 14px/700) plus a theme toggle. Once the page scrolls it fades (0.3s) to #212529 with a 0 1px 2px #495057 shadow, links #DEE2E6 and the wordmark letters #326CE5. Phone: lockup centred, hamburger right.
- ground: At the top of the page: transparent over #113E82. Scrolled: #212529 with box-shadow 0 1px 2px #495057 (0.3s fade).
- height: 64px (padding 8px 0), position fixed, top 0, z-index 32
- border: none at rest; scrolled only the 0 1px 2px #495057 shadow
- logo: variant horizontal lockup inline SVG: #326CE5 heptagon, #FFFFFF helm, #FFFFFF wordmark at the top of the page; the wordmark letters turn #326CE5 once scrolled; px 146x38; position desktop x 10, y 13; phone centred x 122, y 13; file inline <svg> in .navbar-brand on https://kubernetes.io/ (same artwork as https://raw.githubusercontent.com/cncf/artwork/main/projects/kubernetes/horizontal/white-text/)
- links: count 8; labels Documentation, Kubernetes Blog, Training, Careers, Partners, Community, Versions (dropdown caret), English (dropdown caret); then theme toggle (sun icon + caret, title "Toggle theme (auto)"); hrefs /docs/home/, /blog/, /training/, /careers/, /partners/, /community/; size 14px/21px; weight 700; color #FFFFFF at the top of the page; #DEE2E6 once scrolled; hover #326CE5, no underline; alignment right-aligned group starting x 396; item x 396, 553, 716, 822, 923, 1032, 1161, 1281, toggle 1390 (42x38); each item padding 8px, 32px between items; dropdowns Versions: Release Information, v1.37, v1.36, v1.35, v1.34, v1.33. English: বাংলা (Bengali), 中文 (Chinese), Français (French), Deutsch (German), हिन्दी (Hindi), Bahasa Indonesia (Indonesian), Italiano (Italian), 日本語 (Japanese), 한국어 (Korean), فارسی (Persian), Polski (Polish), Português (Portuguese), Русский (Russian), Español (Spanish), Українська (Ukrainian), Tiếng Việt (Vietnamese). Theme: Light, Dark, Auto
- actions:
  - Theme toggle: sun glyph + caret, #FFFFFF, 42x38 at x 1390, radius 6px
  - No CTA button and no search in the nav at 1440 (search lives in its own band below the announcement)
- sticky: position fixed, top 0, z-index 32, on every width; the announcement band carries 64px top padding on phone so its content starts below the bar
- phone: shows lockup 146x38 centred (x 122 y 13); hamburger button 54x46 at x 318 y 12: Font Awesome bars 32px #FFFFFF, padding 6px 12px, radius 6px, background linear-gradient(rgba(255,255,255,0.15), transparent), inset highlight 0 1px 0 rgba(255,255,255,0.15); menu full-width white (#FFFFFF) push sheet over an rgba(0,0,0,0.4) overlay: close X 32px #212529 top right; rows at 20px/400 #326CE5, 45px pitch, x 20, 1px light-grey hairline between rows: Documentation, Kubernetes Blog, Training, Careers, Partners, Community, Versions (caret) with its six entries listed open, English (caret) with the 16 languages listed open, then Light, Dark, Auto; cta none
- at rest: At the top of the page (observed 2026-10-30): a 64px bar at y 0-64, transparent over the #113E82 announcement, white wordmark and white links. The #212529 ground, shadow, #DEE2E6 links and blue wordmark are the scrolled state.

**Hero**
- summary: There is no desktop hero at rest. While the announcement shows, the h1 band (section.header-hero, "Production-Grade Container Orchestration" on #303030 with texture.png) is display:none at 1440, so the page goes nav/announcement -> search -> flower illustration. On phone the h1 band IS visible between the announcement and the search.
- desktop: column split none: single centred column; vertical anchors announcement 0-285 occupies the hero slot; search band 285-361; first illustration top y 421; text max width n/a; media none in the hero slot; the first media is flower.svg in the overview; cta size n/a (only button above the fold is Hide this notice 156x33)
- phone: order nav over announcement (0-447), h1 band (447-600), search (600-676), flower; alignment h1 centred; sizes band 390x153, padding 32px top 24px bottom; h1 27.85px/33.42px weight 500 (renders 400) #FFFFFF, 2 lines "Production-Grade Container / Orchestration", box x 10-380, y 479-546
- at rest: desktop: announcement visible, h1 band hidden. phone: both visible. No animation.
- media: phone h1 band ground #303030 with background-image texture.png (1920x698, faint grey network dots and lines, auto size, top-left)
- type: h1 Open Sans 500-declared (renders 400), white, centred
- cta: none in the hero
- proof: none

**Search**
- summary: White band holding one pill search field
- ground: #FFFFFF
- desktop: band y 285-361 (76px, padding 19.2px). Field 936x38 at x 252 (container 960 centred); wrapper radius 20px with a 1px solid #495057 outline; 16px magnifier glyph rgba(33,37,41,0.75) at x 264; placeholder "Search this site" 16px #212529 at 75%, text starts x 285
- phone: band y 600-676; field 304x38 at x 43
- anatomy:
  - one input, no button; magnifier inside at left 12px
  - focus: border #F5F8FE, box-shadow 0 0 0 2px #84A7EF, 0.15s
- components:
  - search field

**Overview: flower + definition**
- summary: Centred flower.svg diagram above two left-aligned body paragraphs
- ground: #FFFFFF
- desktop: section padding 60px 20px; content column max-width 1200 (x 120-1320). Image 491x179 centred (x 475, y 421). p1 at y 620 (14px/21px #212529, one line), p2 at y 657 (two lines, full 1200 width), 16px between paragraphs
- phone: column x 20-370. Image scales to 350x128 at y 736; p1 y 884 (3 lines), p2 y 963 (6 lines)
- anatomy:
  - p1 verbatim: "Kubernetes, also known as K8s, is an open source system for automating deployment, scaling, and management of containerized applications." ("Kubernetes" is a #326CE5 link to /docs/concepts/overview/)
  - p2 verbatim: "It groups containers that make up an application into logical units for easy management and discovery. Kubernetes builds upon 15 years of experience of running production workloads at Google, combined with best-of-breed ideas and practices from the community." ("15 years of experience of running production workloads at Google" links to https://queue.acm.org/detail.cfm?id=2898444)
  - body text is left-aligned under a centred image; links #326CE5, no underline at rest, underline on hover
- components:
  - body link

**Overview: three feature rows**
- summary: Three stacked rows, each a centred 160px flat illustration, then a left-aligned H4 and a 14px paragraph
- ground: #FFFFFF
- desktop: rows start y 759, 1051, 1343 (60px between rows). Icons 160 wide centred (x 640): scalable 160x157, blocks 160x157, suitcase 160x139. Visible H4 text 20px below the icon bottom (Planet scale text ~y 936), paragraph 8px below the H4 (y 970), left edge x 120, full 1200 width
- phone: rows y 1149, 1482, 1836; icon 160 centred x 115; H4 20.6px at y 1326 / 1659 / 1995 followed by a visible blue "#" self-link (18.6px #326CE5); paragraphs wrap to 3-4 lines
- anatomy:
  - Row 1: scalable.svg, H4 "Planet scale", p "Designed on the same principles that allow Google to run billions of containers a week, Kubernetes can scale without increasing your operations team."
  - Row 2: blocks.svg, H4 "Never outgrow", p "Whether testing locally or running a global enterprise, Kubernetes flexibility grows with you to deliver your applications consistently and easily no matter how complex your need is."
  - Row 3: suitcase.svg, H4 "Run K8s anywhere", p "Kubernetes is open source giving you the freedom to take advantage of on-premises, hybrid, or public cloud infrastructure, letting you effortlessly move workloads to where it matters to you." then p "To download Kubernetes, visit the download section." ("download" links /releases/download/)
  - H4 21.6px/25.92px weight 500 (renders 400) #212529, left; heading self-link "#" hidden on desktop until hover, always visible on phone
  - no cards, no columns: one centred image over left text, repeated
- components:
  - section heading with self-link

**Video band**
- summary: Dark band with a large white Watch Video button at left and a video-thumbnail image at right; the yellow title and presenter names are pixels in the image, not live text
- ground: #13110F
- desktop: band y 1735-2119 (384px). Background image video_banner_homepage_XNZvGHlpJ_4.jpeg (1922x1072) at background-size auto 100% (renders 688x384), position 65% 50% (x 489-1177), no-repeat over #13110F. Content row padding 0 864px 0 144px; button 224x134 at x 248 y 1911 (bottom-aligned, ~74px above band bottom)
- phone: display:none: the whole band is hidden at 390. Do not build it on phone.
- anatomy:
  - Watch Video button: #FFFFFF fill, radius 8px, padding 24px, 28.8px/43.2px Open Sans 400 #495057, text centred and wrapping to "▶ Watch / Video" (::before content "▶︎ ")
  - hover: text #326CE5, 0.15s
  - image text (title "The Absolute Beginner's Guide to Cloud Native" in yellow rounded face, presenters "Kyle Penfound, Solutions Engineer, Dagger" and "Cortney Nickerson, Head of Community, Nirmata", CNCF University Europe badge) is baked into the JPEG: use the file, never re-typeset it
  - the band's h2 and byline exist in the DOM but are visibility:hidden
- components:
  - Watch Video button

**Upcoming KubeCon events**
- summary: Grey band with a centred bold white heading and two centred bulleted event lines
- ground: #495057
- desktop: band y 2119-2437 (318px). h2 32px/38.4px weight 700 #FFFFFF centred, padding 32px 16px (text ~y 2183). Event rows at y 2273 and 2345, each padding 8px 0 + margin 8px; each line 24px/36px #FFFFFF centred: "• " + bold 700 underlined place name + 400 detail
- phone: band y 2268-2673 (405px); h2 24.71px/29.65px 700 in 3 lines (153px tall including its 32px 16px padding) (x 20-371); event lines stay 24px, North America wraps to 2 lines
- anatomy:
  - h2 verbatim: "Attend upcoming KubeCon + CloudNativeCon events"
  - row 1: "• Japan (Yokohama, Jul 28–30)" -> https://events.linuxfoundation.org/kubecon-cloudnativecon-japan/
  - row 2: "• North America (Salt Lake City, Nov 9–12)" -> https://events.linuxfoundation.org/kubecon-cloudnativecon-north-america/
  - whole line is the link; bold place names carry the underline; hover underlines the whole line
  - time-bound: reproduce as captured 2026-10-30
- components:
  - event link

**Kubernetes Features**
- summary: Light-grey section: blue helm wheel icon, blue centred heading, then a 2-column grid of 11 pale-blue cards (last card centred alone)
- ground: #F9F9F9
- desktop: section y 2437-3751, padding 140px top 32px bottom. wheel.svg as background-image 60px wide, centred, top 60px (y 2497-2557). Heading y 2577, 32px/38.4px weight 500 (renders 400) #326CE5 centred. Grid starts y 2644 (margin-top 28.8px): flex-wrap, centred, cards 472px wide with 20px column gap (x 238 and 730) and 20px row gap; row 1 y 2644 h 223; row 2 y 2887 h 151; row 3 y 3057 h 175; row 4 y 3252 h 175; row 5 y 3446 h 127; row 6 (single, centred x 484) y 3592 h 127. Each row's two cards share the taller height
- phone: heading 24.71px; single column of 312px cards at x 39 from y 2872, 19-20px apart, heights 323, 251, 199, 227, 247, 175, 223, 151, 151, 127, 151
- anatomy:
  - card: #DAEAF9 fill, radius 8px, padding 16px 16px 19.2px, no border, no shadow, no hover change
  - card title: h3 20.8px weight 500 (renders 400), centred, a #326CE5 link (underline on hover), 16px below it the body
  - card body: 16px/24px #212529 left-aligned
  - titles link: card 1 to /docs/concepts/workloads/controllers/deployment/, card 2 to /docs/concepts/services-networking/service/, the rest to their concept pages
  - cards verbatim, in order:
  - 1. Automated rollouts and rollbacks: Kubernetes progressively rolls out changes to your application or its configuration, while monitoring application health to ensure it doesn't kill all your instances at the same time. If something goes wrong, Kubernetes will rollback the change for you. Take advantage of a growing ecosystem of deployment solutions.
  - 2. Service discovery and load balancing: No need to modify your application to use an unfamiliar service discovery mechanism. Kubernetes gives Pods their own IP addresses and a single DNS name for a set of Pods, and can load-balance across them.
  - 3. Storage orchestration: Automatically mount the storage system of your choice, whether from local storage, a public cloud provider, or a network storage system such as iSCSI or NFS.
  - 4. Secret and configuration management: Deploy and update Secrets and application configuration without rebuilding your image and without exposing Secrets in your stack configuration.
  - 5. Automatic bin packing: Automatically places containers based on their resource requirements and other constraints, while not sacrificing availability. Mix critical and best-effort workloads in order to drive up utilization and save even more resources.
  - 6. Batch execution: In addition to services, Kubernetes can manage your batch and CI workloads, replacing containers that fail, if desired.
  - 7. Self-healing: Kubernetes restarts containers that crash, replaces entire Pods where needed, reattaches storage in response to wider failures, and can integrate with node autoscalers to self-heal even at the node level.
  - 8. Horizontal scaling: Scale your application up and down with a simple command, with a UI, or automatically based on CPU usage.
  - 9. Vertical scaling: Automatically adjust resource requests and limits based on actual usage patterns.
  - 10. IPv4/IPv6 dual-stack: Allocation of IPv4 and IPv6 addresses to Pods and Services
  - 11. Designed for extensibility: Add features to your Kubernetes cluster without changing upstream source code.
  - Card box-sizing border-box: 472.44px wide at 1440 (content width 440.44px after 16px side padding); 312px at 390 (content 280px). With Open Sans 16px/24px, card 1's body sets in exactly 6 lines at 1440 (144px) and the card is 223px: 16 top + 28 title + 16 gap + 144 + 19.2 bottom. Never 7 lines.
  - Card title line-height: 28px at 20.8px (CSS 'normal' in Open Sans = 1.346). Set it explicitly to 28px, not 1.2 and not 'normal' with a fallback font.
- components:
  - feature card

**CNCF graduated**
- summary: White strip: one centred line and the CNCF logo
- ground: #FFFFFF
- desktop: y 3752-3942 (190px), padding 30px. p 19.2px/28.8px 400 #212529 centred at y 3782: "We are a CNCF graduated project" with "CNCF" an underlined #212529 link to https://cncf.io/. Logo 364x69 centred at y 3842
- phone: y 5323-5542; line wraps to 2 lines (y 5353-5411); logo 364x69 at x 13 y 5442
- anatomy:
  - CNCF logo full colour: #0086FF and #93EAFF mark, black wordmark "CLOUD NATIVE / COMPUTING FOUNDATION"
  - no button
- components:

**Footer**
- summary: Dark textured footer, three columns: social icons left, three centred legal lines, community icons right
- ground: #403F4C under linear-gradient(rgba(0,0,0,0.525), rgba(0,0,0,0.5)) plus texture.png, so it renders about #1E1E24 with faint network lines
- anatomy:
  - desktop y 3942-4170 (228px), padding 48px 16px; columns 352 / 704 / 352 (col-sm-3 / col-sm-6 / col-sm-3)
  - left icon row (x 36-257, y 3992, 24px Font Awesome glyphs #FFFFFF, ~16px apart), in order: YouTube (https://youtube.com/kubernetescommunity), Forum envelope (https://discuss.kubernetes.io/), Server Fault stack-overflow glyph (https://serverfault.com/questions/tagged/kubernetes), LinkedIn (https://www.linkedin.com/company/kubernetes/), Bluesky (https://bsky.app/profile/kubernetes.io), X (formerly Twitter) (https://x.com/kubernetesio)
  - right icon row, right-aligned (x 1261-1404): Contributor website laptop-code (https://k8s.dev/), GitHub (https://github.com/kubernetes/kubernetes), Slack (https://slack.k8s.io/), Events Calendar calendar-days (https://calendar.google.com/calendar/embed?src=calendar%40kubernetes.io)
  - centre column text 14px/21px #E9E9E9 centred, 680px wide (x 380-1060), 16px between paragraphs:
  - line 1 verbatim: "© 2026 The Kubernetes Authors | Documentation Distributed under CC BY 4.0" ("CC BY 4.0" link #FFFFFF to https://git.k8s.io/website/LICENSE)
  - line 2 verbatim: "© 2026 Copyright © Kubernetes a Series of LF Projects, LLC. For website terms of use, trademark policy and other project policies please see https://lfprojects.org/policies/" (URL is a #FFFFFF link), wraps to 2 lines
  - line 3 verbatim: "ICP license: 京ICP备17074266号-3"
  - no address, no phone number, no footer link columns
  - icon hover: underline only (no colour change)
- phone: y 5542-5917 (375px). Same three columns kept side by side: left icons stacked vertically (6 icons, 21.6px, ~42px pitch, x 36), centre text column 215px wide (x 88-303) with the three lines wrapping to 3/6/2 lines, right icons stacked vertically right-aligned (4 icons, x ~334)

**On dark grounds**
- secondary button: Watch Video: #FFFFFF fill, #495057 text, radius 8px (hover text #326CE5). On navy: Hide this notice #326CE5 fill, #FFFFFF text, radius 6px (hover #1A53CA)
- link: #FFFFFF, underlined (announcement, events) or plain white (footer links)
- muted text: #E9E9E9 (footer)
- hairline: none: no rules or dividers on any dark ground
- logo variant: nav at the top of the page, on navy: white-text horizontal lockup (#326CE5 heptagon, white helm, white wordmark); scrolled, on #212529, the wordmark letters turn #326CE5. KubeCon/CNCF event lockup all-white on navy

## Components

- **button primary** (observed): fill #326CE5, text #FFFFFF, radius 6, height 33, padding x 20, font size 16, weight 400, face body, example Hide this notice (156x33) in the announcement band
  - hover (observed): background-color #1A53CA
- **button video** (observed): fill #FFFFFF, text #495057, radius 8, height 134, padding x 24, font size 28.8, weight 400, face body, example Watch Video, 224x134, text wraps to two lines, '▶ ' glyph before it; desktop only
  - hover (observed): color #326CE5, transition color 0.15s
- **detail primary button hide this notice** (observed): name Primary button (Hide this notice), anatomy #326CE5 fill, #FFFFFF 16px/20.8px Open Sans 400, padding 6px 20px, radius 6px, no border, 156x33, where announcement
  - hover (observed): 
  - focus (observed): 
- **detail watch video button** (observed): name Watch Video button, anatomy #FFFFFF fill, #495057 28.8px/43.2px 400, padding 24px, radius 8px, 224x134 (wraps to 2 lines), ::before "▶︎ ", where video band (desktop only)
  - hover (observed): 
- **search field** (observed): name Search field, anatomy pill: wrapper radius 20px, outline 1px solid #495057, white fill; magnifier 16px rgba(33,37,41,0.75) inset 12px; placeholder "Search this site" 16px; height 38px
  - focus (observed): 
- **feature card** (observed): name Feature card, anatomy #DAEAF9, radius 8px, padding 16px 16px 19.2px, 472px desktop / 312px phone; centred #326CE5 20.8px title link, 16px gap, left 16px/24px #212529 body, fill #DAEAF9, radius 8, padding 16px 16px 19.2px, width 472px desktop, 312px phone
  - hover (observed): 
- **body link** (observed): name Body link, anatomy #326CE5, no underline
  - hover (observed): 
- **nav link** (observed): name Nav link, anatomy 14px/700 #FFFFFF, padding 8px
  - hover (observed): 
  - scrolled (observed): 
- **event link dark ground** (observed): name Event link (dark ground), anatomy 24px #FFFFFF line, bold underlined place name
  - hover (observed): 
- **social icon** (observed): name Social icon, anatomy Font Awesome 24px #FFFFFF glyph link with title attribute
  - hover (observed): 
- **hamburger phone** (observed): name Hamburger (phone), anatomy 54x46, FA bars 32px #FFFFFF, padding 6px 12px, radius 6px, gradient rgba(255,255,255,0.15) to transparent, inset 0 1px 0 rgba(255,255,255,0.15)
  - open (observed): 
- **heading self-link** (observed): name Heading self-link, anatomy "#" after H4, #326CE5 18.6-19.4px
  - desktop (observed): 
  - phone (observed): 

## Signature moves

### The helm in a blue heptagon

Where: Every lockup, the favicon, the nav logo, the KubeCon mark, the features-section icon.
Do: A white seven-spoke ship's wheel on a Kubernetes Blue #326CE5 heptagon with a white outline. Use the official SVG from cncf/artwork; never redraw. The seven spokes are an observed detail of the file, not a published rule.
Don't: change its colors, design elements or proportions (the Linux Foundation's own three incorrect examples use this icon).
Example: "kubernetes".

### One blue, everything else neutral

Where: Site links, buttons, nav hover, illustrations, the logo.
Do: #326CE5 is the only brand color; the site pairs it with white, Bootstrap greys and dark bands, plus teal #09C1D1 and pale teal #C9E9EC inside illustrations only.
Don't: introduce a second brand hue for text or buttons.
Example: "Run K8s anywhere".

### Flat blue-teal technical illustrations

Where: Homepage feature blocks (flower, scalable, blocks, suitcase).
Do: Flat geometric shapes in Illustration blue #316CE6 and teal #09C1D1 with pale-teal tints; containers as squares and stacks, no outlines, no gradients, no people.
Don't: use photography or gradients in their place.

### Code style inside the sentence

Where: Docs and any technical copy.
Do: API kinds in UpperCamelCase plain text (ConfigMap), tools and fields in code style (`kubectl`, `replicas`), commands without the $ prompt.
Don't: put API kinds in backticks or split them into words.
Example: "The `kubectl run` command creates a Pod.".

## Messaging: rules

The homepage carries the messaging: one title (Production-Grade Container Orchestration), a definition sentence, and three short feature heads (Planet scale, Never outgrow, Run K8s anywhere). No messaging framework is published.

Why it works: A definition first and three outcomes after suits a project whose readers arrive wanting to know what it is.

|  |  |
|---|---|
| Title | Production-Grade Container Orchestration |
| Pillars | Planet scale; Never outgrow; Run K8s anywhere |
| Status | CNCF graduated project |

- Lead with the definition: an open source system for automating deployment, scaling and management of containerized applications
- Back claims with lineage (Google, 15 years) and status (CNCF graduated)
- Say what it is not: not an all-inclusive PaaS
- Don't imply Linux Foundation or CNCF endorsement of a product
- Don't promise future features

Real examples, to look at on Kubernetes's own pages (not for reuse):
- Homepage: definition under the flower illustration: https://kubernetes.io/

Sources: https://kubernetes.io/, https://kubernetes.io/docs/concepts/overview/

## Voice: rules

The published voice is SIG Docs' documentation style guide: US English, you not we, present tense, active voice, no idioms, no Latin abbreviations, no words that assume ease, no dated words. CNCF adds the naming rules (K8s, cloud native, open source).

Why it works: A global, volunteer-written project with many second-language readers needs plain, precise, neutral prose that stays true across releases.

|  |  |
|---|---|
| Spelling | US English |
| Person | you; avoid we |
| Headings | sentence case (body), title case (page title) |
| Quotes | punctuation outside |
| Callouts | Note, Caution, Warning |

- Address the reader as you; the project, not we, does things
- Present tense, active voice, simple direct verbs
- Sentence case for body headings; title case for page titles
- UpperCamelCase API kinds; code style for commands, tools and fields
- Keep paragraphs under six sentences
- Use a version number instead of current or new
- Don't say just, simply, easy, easily or simple
- Don't say please, in order to, e.g. or i.e.
- Don't use idioms like under the hood or turn up
- Don't use we for the project
- Don't write click here

Do and don't:
- Do: "Run the container.". Plain verb, no assumed ease (the guide's own example).
- Don't: "Simply run the container.". 'Simply' assumes a level of understanding.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- SIG Docs style guide with its do/don't tables: https://kubernetes.io/docs/contribute/style/style-guide/

Sources: https://kubernetes.io/docs/contribute/style/style-guide/, https://kubernetes.io/docs/contribute/style/content-guide/, https://github.com/cncf/foundation/blob/main/style-guide.md

## Logo: rules

The logo is a white ship's wheel in a Kubernetes Blue heptagon, plus the lowercase wordmark kubernetes. CNCF ships it in 3 layouts (horizontal, stacked, icon) and 5 versions (color, black, white, all blue, white text) as PNG and SVG: 26 unique files. In the full-color file the wordmark is black; all blue makes it blue; white text makes it white for dark grounds.

Why it works: Helmsman in Greek, drawn as a wheel: the name and the mark tell one story.

|  |  |
|---|---|
| Layouts | horizontal, stacked, icon |
| Versions | color, black, white, all blue, white text |
| Formats | PNG, SVG (26 unique) |
| Color | #326CE5 / Pantone 285 C |
| Licence | Apache-2.0 or CC-BY-4.0 |
| Clear space | not published |
| Minimum size | not published |

- Use only the official files from cncf/artwork
- Use the official blue whenever possible (Pantone 285 C print, #326CE5 digital)
- White text version on dark grounds; color version on light
- The logo may be used as a link to the project's home page
- Permission is granted to modify the mark for non-commercial uses such as t-shirts and stickers
- Logo files are licensed Apache-2.0 or CC-BY-4.0; the trademark remains governed by the LF policy
- Don't change its colors
- Don't change its design elements
- Don't change its scale or proportions
- Don't superimpose other elements on it
- Don't combine it with another mark or put it in your own logo
- Don't imply Linux Foundation endorsement

Not published: clear space; minimum size; placement.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- CNCF artwork README: every lockup: https://github.com/cncf/artwork/tree/main/projects/kubernetes
- Correct: the official icon: https://www.linuxfoundation.org/legal/trademark-usage
- Incorrect: changed colors: https://www.linuxfoundation.org/legal/trademark-usage
- Incorrect: changed design elements: https://www.linuxfoundation.org/legal/trademark-usage
- Incorrect: changed scale: https://www.linuxfoundation.org/legal/trademark-usage

Sources: https://github.com/kubernetes/kubernetes/blob/master/logo/usage_guidelines.md, https://github.com/cncf/artwork/tree/main/projects/kubernetes, https://github.com/kubernetes/kubernetes/blob/master/logo/LICENSE, https://www.linuxfoundation.org/legal/trademark-usage

## Color: rules

One official color: Kubernetes Blue, #326CE5 on screen and Pantone 285 C in print. Everything else on kubernetes.io is the website's: white pages, #212529 text, Bootstrap greys, light-blue feature cards #DAEAF9, a navy announcement band, dark bands and footer.

Why it works: A single blue keeps a community-built, multi-vendor ecosystem recognizable without a design team policing a palette.

|  |  |
|---|---|
| Official | #326CE5 |
| Print | Pantone 285 C |
| Site ink | #212529 (observed) |
| Site surface | #F9F9F9 (observed) |

- Use #326CE5 for the logo whenever possible
- Use Pantone 285 C for print
- On the site, blue marks links and actions; text stays near-black or white
- Don't recolor the logo
- Don't add a second brand hue for type

Not published: secondary palette; tints; CMYK; proportions; text and background pairings.

Do and don't:
- Do: "Kubernetes Features". Kubernetes Blue on white, as the site uses it.
- Don't: "Kubernetes Features". Teal is an illustration fill, not a type color.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- The whole official color page: https://github.com/kubernetes/kubernetes/blob/master/logo/colors.md

Sources: https://github.com/kubernetes/kubernetes/blob/master/logo/colors.md, https://github.com/kubernetes/website/tree/main/assets/scss

## Typography: rules

No typeface is published. kubernetes.io sets everything in Open Sans (Docsy's default, from Google Fonts at 300/400/700) with a system fallback stack, and code in the system monospace stack.

Why it works: A neutral, open humanist sans reads well across the dozen-plus languages the docs are translated into.

|  |  |
|---|---|
| Display | Open Sans 500-700 (observed) |
| Body | Open Sans 400 (observed) |
| Mono | system SFMono/Menlo/Consolas stack (observed); Roboto Mono is our stand-in |
| Licence | SIL OFL 1.1 |

- Open Sans is the real face on the site, open (SIL OFL), no stand-in needed
- Body 400; headings 500 to 700 as rendered
- Code in a monospace stack; there is no brand mono
- Don't treat the site's Bootstrap scale as a published type system

Not published: typefaces; type scale; weights; tracking.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- Hero h1 in Open Sans on phone: https://kubernetes.io/

Sources: https://github.com/kubernetes/website/tree/main/assets/scss, https://kubernetes.io/

## Graphic elements: rules

The helm and its heptagon recur as the only graphic element: the nav logo, the favicon, the KubeCon mark and the small helm above Kubernetes Features. Dark bands carry a faint network-node texture image.

Why it works: The wheel is distinctive enough to stand alone.

|  |  |
|---|---|
| Element | helm in heptagon |
| Texture | node-network image on dark bands (observed) |

- Use the official icon file, never a redraw
- Don't alter the wheel or heptagon

Not published: patterns; textures; grids.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- Helm above the feature cards: https://kubernetes.io/

Sources: https://github.com/cncf/artwork/tree/main/projects/kubernetes, https://kubernetes.io/

## Iconography: rules

No icon set is published. The site uses Font Awesome 6 (free and brands) for UI and social icons.

Why it works: Off-the-shelf icons suit a docs site maintained by volunteers.

|  |  |
|---|---|
| Library | Font Awesome 6 (observed) |

- Font Awesome 6 for UI icons on the site (observed)

Not published: icon style; grid; stroke.

Sources: https://kubernetes.io/

## Illustration: rules

Homepage illustrations are flat, geometric SVGs in blue #316CE6 and teal #09C1D1 with pale-teal tints: containers as squares feeding the helm (flower), a four-way scaling diamond, a growing block grid, a hexagon-patterned suitcase.

Why it works: Flat geometry explains abstract infrastructure without people or photos.

|  |  |
|---|---|
| Colors | #316CE6, #09C1D1, #C9E9EC (observed) |
| Style | flat geometric |

- Flat fills, no outlines or gradients (observed)
- Blue and teal only, with pale-teal tints
- Don't add gradients or 3D

Not published: illustration guidelines.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- Flower: containers into the helm onto a node: https://kubernetes.io/
- Never outgrow blocks: https://kubernetes.io/

Sources: https://kubernetes.io/

## Photography: rules

Not published. The homepage shows one video still (a KubeCon talk) and no other photography.

Why it works: Not stated.

|  |  |
|---|---|
| Guidance | not published |

Not published: photography style.

Sources: https://kubernetes.io/

## Interface and layout: rules

kubernetes.io is a Docsy (Hugo) site on Bootstrap 5: fixed dark nav with the blue logo, an optional navy KubeCon announcement, a dark hero with the h1, a search bar, centered illustrations over left-aligned text, a light-grey feature grid of light-blue cards, a grey events band and a textured dark footer.

Why it works: A documentation-first site: search and reading come before marketing.

|  |  |
|---|---|
| Framework | Docsy on Bootstrap 5 (observed) |
| Container | 1200px on desktop (observed) |

- Docs headings ordered, no h4-h6 unless necessary (published)
- Use alert shortcodes for Note, Caution, Warning (published)
- Homepage pattern belongs to the next step (page anatomy)
- Don't use horizontal rules for decoration
- Don't use bold text as a heading

Not published: grid; margins; spacing scale.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- Homepage, desktop: https://kubernetes.io/

Sources: https://kubernetes.io/docs/contribute/style/style-guide/, https://github.com/kubernetes/website/tree/main/assets/scss, https://kubernetes.io/

## Rules: rules

Naming and trademark rules come from the CNCF style guide and the Linux Foundation trademark policy: K8s is the abbreviation, Kubernetes is capitalized, and the mark is an adjective that no product may wear.

Why it works: An open source project lives on others using its name truthfully; the rules protect neutrality.

|  |  |
|---|---|
| Abbreviation | K8s |
| Pronunciation | koo-bur-NET-ees |
| Compatibility | <product> for Kubernetes |
| Contact | trademarks@linuxfoundation.org |

- Write K8s (k8s tolerated), never K8 or K8S
- Kubernetes is pronounced koo-bur-NET-ees; KubeCon is KYOOB-kon; kubectl is cube-control
- cloud native and open source, lowercase, no hyphen
- Use full form first in mass communication with the trademark notice
- Name products "<product> for Kubernetes" or "compatible with Kubernetes"
- Never use the mark in a product name, domain or company logo
- Don't use the mark as a noun or verb, plural or possessive
- Don't use it more prominently than your own name
- Don't use the logo to promote events or products without written permission
- Don't claim certification without passing conformance

Do and don't:
- Do: "Run K8s anywhere". K8s, the CNCF-preferred abbreviation.
- Don't: "Run K8S anywhere". K8S gets the capitalization wrong.

Real examples, to look at on Kubernetes's own pages (not for reuse):
- CNCF style guide: the Kubernetes entry: https://github.com/cncf/foundation/blob/main/style-guide.md
- Correct and incorrect compatibility naming: https://www.linuxfoundation.org/legal/trademark-usage

Sources: https://github.com/cncf/foundation/blob/main/style-guide.md, https://www.linuxfoundation.org/legal/trademark-usage, https://kubernetes.io/docs/contribute/style/style-guide/

## Applications

| Format | What | Source |
|---|---|---|
| website | kubernetes.io: docs-first Docsy site, dark nav, search, flat illustrations, light-blue feature cards. | https://kubernetes.io/ |
| documentation | Docs in 15+ languages written to the SIG Docs style guide with Note/Caution/Warning callouts. | https://kubernetes.io/docs/contribute/style/style-guide/ |
| events | KubeCon + CloudNativeCon announcements in a navy band with the KubeCon/CloudNativeCon lockup. | https://kubernetes.io/ |
| merch | T-shirts, hoodies and stickers via the CNCF store; non-commercial modification of the mark is permitted. | https://github.com/cncf/artwork/tree/main/projects/kubernetes |

## By format

How our engine applies Kubernetes' system to each format. This is our recipe built from their rules and the site, not something Kubernetes publishes. Level = how much blue and illustration the format carries (0 plain, 5 full). Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way kubernetes.io is built (kit.spec.page): a fixed 64px nav, transparent over a navy #113E82 announcement band at the top (#212529 once scrolled), with the white-text horizontal lockup, a pill search, flat blue-teal illustrations centred over left-aligned 14px Open Sans copy on white, the #F9F9F9 feature grid of #DAEAF9 cards, a textured dark footer. Plain institutional homepage voice | which sections; whether a navy announcement band runs; how many feature cards |
| Docs page | 1 | Sentence-case headings, you and present tense, UpperCamelCase API kinds, code style for commands, Note/Caution/Warning callouts | length and depth |
| Deck | 2 | Official lockup, white or dark grounds, Kubernetes Blue as the only accent, Open Sans | illustrations; one blue title slide |
| Social post | 3 | Icon or horizontal lockup unaltered, one blue, plain line in K8s naming | blue ground with the white lockup |
| Third-party product page | 1 | "<product> for Kubernetes" naming, trademark notice, your own brand more prominent | none on the mark |
| Swag | 4 | Non-commercial only if the mark is modified | playful variations of the helm |

## Checks before anything ships

- **Logo hidden**: Cover the helm. If the page is just white, blue links and Open Sans, it reads as any docs site; the illustrations and the plain, exact copy are what's left of Kubernetes.
- **Copy lint**: For NEW copy: search for just, simply, easy, please, currently, new, e.g., i.e., K8S, cloud-native and open-source, and cut each. A rebuild of the existing homepage keeps its own lines verbatim.
- **Endorsement**: Does anything imply the Linux Foundation, CNCF or Kubernetes endorses a product? Rewrite as '<product> for Kubernetes'.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Kubernetes's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Secondary palette, tints, CMYK and color proportions: not published (only #326CE5 / Pantone 285 C).
- Typefaces and a type scale: not published; Open Sans and sizes are observed on kubernetes.io.
- Logo clear space, minimum size and placement: not published.
- Photography: not published.
- Motion: not published.
- Illustration guidelines: not published; style observed from homepage SVGs.
- Icon style: not published; the site uses Font Awesome 6.
- Layout grid, margins and spacing: not published.
- Mission, values and a messaging framework: not published in these sources.
- Brand personality traits: not published; ours are read from the docs style guide.
- The color lockup's wordmark color is not stated; it renders black because its paths are unstyled.
- Official blue drifts in practice: #326DE5 in name_blue.svg, #316CE6 in site illustrations, #326DE6 in some site CSS.
- Pronunciation hint in the SVG ids (kyoob-cuttle) differs from CNCF's canonical kubectl 'cube-control'.
- The homepage copy ('easily', 'effortlessly') breaks the docs style guide's own word rules.
- The usage guide links the LF trademark page at an old URL (/trademark-usage/); current is /legal/trademark-usage.

Logos and reference images belong to Kubernetes. Look at them on Kubernetes's own pages; don't reuse them.