Rancher
rancher.com“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.”
Color Palette
Colors
Typography
Fonts
Poppins
Roboto, sans-serif
Poppins
sans-serif
Open Sans
sans-serif
The quick brown fox
16pxThe quick brown fox
50pxThe quick brown fox
40pxThe quick brown fox
24pxThe quick brown fox
24pxComponents
Design System
rgba(0, 55, 79, 0.1) 10px 12px 24px 0px
rgba(0, 117, 168, 0.15) 5px 20px 40px 0px
Voice & Tone
Personality
Visual Energy
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.
Comparable Brands
Brand Rules
Dos & 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.
Design Assets
Visual Elements
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/rancher.com \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.