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

# Rhone · Design System

> Quiet neutrals, confident performance, considered commerce.

**Theme:** light · **Industry:** fashion · **Source:** https://www.rhone.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._

Rhone’s homepage pairs a restrained, warm-neutral interface with immersive apparel photography and direct shopping paths. A compact editorial header leads into campaign imagery, product carousels, category tiles, and a dark multi-column footer.

## North star

Let polished apparel photography lead, while a warm-neutral interface keeps every shopping path clear and unobtrusive.

## Overview

The visual system is built around a warm, near-white canvas (#fbf9f9), deep plum-black text (#1c1519), and pale stone product surfaces (#efedea). Photography supplies most of the page’s richer color: campaign scenes use dark, earthy backdrops while apparel imagery carries muted browns, blues, and greens. Denim is the dominant sans-serif, used across navigation, headings, product details, and calls to action; Reckless appears sparingly as a secondary display voice. The layout alternates full-width photographic campaigns with compact product rows and clean category grids, keeping shopping actions close to the imagery. Comfortable spacing and strong horizontal alignment let each module feel distinct without visual ornament. Thin warm-gray rules organize navigation and forms; cards remain largely flat and square-edged. The dark footer reverses the palette for support links, social icons, and an email signup.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fbf9f9` | `--color-gallery-white` | brand | Primary canvas for the header, product areas, and most content sections; also appears on light text and buttons. |
| Plum Ink | `#1c1519` | `--color-plum-ink` | brand | Core text and navigation color; fills the announcement strip and full-width footer. |
| Warm Stone | `#efedea` | `--color-warm-stone` | surface | Soft neutral surface behind product cards and selected navigation or content elements. |
| Oat Hairline | `#e3dfd9` | `--color-oat-hairline` | neutral | Subtle divider and input border tone that structures navigation and forms. |
| Muted Charcoal | `#484346` | `--color-muted-charcoal` | neutral | Secondary text and quiet links where contrast should be gentler than primary ink. |
| Field Olive | `#617259` | `--color-field-olive` | accent | Minor text color in measured content; not a defining interface accent. |
| Leather Brown | `#705e43` | `--color-leather-brown` | accent | Minor text color in measured content; earthy tones are more prominent in photography than UI. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Occasional light text or small details; campaign products and image content can also contain white. |
| Pale Pewter | `#cecbcc` | `--color-pale-pewter` | neutral | Limited secondary link or text color; use sparingly rather than as a section surface. |

### Semantic aliases

`--color-canvas` → `#fbf9f9` (Gallery White) · `--color-surface` → `#efedea` (Warm Stone) · `--color-surface-2` → `#1c1519` (Plum Ink) · `--color-text` → `#1c1519` (Plum Ink) · `--color-text-muted` → `#fbf9f9` (Gallery White) · `--color-text-subtle` → `#484346` (Muted Charcoal) · `--color-border` → `#e3dfd9` (Oat Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1c1519` | `#fbf9f9` | 17.1:1 | AAA |
| `#1c1519` | `#efedea` | 15.35:1 | AAA |
| `#fbf9f9` | `#efedea` | 1.11:1 | fail |
| `#fbf9f9` | `#1c1519` | 17.1:1 | AAA |
| `#484346` | `#fbf9f9` | 9.24:1 | AAA |
| `#484346` | `#efedea` | 8.29:1 | AAA |
| `#484346` | `#1c1519` | 1.85:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Denim | `--font-body` | webfont | 400, 500 | Primary sans-serif across navigation, headings, body copy, links, product labels, and buttons. | Inter |
| Reckless | `--font-reckless` | webfont | 400 | Rare secondary display face, used as a restrained editorial contrast rather than the main UI voice. | Cormorant Garamond |

- **Denim:** Use measured regular and medium weights; case is natural, tracking neutral, and hierarchy comes from size and weight.
- **Reckless:** Measured regular weight; reserve for occasional editorial emphasis and keep the overall interface sans-led.

### Type scale — Perfect Fifth (ratio ≈ 1.518, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 400 | 1.04 | 0 | — | Denim | Large campaign headline over full-bleed photography. |
| h1 | 24px | 500 | 1.08 | 0 | — | Denim | Primary section or page heading, including campaign titles. |
| h2 | 20px | 400 | 1.4 | 0 | — | Denim | Secondary editorial and promotional headings. |
| body | 16px | 400 | 1.5 | 0 | — | Denim | Standard supporting copy and explanatory text. |
| caption | 14px | 400 | 1.57 | 0 | — | Denim | Compact campaign, product, and supporting labels. |
| button | 18px | 500 | 1.44 | 0 | — | Denim | Prominent shopping and campaign calls to action. |
| nav | 16px | 500 | 1.5 | 0 | — | Denim | Main and utility navigation labels. |
| link | 14px | 400 | 1.57 | 0 | — | Denim | Product names and secondary text links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 7, 8, 16, 80 px.
- Section rhythm 64px · element gap 8px · card padding — · max content width 1280px.

The measured content uses a 1280px maximum page width with comfortable density and a two-column structure for major campaign blocks. The homepage alternates broad image-led promotions, horizontally arranged product collections, and a four-column category row. Most content sits on the same warm-white canvas, with section gaps creating separation instead of colored bands. Align headings and shopping actions consistently within each module; the footer switches to a four-column link layout and a separate lower social/legal area.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows. Product cards sit directly on the page or on Warm Stone surfaces, while thin Oat Hairline borders define navigation and form details. Maintain clear image-to-canvas boundaries and use the dark footer as a strong palette reversal rather than a raised panel.

## Imagery

Use high-quality lifestyle and apparel photography, not illustration or 3D. The hero is full-bleed and dark, with campaign products framing the copy; later modules mix tightly cropped product cards, paired lifestyle panels, and four category images. Keep people and garments visually prominent, with natural earthy color and minimal graphic overlays. Text over imagery should remain legible and concise.

## Components

### Announcement and utility bars

Stack a slim Plum Ink shipping announcement above a pale utility row with offer, help, gift-card, store, and region links.

### Primary navigation

Place category links on the left, centered Rhone wordmark, and search plus account, favorite, and bag controls on the right.

### Campaign hero

Use a full-width lifestyle image with left-aligned white headline and supporting copy; pair with simple light CTA buttons.

### Product carousel

Present apparel cards in a horizontal row with square imagery, product name, color swatches, price, and small promotional labels.

### Image category tiles

Use paired feature panels or a four-column image strip with short category labels and minimal text overlays.

### Dark footer

Reverse to Plum Ink with grouped support and company links, an email signup, social icons, and a subdued legal row.

### Measured component styles

- **Primary button** (“Quick shop”): background #fbf9f9 · text #1c1519 · radius 16px · padding 7px · 400 16px Denim
- **Secondary button** (“Shop now”): transparent background · text #1c1519 · border 1px solid #fbf9f9 · radius 0px · padding 14.5px 22.5px · 500 18px Denim
- **Link** (“Commuter® 1/4 Zip Sweater”): transparent background · text #1c1519 · radius 0px · padding 0px · 400 16px Denim
- **Input**: transparent background · text #1c1519 · radius 0px · padding 0px 0px 7px 0px · 400 14px Arial
- **Card** (“Quick shop”): background #efedea · text #1c1519 · radius 0px · padding 0px · 400 16px Denim
- **Navigation item** (“Take 15% off”): transparent background · text #1c1519 · radius 0px · padding 0px · 400 16px Denim

## Do

- Use Gallery White as the dominant content canvas.
- Keep Plum Ink for core text, navigation, and the footer.
- Let authentic apparel photography carry the strongest color.
- Keep product details and shopping actions close to their images.
- Use warm-gray hairlines instead of decorative dividers.
- Preserve generous separation between distinct shopping modules.

## Don't

- Do not introduce bright UI accent colors.
- Do not add gradients or decorative shadows.
- Do not round product cards or campaign panels.
- Do not let secondary typography overpower Denim.
- Do not bury product names, prices, or category links.
- Do not turn image-led modules into dense text blocks.

## Agent prompt

Build a new Rhone-style fashion-commerce page with a warm, restrained palette: use Gallery White (#fbf9f9) as the main canvas, Plum Ink (#1c1519) for text and dark footer bands, Warm Stone (#efedea) for subtle product surfaces, and Oat Hairline (#e3dfd9) for borders. Use Denim, or a close sans-serif substitute, for nearly all interface typography; reserve a secondary serif for rare editorial emphasis. Organize the page into clear image-led shopping modules: a concise campaign hero, product rows, category tiles, and a compact information footer. Favor high-quality lifestyle apparel photography with earthy tones and purposeful crops. Keep cards flat and square-edged, use generous section separation, and place product labels, prices, and calls to action close to their imagery. Avoid gradients, heavy shadows, and loud accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with left-aligned headline and copy; paired shopping actions. | campaign discovery, shop now, learn more | dark lifestyle image, white headline, light CTA buttons |
| 2 | product-grid | Two-column section structure with a horizontal product row and a paired feature-image row. | men/women tabs, quick product browsing, shop by audience | square product photography, color swatches, paired image panels |
| 3 | category-nav | Four equal image tiles arranged in a single row. | category discovery, direct category links | four-up photography, short labels, minimal framing |
| 4 | hero | Full-bleed seasonal image with centered copy and shopping links. | seasonal campaign, shop men's sweaters, shop women's sweaters | centered white text, dark warm photography, simple light buttons |
| 5 | feature-grid | Three story cards arranged in one row, each with image, heading, copy, and link. | find a store, learn about the brand, join the community | editorial photography, centered card text, simple text links |
| 6 | footer | Dark four-column footer with link groups and a prominent email signup area. | support navigation, email signup, contact access | Plum Ink background, light link text, minimal email field |
| 7 | footer | Dark lower footer with social icons, centered mark, and a bottom legal row. | social links, privacy and terms access | subtle separator, small legal text, centered brand mark |

## Source CSS custom properties (selected)

```css
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-primary-rgb: 13,110,253;
--bs-secondary-rgb: 108,117,125;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #173622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #614318;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d7e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fcedd8;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #b0cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #fadcb1;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-color: #212529;
--bs-body-color-rgb: 33,37,41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255,255,255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0,0,0;
--bs-secondary-color: #212529bf;
--bs-secondary-color-rgb: 33,37,41;
--bs-secondary-bg: #e9ecef;
```

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