---
title: "rhode design system"
variant: extended
source: https://www.rhodeskin.com/
captured_at: 2026-10-12
theme: light
industry: beauty
generator: Design DNA (https://four.wiralomi.com/style/rhodeskin-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# rhode · Design System

> Quiet neutrals, confident skincare imagery

**Theme:** light · **Industry:** beauty · **Source:** https://www.rhodeskin.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

rhode pairs a restrained neutral storefront with high-impact beauty imagery and direct product discovery. Rounded panels, compact navigation, and concise editorial copy keep the experience polished without competing with the products.

## North star

Keep the interface neutral and understated so expressive skincare photography and product details carry the visual emphasis.

## Overview

The visual system is built on a quiet neutral foundation: white canvas, warm stone-gray text, and pale greige bands that distinguish content without introducing a strong accent colour. Most sections stay flat and spacious, while product cards and editorial blocks use softly rounded corners. Swiss sans-serif handles navigation, product information, and body copy with a clean, practical voice; the heavier Rektorat display face adds a distinctive lowercase note to display and compact nav treatments. The page moves between a full-bleed monochrome video hero, a compact product grid, centered brand philosophy, and paired editorial feature panels. Photography is the main source of colour and contrast, from black-and-white portraiture to close-up skin and strawberry-red product details. Consistent alignment, restrained hairlines, and generous image-led panels make the storefront feel premium while keeping shopping actions easy to locate.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Graphite | `#67645e` | `--color-warm-graphite` | brand | Primary text and navigation colour, also used for links, badge backgrounds, and outlined controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and light navigation, input, and button surfaces; also used for text over dark hero imagery. |
| Soft Putty | `#f1f0ed` | `--color-soft-putty` | surface | Warm neutral band for product cards, editorial panels, and footer regions; also appears in soft background gradients. |
| Quiet Silver | `#c4c4c4` | `--color-quiet-silver` | semantic | Fine borders around controls and footer details, separating elements without strong contrast. |
| Stone Haze | `#a3a09b` | `--color-stone-haze` | neutral | Gradient stop in subdued atmospheric treatments; not a defining interface colour. |
| Mist Gray | `#d3d3d3` | `--color-mist-gray` | neutral | Gradient stop and common tonal shade within grayscale imagery; not a primary interface accent. |
| Muted Taupe | `#84827e` | `--color-muted-taupe` | neutral | Secondary footer and button border detail, supporting the warmer neutral palette. |
| Pale Chalk | `#f5f5f5` | `--color-pale-chalk` | surface | Occasional pale button or component border detail rather than a major page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f1f0ed` (Soft Putty) · `--color-text` → `#67645e` (Warm Graphite) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#c4c4c4` (Quiet Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#67645e` | `#ffffff` | 5.9:1 | AA |
| `#67645e` | `#f1f0ed` | 5.17:1 | AA |
| `#ffffff` | `#f1f0ed` | 1.14:1 | fail |

### Gradients

- `radial-gradient(50% 50%, rgb(241, 240, 237), rgb(163, 160, 155) 0.01%, rgb(211, 211, 211))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Swiss | `--font-body` | webfont | 400, 700 | Main interface face for headings, body copy, product details, buttons, and most navigation. | Inter |
| Rektorat Heavy | `--font-display` | webfont | 400 | Display typography and compact lowercase navigation or badge treatments. | Archivo Black |

- **Swiss:** Clean sans-serif with measured regular and bold weights; body copy has slight positive tracking, while button labels are uppercase.
- **Rektorat Heavy:** Heavy sans-serif used for lowercase display lettering; display styling is tightly tracked and lowercase.

### Type scale — Perfect Fourth (ratio ≈ 1.292, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 57.5px | 400 | 1 | -0.04em | lowercase | Rektorat Heavy | Distinctive lowercase display headlines and brand-led statements. |
| h1 | 36.5px | 400 | 1.2 | 0.02em | — | Swiss | Primary page and feature headings. |
| h2 | 36px | 400 | 1.2 | -0.02em | — | Swiss | Editorial section headings and brand philosophy title. |
| h3 | 27px | 700 | 1.5 | 0 | — | Swiss | Product and subsection headings. |
| h4 | 24px | 700 | 1.4 | 0 | — | Swiss | Smaller feature and supporting section headings. |
| body | 16px | 400 | 1.5 | 0.02em | — | Swiss | Product descriptions, editorial copy, and explanatory text. |
| caption | 14px | 400 | 1.5 | 0.02em | — | Swiss | Compact product details, ratings, and secondary labels. |
| button | 16px | 700 | 1 | 0.02em | uppercase | Swiss | Uppercase shopping and conversion action labels. |
| nav | 10px | 400 | 0.75 | -0.04em | lowercase | Rektorat Heavy | Small lowercase display-style navigation labels. |
| eyebrow | 0px | 400 | 25.32 | 0.338em | uppercase | Swiss | Widely tracked uppercase category or section labels. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 16, 24, 28, 30, 32, 40 px.
- Section rhythm 32px · element gap 10px · card padding 32px · max content width 1375px.

The page uses a centered storefront frame with a measured maximum width of 1375px and a compact overall density. A narrow shipping announcement sits above the main navigation, followed by a full-bleed video hero. Content shifts between a 12-column product grid, centered philosophy panel, two-column editorial features, and a multi-column social gallery. Section spacing follows a measured 32px rhythm, with 10px element gaps and 32px card padding. Alignment alternates intentionally between centered brand messaging and left-aligned shopping or editorial content.

## Shape & elevation

- Radius: button `9999px` · input `12px` · card `12px` · media `12px` · badge `9999px` · nav `8px` · link `9999px` · xs `4px` · sm `8px` · md `10px` · lg `12px` · pill `9999px`
- Shadow `inset` (other, link, nav): `rgb(103, 100, 94) 0px 0px 0px 1px inset`
- Shadow `inset-2` (other, link): `rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.24) 0px 1px 2px 0px`
- Motion: standard transition `0.3s ease-out` on interactive elements.

The interface is mostly flat, relying on pale surface bands and thin borders rather than pronounced shadows. Cards and media use rounded corners to separate content from the canvas. Measured inset outlines appear on select controls, with a subtle hairline shadow used sparingly.

## Imagery

Large lifestyle photography and video lead the experience: the hero uses monochrome portrait footage, while later sections mix product still lifes, close-up skin, social imagery, and product detail. Images are cropped boldly within rounded panels and often occupy half or all of a section. Product colour is concentrated in the imagery, including strawberry-red accents, while interface chrome remains neutral.

## Components

### Announcement and navigation

A slim centered shipping message precedes a white navigation bar with left-aligned category links, a centered wordmark, and utility links.

### Video hero

Full-width rounded video panel with a monochrome portrait, lower-left white headline, and a thin outlined pill action.

### Product cards

Compact cards on #f1f0ed pair a bold lowercase product heading with product imagery, rating or label details, and a price or buying link.

### Editorial feature panel

Two-column image-and-copy sections use a pale neutral background, concise text, rounded media, and a small outlined pill CTA.

### Social gallery

A row of cropped customer and creator images sits beneath a compact heading, with a social link and understated controls.

### Values accordion

The mission panel pairs a short brand statement and product image with three stacked value rows divided by fine horizontal rules.

### Newsletter footer

Large wordmark artwork anchors the footer above a compact email form, multi-column navigation links, and a country selector.

### Measured component styles

- **Primary button** (“Enable accessibility”): background #ebebf0 · text #363638 · border 2px solid #f5f5f5 · radius 90px · padding 7px 32px 7px 0px · 400 16px Swiss
- **Secondary button** (“mission”): transparent background · text #67645e · border 1px solid #c4c4c4 · radius 0px · padding 16px 0px · 700 16px Swiss
- **Link** (“FREE US SHIPPING ON ORDERS OVER $45”): transparent background · text #67645e · radius 0px · padding 0px · 400 16.2px Swiss
- **Input** (“Australia (AUD $) Austria (EUR €) Belgiu”): transparent background · text #67645e · radius 3.5px · padding 8px 20px 8px 8px · 700 14px Swiss
- **Card** (“To RESTORE, PROTECT, and NURTURE the ski”): background #f1f0ed · text #67645e · radius 12px · padding 32px · 400 16px Swiss
- **Badge** (“new”): background #67645e · text #ffffff · radius 10px · padding 4px 8px · 400 11px Rektorat Heavy · lowercase
- **Navigation item** (“new SPOTWEAR Hydrocolloid Pimple Shield”): background #ffffff · text #67645e · radius 8px · padding 16px 0px 24px 0px · 400 16.2px Swiss

## Do

- Use #ffffff as the main canvas and #f1f0ed for gentle section contrast.
- Keep interface text and shopping links in #67645e.
- Let product and skin imagery provide most of the colour.
- Use rounded cards and pill-shaped actions consistently.
- Alternate product browsing with editorial image-and-copy sections.
- Keep copy concise and controls easy to scan.

## Don't

- Do not introduce saturated interface colours absent from the measured palette.
- Do not use heavy shadows to separate ordinary cards.
- Do not let decorative gradients dominate the storefront.
- Do not crowd the hero with multiple competing actions.
- Do not replace product photography with generic decorative illustrations.
- Do not use dense, long-form copy in shopping cards.

## Agent prompt

Build a new beauty storefront page in rhode’s restrained editorial style. Use Gallery White (#ffffff) for the main canvas, Soft Putty (#f1f0ed) for selected cards and content bands, and Warm Graphite (#67645e) for text, links, and controls. Keep typography primarily clean Swiss-like sans-serif, reserving a heavier lowercase display face for expressive headings. Structure the page with a compact announcement and navigation, a large image- or video-led hero, scannable product cards, and alternating editorial image-and-copy panels. Let real product and beauty photography supply colour and contrast. Use softly rounded media and card surfaces, fine Quiet Silver (#c4c4c4) borders, and minimal shadows. Maintain clear section rhythm, concise copy, and pill-shaped actions without making the interface feel crowded.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video hero beneath the announcement and centered storefront navigation. | brand statement, single primary action | monochrome portrait video, lower-left overlay text, outlined pill CTA |
| 2 | product-grid | Twelve-column product area showing a row of compact product cards. | product discovery, price visibility, quick purchase links | rounded neutral cards, product photography, small labels and ratings |
| 3 | other | Centered statement within a broad image-led panel. | brand storytelling, shop link | centered headline, soft atmospheric imagery, compact button |
| 4 | feature-split | Two-column editorial feature pairing a product image with left-aligned copy. | new-product introduction, learn more | rounded image panel, neutral background, outlined pill CTA |
| 5 | feature-split | Two-column feature with text on one side and close-up beauty imagery on the other. | product education, collection update | close-up skin photography, pale neutral copy panel, pill CTA |
| 6 | gallery | Six-column social section with a horizontal row of image tiles. | social discovery, carousel navigation | cropped creator imagery, compact section title, outlined social link |
| 7 | feature-split | Three-column values section pairing mission copy, product imagery, and stacked value rows. | brand values, accordion-style exploration | fine horizontal dividers, neutral copy panel, large product image |
| 8 | footer | Broad footer with oversized wordmark, newsletter area, link columns, and a lower country selector. | email subscription, site navigation, locale selection | large brand lettering, compact form, multi-column links |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(241,240,237,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #67645e;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #f1f0ed;
--osano-dialog-foreground-color: #67645e;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.81);
--osano-link-color: #67645e;
--osano-toggle-off-track-color: #adadb0;
--osano-toggle-off-thumb-color: #ffffff;
--osano-toggle-on-track-color: #67645e;
--osano-toggle-on-thumb-color: #ffffff;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #67645e;
--osano-button-accept-background-color: #67645e;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #67645e;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #ffffff;
--osano-button-reject-all-background-color: #67645e;
--osano-button-reject-all-background-color-hover: #7b7872;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #ffffff;
--osano-button-manage-background-color: #67645e;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #67645e;
--osano-info-dialog-button-close-color: #67645e;
--osano-info-dialog-toggle-off-track-color: #adadb0;
--osano-info-dialog-toggle-off-thumb-color: #ffffff;
--osano-info-dialog-toggle-on-track-color: #67645e;
--osano-info-dialog-toggle-on-thumb-color: #ffffff;
--osano-info-dialog-button-background-color: #67645e;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #ffffff;
--osano-dialog-gpc-background-color: #f1f0ed;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/rhodeskin-com