<!-- Generated by ExtractVibe — https://extractvibe.com/brand/rancher.com -->
<!-- Extracted: 2026-11-07T20:50:01.553Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Rancher"
description: "Rancher projects a serious, highly technical, and authoritative vibe, tailored for enterprise operations teams managing complex Kubernetes environments. It communicates expertise and reliability through direct, jargon-heavy language and a clean, functional visual style."
colors:
  neutral: "#2453ff"
  surface: "#dddddd"
  on-surface: "#000000"
  on-surface-secondary: "#2453ff"
  border: "#dddddd"
  link: "#2453ff"
typography:
  display-lg:
    fontFamily: "Poppins"
    fontSize: "50px"
    fontWeight: "500"
    lineHeight: "58.35px"
  headline-lg:
    fontFamily: "Poppins"
    fontSize: "40px"
    fontWeight: "500"
    lineHeight: "50px"
  headline-md:
    fontFamily: "Poppins"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "32px"
  headline-sm:
    fontFamily: "Poppins"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "34px"
  body-md:
    fontFamily: "Poppins"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#2453ff"
    rounded: "0px"
    padding: "14px 50px 14px 20px"
    fontSize: "20px"
    fontWeight: "600"
    borderColor: "#2453ff"
---

# Rancher — Design System

## Overview

Rancher's design system embodies the archetypes of The Sage and The Ruler, projecting a serious, highly technical, and authoritative presence. This is a system built for enterprise operations teams navigating the complexities of Kubernetes, where clarity, reliability, and functional precision are paramount. Our aesthetic is direct and unadorned, leveraging a developer-first approach that prioritizes utility and information density over decorative elements. We align with the established visual languages of brands like Red Hat, VMware, HashiCorp, and SUSE, communicating expertise and trustworthiness through a clean, functional style.

This design system is not whimsical, playful, or consumer-oriented. It eschews gradients, overly soft shadows, and illustrative elements that might detract from its core mission of presenting complex technical data in an accessible, actionable manner. Every design decision reinforces Rancher's position as a critical tool for managing mission-critical infrastructure, demanding a visual language that is as robust and dependable as the software it represents. The emotional register is one of calm competence and unwavering stability, designed to instill confidence in users operating at the highest levels of technical responsibility.

**Key characteristics:**

- Vibe — enterprise-focused, technical, authoritative, serious, functional, developer-first
- Archetypes — The Sage, The Ruler
- Comparable to — Red Hat, VMware, HashiCorp, SUSE
- Design era — contemporary-functional
- Emotional tone — competent-reliable
- Target audience — Enterprise operations teams, DevOps engineers, and IT decision-makers responsible for deploying, managing, and securing Kubernetes infrastructure across diverse environments.
- Visual energy — 4/10 (moderate)

## Colors

The Rancher color philosophy is driven by a commitment to functional clarity and a serious, enterprise-grade aesthetic. With no primary brand color defined, our system defaults to a minimalist approach, leveraging a pristine #ffffff surface color to maximize content legibility and reduce visual noise. This deliberate absence of a dominant hue allows the technical data and UI elements themselves to take precedence, signaling an unbiased, data-driven environment. Accent colors are reserved for critical feedback, interactive states, and data visualization, ensuring that color use is always purposeful and never decorative, reinforcing the brand's authoritative and technical character.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#dddddd` | Gainsboro |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#2453ff` | Royal Blue |
| border | `#dddddd` | Gainsboro |
| link | `#2453ff` | Royal Blue |
| muted | `#2453ff` | Royal Blue |

## Typography

