rhode design system

---
version: alpha
name: rhode
description: "Dark monochrome interface measured from rhodeskin.com: Swiss type with Rektorat Heavy, flat surfaces and 40px corners."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#67645E"
  on-background: "#67645E"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#ACAAA5"
  outline: "#1A1A1A"
  primary: "#808080"
  on-primary: "#007AFF"
typography:
  headline-display:
    fontFamily: Swiss
    fontSize: 176px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Rektorat Heavy
    fontSize: 57.5px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Swiss
    fontSize: 36.5px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  headline-sm:
    fontFamily: Swiss
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: Swiss
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Swiss
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-sm:
    fontFamily: Swiss
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-lg:
    fontFamily: Swiss
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  label-md:
    fontFamily: Swiss
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-sm:
    fontFamily: Swiss
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.17
    letterSpacing: 0.02em
  headline-display-mobile:
    fontFamily: Swiss
    fontSize: 86px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg-mobile:
    fontFamily: Rektorat Heavy
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  headline-sm-mobile:
    fontFamily: Swiss
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.5
rounded:
  xs: 3.5px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 40px
  full: 9999px
spacing:
  xs: 2px
  sm: 8px
  md: 10px
  lg: 24px
  xl: 48px
  gutter: 10px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    padding: 0px
    height: 50px
  button-primary-hover:
    backgroundColor: "#75736DE9"
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 4px
    padding: 0px
  input-field:
    backgroundColor: "{colors.on-surface-strong}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 16px
  card:
    backgroundColor: "{colors.on-surface-strong}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 16px 0px 24px 0px
  link:
    textColor: "{colors.on-surface}"
---

# rhode Design System

## Overview

rhode describes itself as: “Skincare essentials developed by Hailey Rhode Bieber. Designed to nourish your skin barrier, giving instant dewy glow and improving the look of skin over time.” The interface is dark, built on **Near Black (#000000)** with **Warm Slate (#67645E)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Swiss** and **Rektorat Heavy**. Headlines run large; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 40px.

Measured from [rhodeskin.com](https://www.rhodeskin.com/) on November 7, 2026 at 1440×900 and 390×844 from 401 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **Near Black (#000000):** Page background. Token `background`.
- **Warm Slate (#67645E):** Primary text and headings, seen 86 times. Token `on-surface`, CSS `--rb-smart-collections-button-background-color`.
- **White (#FFFFFF):** Headings and emphasis, seen 10 times. Token `on-surface-strong`, CSS `--osano-toggle-on-thumb-color`.
- **Warm Gray (#ACAAA5):** Secondary text, seen 5 times. Token `on-surface-variant`.
- **Charcoal (#1A1A1A):** Borders and dividers, seen 1 time. Token `outline`.
- **Gray (#808080):** Primary buttons and calls to action, seen 2 times. Token `primary`.
- **Vivid Blue (#007AFF):** Text and icons on primary. Token `on-primary`.

## Typography

**Swiss** and **Rektorat Heavy** share the interface. Fallback stack: `Swiss, -apple-system, BlinkMacSystemFont, Segoe UI`. Other loaded fonts: swiper-icons, Roboto.

- **headline-display:** Swiss 176px at weight 400, line height 1.2 (86px on mobile). Page title (h1).
- **headline-lg:** Rektorat Heavy 57.5px at weight 400, line height 1, tracking -0.04em, lowercase (40px on mobile). Section headings (h2).
- **headline-md:** Swiss 36.5px at weight 400, line height 1.2, tracking 0.02em. Sub-section headings.
- **headline-sm:** Swiss 27px at weight 700, line height 1.5 (21px on mobile). Card and feature titles.
- **body-md:** Swiss 16px at weight 400, line height 1.5, tracking 0.02em. Body text.
- **body-lg:** Swiss 18px at weight 700, line height 1.5, tracking 0.02em. Lead paragraphs.
- **body-sm:** Swiss 14px at weight 400, line height 1.5, tracking 0.02em. Secondary and small text.
- **label-lg:** Swiss 17px at weight 400, line height 1.5, tracking 0.02em, uppercase. Large buttons and tabs.
- **label-md:** Swiss 14px at weight 700, line height 1.2, tracking 0.02em. Buttons, navigation and labels.
- **label-sm:** Swiss 12px at weight 700, line height 1.17, tracking 0.02em, uppercase. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 52% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 8px, md 10px, lg 24px, xl 48px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 376px, 760px, 768px, 821px, 1024px, 1200px, 1240px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps and hairline rings:

- `rgb(103, 100, 94) 0px 0px 0px 1px inset`
- `rgb(255, 255, 255) 0px 0px 0px 1px inset`

## Shapes

Most elements use 40px corners. Measured radii, most used first:

- **xl (40px):** 136 elements.
- **sm (8px):** 132 elements.
- **lg (12px):** 132 elements.
- **md (10px):** 36 elements.
- **xs (3.5px):** 16 elements.
- **full (9999px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Toggle next slide”):** #FFFFFF80 fill, #007AFF text, 16px/400, 50% radius, padding 0px.
- **button-primary-hover:** background #75736DE9, text #007AFF on hover.
- **button-ghost (“Close this consent banner”):** transparent fill, #67645E text, 16px/400, 4px radius, padding 0px.
- **input-field (“Email Address”):** #FFFFFF fill, #67645E text, 17.44px/400, 12px 0px 0px 12px radius, padding 16px.
- **card:** #FFFFFF fill, #67645E text, 16.2px/400, 8px radius, padding 16px 0px 24px 0px.
- **link:** transparent fill, #67645E text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page.
- Do keep text in 3 levels: #67645E, #FFFFFF, #ACAAA5.
- Do let contrast carry emphasis; primary actions use #808080 on #000000.
- Do reuse the measured spacing steps (8px, 10px, 24px).
- Do use 40px corners on most elements; larger surfaces also use 8px, 12px and 10px.
- Don't use #67645E for body text; it reaches 3.56:1 on #000000. Keep it for large text or metadata.
- Don't add drop shadows for depth; use hairline rings and borders and contrast.
- Don't introduce new font families beyond Swiss and Rektorat Heavy.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.3s, 0.2s, 0.25s, 0.5s. Longer ambient animations run 0.7s.

- **Easing:** `ease-out`, `cubic-bezier(0.76, 0, 0.24, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/rhodeskin.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).