<!-- Generated by ExtractVibe — https://extractvibe.com/brand/rke2.io -->
<!-- Extracted: 2026-11-07T20:49:40.400Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "RKE2"
description: "RKE2 projects a serious, highly technical, and enterprise-focused image, emphasizing reliability and next-generation capabilities. Its visual identity is clean and functional, designed for a developer audience that values directness and precision."
colors:
  primary: "#3860be"
  secondary: "#ebedf0"
  tertiary: "#00a400"
  neutral: "#1c1e21"
  surface: "#ffffff"
  on-surface: "#1c1e21"
  on-surface-secondary: "#1c1e21"
  border: "#d4d5d8"
  link: "#1c1e21"
  error: "#fa383e"
  warning: "#ffba00"
  success: "#00a400"
  info: "#54c7ec"
  primary-dark: "#2d8bc8"
  secondary-dark: "#d4d5d8"
typography:
  display-lg:
    fontFamily: "Poppins"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "60px"
  headline-lg:
    fontFamily: "Poppins"
    fontSize: "32px"
    fontWeight: "700"
    lineHeight: "40px"
  headline-md:
    fontFamily: "Lato"
    fontSize: "18px"
    fontWeight: "700"
    lineHeight: "21.6px"
  headline-sm:
    fontFamily: "Lato"
    fontSize: "14.08px"
    fontWeight: "600"
    lineHeight: "21.12px"
  body-md:
    fontFamily: "Lato"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "26.4px"
rounded:
  sm: "2px"
  md: "6.4px"
  lg: "32px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#1c1e21"
    rounded: "0px"
    padding: "8px 16px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#1c1e21"
  button-ghost:
    textColor: "#3d98d3"
    rounded: "4px"
    padding: "4px 8px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#3d98d3"
  button-outline:
    textColor: "#3d98d3"
    rounded: "6.4px"
    padding: "16px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#dadde1"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#ff6a52"
    textColor: "#ffffff"
    rounded: "2px"
    padding: "12px 10px"
    fontSize: "11.382px"
    fontWeight: "600"
    borderColor: "#ff6a52"
    borderWidth: "1px"
---

# RKE2 — Design System

## Overview

RKE2 design embodies the archetypes of The Sage and The Ruler, projecting an image of authoritative technical expertise and unwavering reliability. This system is engineered for a developer-first audience, prioritizing clarity, precision, and functional elegance. Our visual language is direct and purposeful, mirroring the meticulous nature of enterprise-grade infrastructure. We align with the aesthetic principles of Kubernetes, Red Hat OpenShift, VMware Tanzu, and SUSE Rancher, brands that command respect through their robust capabilities and sophisticated user experiences. The emotional register is serious and confident, fostering a sense of trust and competence essential for critical systems.

This design system is not playful, whimsical, or consumer-oriented. It avoids decorative flourishes and trendy aesthetics that could detract from its core mission of conveying stability and advanced technical prowess. We do not use gradients for primary elements, nor do we employ overly bright or saturated colors that might suggest a less serious application. The focus remains on a clean, structured presentation that supports complex information without visual clutter, ensuring that the interface is a tool for efficient operation rather than a source of distraction. Every design decision reinforces RKE2's position as a next-generation, enterprise-ready solution.

**Key characteristics:**

- Vibe — enterprise-ready, technical, serious, developer-first, functional, direct
- Archetypes — The Sage, The Ruler
- Comparable to — Kubernetes, Red Hat OpenShift, VMware Tanzu, SUSE Rancher
- Design era — flat-2.0
- Emotional tone — authoritative-reliable
- Target audience — DevOps engineers, cloud architects, and IT decision-makers in enterprise environments who require robust, secure, and cutting-edge Kubernetes solutions.
- Visual energy — 4/10 (moderate)

## Colors

The RKE2 color palette is anchored by a primary blue, #3860be, signifying trust, stability, and advanced technology. This deep, authoritative hue communicates enterprise readiness and technical depth. The accompanying surface color, #f6f7f8, provides a clean, neutral backdrop that enhances readability and allows content to take precedence. This restrained palette avoids visual noise, reinforcing the brand's serious and functional character. Colors are used purposefully, guiding the user without overwhelming them, aligning with a direct and precise communication style.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#3860be` | Royal Blue |
| secondary | `#ebedf0` | Lavender |
| accent / tertiary | `#00a400` | Green |
| surface | `#ffffff` | White |
| background | `#f6f7f8` | White Smoke |
| text | `#1c1e21` | Near-Black |
| secondary text | `#1c1e21` | Near-Black |
| border | `#d4d5d8` | Light Gray |
| link | `#1c1e21` | Near-Black |
| muted | `#1c1e21` | Near-Black |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#2d8bc8` | Steel Blue |
| secondary | `#d4d5d8` | Light Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#00a400` | Confirmations, positive states |
| warning | `#ffba00` | Caution, intermediate states |
| error | `#fa383e` | Failures, destructive actions |
| info | `#54c7ec` | Neutral information, tips |

## Typography