Rancher's typography system utilizes Poppins and Open Sans, sans-serif typefaces chosen for their legibility, modern appearance, and professional demeanor. Poppins serves as the primary display font, providing a clean and confident voice for headings and key UI elements, while Open Sans ensures optimal readability for body text, labels, and dense technical information. The typographic hierarchy is direct and functional, designed to guide the user through complex interfaces with minimal cognitive load. This system communicates precision, clarity, and a serious commitment to technical communication, aligning with our developer-first, enterprise-focused ethos.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Poppins | body | self-hosted | 400, 600 |
| Poppins | heading | self-hosted | 400, 500 |
| sans-serif | body | system | 400 |
| Open Sans | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Poppins | 50px | 500 | 58.35px | — |
| Heading 2 | Poppins | 40px | 500 | 50px | — |
| Heading 3 | Poppins | 24px | 400 | 32px | — |
| Heading 4 | Poppins | 24px | 400 | 34px | — |
| Body | Poppins | 16px | 400 | 18.4px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 55, 79, 0.1) 10px 12px 24px 0px` |
| card | `rgba(0, 117, 168, 0.15) 5px 20px 40px 0px` |

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#2453ff`
- Radius — `0px`
- Padding — `14px 50px 14px 20px`
- Font size — `20px`
- Font weight — `600`
- Border — ` solid #2453ff`
- Sample copy — "Why Rancher?"

## Do's and Don'ts

### Do

- Utilize Poppins font for all headings and body text, with system sans-serif or Open Sans as fallbacks for body text.
- Apply Poppins at weights 400, 500, and 600 for headings, always in title-case.
- Maintain a body line-height of 18.4px for optimal readability of technical content.
- Use a stark white background (#ffffff) with pure black text (#000000) for high contrast in light mode.
- Implement secondary buttons with a #ffffff background, #2453ff text, a #2453ff border, and sharp 0px border-radius.
- Ensure secondary buttons have specific padding of 14px top/bottom, 50px right, and 20px left.
- Apply subtle, multi-layer shadows to card elements: rgba(0, 55, 79, 0.1) 10px 12px 24px 0px and rgba(0, 117, 168, 0.15) 5px 20px 40px 0px.
- Employ advanced, heavy jargon vocabulary, speaking directly to a technically proficient audience.
- Structure content with clear, direct action, benefit-focused, or navigational CTAs.

### Don't

- Avoid using gradients in any visual elements, as the brand exclusively uses flat colors.
- Do not use emojis in any marketing or product copy.
- Refrain from using exclamations in copy to maintain a serious and matter-of-fact tone.
- Do not apply shadows to buttons; shadows are reserved for card elements only.
- Avoid rounded corners on buttons or interactive elements; maintain a sharp 0px border-radius.
- Do not use serif fonts; the brand strictly adheres to sans-serif typography.
- Avoid casual or playful language; maintain a serious and technical tone.
- Do not deviate from the core color palette of #ffffff, #000000, and #2453ff; avoid introducing new vibrant or accent colors.

*Source — merged*

## Voice

### Tone (1–10 scale)

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

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — mix of direct action, benefit-focused, and navigational
- Rhetorical devices — repetition

### Sample copy

> Rancher, the open-source multi-cluster orchestration platform, lets operations teams deploy, manage and secure enterprise Kubernetes.

> From datacenter to cloud to edge, Rancher lets you deliver Kubernetes-as-a-Service.

> Manage your entire cloud-native stack with Rancher Prime, covering OS, storage, VMs, containers, and more — on one platform.

> Secure your Kubernetes with Rancher Prime with zero-trust full lifecycle container management, advanced policy management and insights.

> More than 30,000 teams use Rancher every day to innovate faster

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/rancher.com) | 100% |
| favicon | — | png | [link](brands/rancher.com/logo-0.png) | 95% |
| primary | color | svg | [link](brands/rancher.com/logo-1.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-2.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-4.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-5.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-8.svg) | 85% |
| primary | dark | png | [link](brands/rancher.com/logo-9.png) | 85% |
| primary | color | svg | [link](brands/rancher.com/logo-10.svg) | 85% |

## Sources

- Official brand guidelines — https://rancher.com/brand-guidelines
- Live brand page — https://extractvibe.com/brand/rancher.com
- Raw JSON — https://extractvibe.com/api/brand/rancher.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/rancher.com/design.md
- Extracted — 2026-11-07T20:50:01.553Z
- Generator — ExtractVibe vv1
- Quality score — 100/100