# rhode design system

> rhode design system measured from rhodeskin.com: Swiss font, #808080 primary on #000000, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/rhodeskin.com/

rhode’s website (rhodeskin.com) uses the Swiss font and #808080 as its main color on a black background. Measured by Sitepeel on November 7, 2026.

## What font does rhode use?

rhode uses Swiss (weights 400 and 700) and Rektorat Heavy (weight 400) on rhodeskin.com. Page titles are 176px at weight 400 (86px on phones) and body text is 16px. Measured on November 7, 2026.

- Swiss (weights 400, 700)
- Rektorat Heavy (weights 400)

## rhode colors: palette and hex codes

rhode’s main colors are #000000 (near black) for the background, #67645E (warm slate) for text and #808080 (gray) as the main accent. Measured on November 7, 2026.

- #000000: near black
- #67645E: warm slate
- #FFFFFF: white
- #ACAAA5: warm gray
- #1A1A1A: charcoal
- #808080: gray
- #007AFF: vivid blue

## What is rhode built with?

rhode’s website (rhodeskin.com) is built with Shopify, jQuery, Lit, React and Vue.js. Measured on November 7, 2026.

- Site builder & CMS: Shopify
- JavaScript framework: jQuery 3.6.0, Lit 2.8.0, React 18.2.0, Vue.js 3.5.44
- Animation & 3D: GSAP 3.10.2
- Analytics: Meta Pixel 2.9.438, Sentry, Microsoft Clarity, Google Ads
- Hosting & CDN: Cloudflare
- UI & CSS: Flickity, Swiper

## Questions and answers

### What font does rhode use?

rhode’s website uses Swiss (weights 400 and 700) and Rektorat Heavy (weight 400). Page titles are 176px at weight 400 (86px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the rhode colors and hex codes?

On rhodeskin.com: #000000 (near black) for the background, #67645E (warm slate) for text and #808080 (gray) as the main accent. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the rhode design system?

The design system on this page is rhodeskin.com’s, as measured on November 7, 2026: Swiss type, #808080 as the main color and 40px corners, written down as a DESIGN.md. It is not rhode’s own documentation.

### What is rhode built with?

rhode’s website (rhodeskin.com) is built with Shopify, jQuery, Lit, React and Vue.js. The full tech stack Sitepeel found: Shopify, jQuery, Lit, React, Vue.js, GSAP, Meta Pixel, Sentry, Cloudflare and Flickity. Measured on November 7, 2026.

### What is the rhode DESIGN.md?

A plain-text file with rhode’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this rhode’s official design system?

No. Sitepeel measured it from rhodeskin.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by rhode.

### Can I use rhode’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy rhode’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/rhodeskin.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with rhode.

## The DESIGN.md file

```markdown
---
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).

```