rhode skin by hailey rhode bieber
rhodeskin.com“A minimalist, clinical-yet-warm skincare brand that prioritizes barrier health and effortless glow. The aesthetic is clean, modern, and understated, using a muted earth-tone palette to convey sophistication and simplicity without being overly technical or loud.”
Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
Swiss
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
Swiss
-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
The quick brown fox
16pxThe quick brown fox
176pxThe quick brown fox
20pxThe quick brown fox
31pxComponents
Design System
rgb(103, 100, 94) 0px 0px 0px 1px inset
rgb(204, 204, 204) 0px 0px 2px 2px
Voice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
calm-premium
Target Audience
Beauty-conscious consumers seeking effective, no-nonsense skincare with a focus on skin barrier health and natural-looking results.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use Swiss font family for all typography; apply 400 weight for body text and 700 for headings.
- Format all headings in lowercase sentence case to maintain a casual, approachable tone.
- Set body text line-height to exactly 24px for optimal readability and airy spacing.
- Use primary color #67645e for main text and outline buttons; use accent color #37cd8f sparingly for highlights or active states.
- Style primary buttons as outlines with 4px border-radius, 0px padding, and text color #67645e.
- Style secondary buttons with #ebebf0 background, #363638 text, 90px border-radius (pill shape), and 7px 32px 7px 0px padding.
- Apply subtle shadows only to dropdowns (rgb(103, 100, 94) 0px 0px 0px 1px inset) and modals (rgb(204, 204, 204) 0px 0px 2px 2px); avoid shadows on standard UI elements.
- Use a flat design approach with no gradients; rely on solid colors and spacing for depth.
- Keep copy simple and jargon-free; use short, imperative CTAs that are benefit-driven.
- Avoid emojis and excessive exclamations in marketing copy to maintain a mature, trustworthy voice.
Don't
- Do not use title case or uppercase for headings; strictly use lowercase.
- Do not use serif fonts; the brand is exclusively sans-serif (Swiss).
- Do not use gradients in any UI elements or backgrounds.
- Do not use emojis in any marketing or product copy.
- Do not use bright, saturated colors outside of the specified accent #37cd8f; maintain the muted earth-tone palette.
- Do not use sharp 0px border-radius on buttons; use 4px for outlines and 90px for secondary fills.
- Do not use complex or multi-layered shadows; keep depth effects minimal and subtle.
- Do not use long, technical sentences; keep vocabulary simple and accessible.
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/rhodeskin.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.