RKE2's typography system utilizes Lato and Poppins, selected for their legibility and professional appearance. Poppins serves as the primary display font, providing a modern yet grounded presence for headings and key information. Lato, a highly readable sans-serif, is employed for body text and interface elements, ensuring clarity and comfort during extended use. Hierarchy is established through considered variations in weight and size, not excessive font families. This direct approach to typography ensures information is consumed efficiently, reflecting the developer-first audience's need for precision and functional design.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Lato | body | self-hosted | 400, 500, 600, 700 |
| Poppins | heading | self-hosted | 700 |
| Lato | heading | self-hosted | 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Poppins | 48px | 700 | 60px | — |
| Heading 2 | Poppins | 32px | 700 | 40px | — |
| Heading 3 | Lato | 18px | 700 | 21.6px | — |
| Heading 4 | Lato | 14.08px | 600 | 21.12px | — |
| Body | Lato | 16px | 400 | 26.4px | — |

### Conventions

- Heading case — title-case
- Body line-height — 26.4px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.2) 0px 5px 40px 0px` |
| navigation | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` |

## Shapes

Border-radius scale:

- `sm` — 2px
- `md` — 6.4px
- `lg` — 32px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#1c1e21`
- Radius — `0px`
- Padding — `8px 16px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #1c1e21`
- Sample copy — "Skip to main content"

**Ghost**

- Text — `#3d98d3`
- Radius — `4px`
- Padding — `4px 8px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #3d98d3`
- Sample copy — "English"

**Outline**

- Text — `#3d98d3`
- Radius — `6.4px`
- Padding — `16px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #dadde1`
- Sample copy — "NextQuick Start"

**Primary**

- Background — `#ff6a52`
- Text — `#ffffff`
- Radius — `2px`
- Padding — `12px 10px`
- Font size — `11.382px`
- Font weight — `600`
- Border — `1px solid #ff6a52`
- Sample copy — "Accept Only Technical Cookies"

## Do's and Don'ts

### Do

- Use Poppins 700 for primary headings and Lato 600 or 700 for secondary headings, always in title-case.
- Set body text in Lato 400 or 500 with a line-height of 26.4px for optimal readability.
- Employ the primary brand color #3860be (light mode) or #2d8bc8 (dark mode) for key interactive elements and branding accents.
- Design primary CTA buttons with a #ff6a52 background, #ffffff text, 2px border-radius, and no border or shadow, using 12px 10px padding.
- Utilize a limited color palette, primarily focusing on #3860be, #00a400, #f6f7f8, and #1c1e21 for light mode, and #2d8bc8 for dark mode.
- Apply subtle shadows for depth on dropdowns (rgba(0, 0, 0, 0.2) 0px 5px 40px 0px) and navigation elements (rgba(0, 0, 0, 0.1) 0px 1px 2px 0px), but avoid them on buttons.
- Maintain a consistent border-radius system: 2px for small elements, 6.4px for medium, and 32px for large, reflecting a slightly rounded but mostly sharp aesthetic.
- Structure copy with advanced vocabulary and heavy technical jargon, maintaining a serious and matter-of-fact tone.

### Don't

- Do not use gradients anywhere in the design; maintain a flat color aesthetic.
- Avoid playful language, emojis, or exclamations in any official communication or UI copy.
- Do not use serif fonts; the brand strictly adheres to sans-serif typography with Lato and Poppins.
- Do not apply shadows to buttons; buttons should remain flat or have a subtle border.
- Avoid using overly rounded or pill-shaped elements; stick to the defined small (2px), medium (6.4px), and large (32px) border radii.
- Do not use a casual or accessible tone; the brand's voice is highly technical and direct, assuming an expert audience.
- Do not use a monochrome color scheme; incorporate the accent color #00a400 for specific highlights and status indicators.
- Avoid verbose or indirect CTA phrasing; CTAs should be direct, functional, and consent-focused like 'Accept All Cookies'.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 2/10 | formal |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 9/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 2/10 | technical |

### Copywriting style

- Avg. sentence length — 15 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — direct, functional, and consent-focused

### Sample copy

> RKE2 is Rancher's enterprise-ready next-generation Kubernetes distribution.

> Ingress NGINX went End-of-Life in March 2026. Starting with v1.36, Traefik is the default for new clusters.

> Accept Only Technical Cookies | Accept All Cookies

> It is a fully confo

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/rke2.io) | 100% |
| favicon | — | png | [link](brands/rke2.io/logo-0.png) | 95% |
| primary | — | svg | [link](brands/rke2.io/logo-1.svg) | 85% |
| logomark | — | svg | [link](brands/rke2.io/logo-svg-2.svg) | 90% |
| logomark | — | svg | [link](brands/rke2.io/logo-svg-3.svg) | 90% |

## Sources

- Live brand page — https://extractvibe.com/brand/rke2.io
- Raw JSON — https://extractvibe.com/api/brand/rke2.io
- DESIGN.md (this file) — https://extractvibe.com/api/brand/rke2.io/design.md
- Extracted — 2026-11-07T20:49:40.400Z
- Generator — ExtractVibe vv1
- Quality score — 90/100