<!-- Generated by ExtractVibe — https://extractvibe.com/brand/rhodeskin.com -->
<!-- Extracted: 2026-08-25T20:28:38.506Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "rhode skin by hailey rhode bieber"
description: "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."
colors:
  primary: "#67645e"
  tertiary: "#37cd8f"
  neutral: "#67645e"
  surface: "#ffffff"
  on-surface: "#67645e"
  on-surface-secondary: "#67645e"
  border: "#67645e"
  link: "#67645e"
  info: "#000000"
  surface-dark: "#000000"
typography:
  display-lg:
    fontFamily: "Swiss"
    fontSize: "176px"
    fontWeight: "400"
    lineHeight: "211.2px"
  headline-lg:
    fontFamily: "Swiss"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "24px"
  headline-md:
    fontFamily: "Swiss"
    fontSize: "31px"
    fontWeight: "700"
    lineHeight: "37.2px"
  body-md:
    fontFamily: "Swiss"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "4px"
  md: "40px"
  lg: "90px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#67645e"
    rounded: "4px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderWidth: "2px"
  button-secondary:
    backgroundColor: "#ebebf0"
    textColor: "#363638"
    rounded: "90px"
    padding: "7px 32px 7px 0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#f5f5f5"
    borderWidth: "2px"
---

# rhode skin by hailey rhode bieber — Design System

## Overview

The visual identity embodies a clinical-yet-warm aesthetic that prioritizes barrier health and effortless glow through a minimalist lens. Drawing from the archetypes of The Innocent and The Caregiver, the design communicates sophistication and simplicity without resorting to loud or overly technical presentations. Comparable to Glossier’s approachability, The Ordinary’s transparency, Aesop’s intellectual calm, and Drunk Elephant’s vibrant clarity, this system balances modernity with understated elegance. The atmosphere is clean and dewy, creating a digital environment that feels both professional and nurturing. Every element serves to reduce cognitive load, allowing the product’s efficacy to take center stage. The design avoids clutter, neon accents, or aggressive marketing language, focusing instead on spatial breathing room and muted tones that convey trust and purity. This is a space for calm decision-making, where the user feels cared for rather than sold to. The interface mirrors the tactile experience of high-quality skincare: smooth, refined, and inherently soothing. By stripping away non-essential decorative elements, the design ensures that clarity and functionality remain paramount. The result is a cohesive, serene digital presence that aligns perfectly with the brand’s commitment to skin health and natural beauty.

**Key characteristics:**

- Vibe — minimalist, clean, clinical, understated, dewy, modern
- Archetypes — The Innocent, The Caregiver
- Comparable to — Glossier, The Ordinary, Aesop, Drunk Elephant
- 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.
- Visual energy — 3/10 (calm/understated)

## Colors

The palette centers on #67645e, a muted earth tone that grounds the design in organic sophistication, contrasting sharply against the pure #ffffff surface. This combination signals clinical precision while maintaining warmth and approachability. The earth tone conveys stability and natural ingredients, while the white space emphasizes purity and hygiene. This restrained color strategy avoids visual noise, ensuring that the brand feels understated yet premium, directly reflecting the minimalist ethos of barrier-focused skincare.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#67645e` | Dim Gray |
| accent / tertiary | `#37cd8f` | Emerald |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#67645e` | Dim Gray |
| secondary text | `#67645e` | Dim Gray |
| border | `#67645e` | Dim Gray |
| link | `#67645e` | Dim Gray |
| muted | `#67645e` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#000000` | Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| info | `#000000` | Neutral information, tips |

## Typography

The type system relies exclusively on Swiss, a geometric sans-serif that embodies modernist clarity and universal readability. This choice communicates precision, honesty, and timeless design, aligning with the clinical yet accessible nature of the brand. The hierarchy is established through weight and scale rather than decorative styling, ensuring that information is absorbed quickly and effortlessly. Swiss provides a neutral, authoritative voice that lets the product speak for itself, reinforcing the brand’s commitment to simplicity and functional elegance in every textual interaction.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Swiss | body | self-hosted | 400, 700 |
| Swiss | heading | self-hosted | 400, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Swiss | 176px | 400 | 211.2px | — |
| Heading 2 | Swiss | 20px | 700 | 24px | — |
| Heading 3 | Swiss | 31px | 700 | 37.2px | — |
| Body | Swiss | 16px | 400 | 24px | — |

### Conventions

- Heading case — lowercase
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgb(103, 100, 94) 0px 0px 0px 1px inset` |
| modal | `rgb(204, 204, 204) 0px 0px 2px 2px` |

## Shapes

Border-radius scale:

- `sm` — 4px
- `md` — 40px
- `lg` — 90px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#67645e`
- Radius — `4px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Sample copy — "Close this consent banner"

**Secondary**

- Background — `#ebebf0`
- Text — `#363638`
- Radius — `90px`
- Padding — `7px 32px 7px 0px`
- Font size — `16px`
- Font weight — `400`
- Border — `2px solid #f5f5f5`
- Sample copy — "Enable accessibility"

## Do's and 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.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 9/10 | casual |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 8/10 | irreverent |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — none
- CTA style — short, imperative, and benefit-driven phrases
- Rhetorical devices — metaphor, alliteration, repetition

### Sample copy

> Sun on the cheeks.

> bronze, flush, go

> Glaze your inbox with tips, tricks & exclusive content from Hailey.

> effortless, sun-kissed combo that lasts all day

> The Pocket Collection delivers creamy, hydrating color that melts into skin.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/rhodeskin.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/rhodeskin.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/rhodeskin.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/rhodeskin.com/logo-3.png) | 95% |
| secondary | — | svg | [link](brands/rhodeskin.com/logo-4.svg) | 85% |
| logomark | — | svg | [link](brands/rhodeskin.com/logo-svg-5.svg) | 90% |

## Sources

- Official brand guidelines — https://brandfetch.com/rhodeskin.com
- Live brand page — https://extractvibe.com/brand/rhodeskin.com
- Raw JSON — https://extractvibe.com/api/brand/rhodeskin.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/rhodeskin.com/design.md
- Extracted — 2026-08-25T20:28:38.506Z
- Generator — ExtractVibe vv1
- Quality score — 100/100