RKE2
rke2.io“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.”
Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
Lato
sans-serif
Poppins
sans-serif
Lato
sans-serif
The quick brown fox
16pxThe quick brown fox
48pxThe quick brown fox
32pxThe quick brown fox
18pxThe quick brown fox
14.08pxComponents
Design System
rgba(0, 0, 0, 0.2) 0px 5px 40px 0px
rgba(0, 0, 0, 0.1) 0px 1px 2px 0px
Voice & Tone
Personality
Visual Energy
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.
Comparable Brands
Brand Rules
Dos & 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'.
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/rke2.io \
-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.