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

# Rothy's · Design System

> Refined essentials, framed by bold editorial imagery

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

Rothy’s pairs an airy, restrained shopping interface with immersive fashion photography and expressive serif campaign headlines. A compact midnight-blue navigation, burgundy promotion band, and clean product modules keep the experience recognizably editorial while supporting direct shopping.

## North star

Keep the interface quiet and product-first, reserving expressive typography and saturated color for image-led campaign moments.

## Overview

The page contrasts a predominantly white canvas with richly colored campaign photography, letting imagery supply most of the visual drama. Midnight navy (#03143b) anchors navigation, headings, and product information; a deep burgundy (#5a0a18) appears as a promotional band rather than a general interface color. Maison Neue provides the clean, compact interface voice, with tracked uppercase button labels and nav text. Grifo S Light brings high-contrast editorial character to oversized campaign headlines. The hero uses full-bleed photography with centered white messaging and a simple white CTA. Below it, generous white space separates paired campaign tiles, a horizontal product rail, category imagery, and a product-led feature. Thin light-gray rules and almost no elevation keep the UI flat, while consistent image-led modules make browsing feel visual and calm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, navigation background, white campaign text, and high-contrast CTA surface. |
| Midnight Ink | `#03143b` | `--color-midnight-ink` | brand | Primary navigation, headings, product details, and dark CTA fill. |
| Quiet Silver | `#dcdbdd` | `--color-quiet-silver` | neutral | Fine separators and hairline borders around navigation and footer areas. |
| Soft Porcelain | `#f9f8f7` | `--color-soft-porcelain` | surface | Subtle section surface for gentle separation from the white page canvas. |
| Muted Graphite | `#5d5d5d` | `--color-muted-graphite` | semantic | Secondary, subdued text, primarily in footer details. |
| Claret | `#5a0a18` | `--color-claret` | accent | Promotional accent; echoed by the sale banner and warm burgundy tones in campaign imagery. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f9f8f7` (Soft Porcelain) · `--color-text` → `#03143b` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#5d5d5d` (Muted Graphite) · `--color-border` → `#dcdbdd` (Quiet Silver) · `--color-accent` → `#5a0a18` (Claret)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#03143b` | `#ffffff` | 17.99:1 | AAA |
| `#03143b` | `#f9f8f7` | 16.96:1 | AAA |
| `#ffffff` | `#f9f8f7` | 1.06:1 | fail |
| `#5d5d5d` | `#ffffff` | 6.58:1 | AA |
| `#5d5d5d` | `#f9f8f7` | 6.21:1 | AA |
| `#5a0a18` | `#ffffff` | 14.08:1 | AAA |
| `#5a0a18` | `#f9f8f7` | 13.28:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Maison Neue Book | `--font-body` | webfont | 400, 500 | Navigation, body copy, links, captions, and button labels | Inter |
| Maison Neue Medium | `--font-display` | webfont | 400, 500, 100 | Primary campaign heading and uppercase eyebrow | Inter |
| Grifo S Light | `--font-grifo-s-light` | webfont | 300 | Editorial campaign and section headlines | Cormorant Garamond |

- **Maison Neue Book:** Regular-weight sans with subtly tracked body text; buttons use tracked uppercase labels.
- **Maison Neue Medium:** Use measured medium weight for prominent sans text; eyebrow labels are uppercase with generous tracking.
- **Grifo S Light:** Light serif display style; reserve for large, expressive campaign headlines.

### Type scale — Perfect Fourth (ratio ≈ 1.309, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.15 | 0.119em | — | Maison Neue Medium | Primary campaign headline, large and editorial over hero imagery. |
| h2 | 20px | 300 | 1.6 | 0 | — | Grifo S Light | Light serif headings for featured campaign and product sections. |
| body | 14px | 400 | 1.43 | 0.036em | — | Maison Neue Book | Product names, descriptions, and supporting shopping copy. |
| caption | 13px | 400 | 1.38 | 0.038em | — | Maison Neue Book | Small product labels, prices, and image captions. |
| button | 16px | 400 | 1 | 0.125em | uppercase | Maison Neue Book | Tracked uppercase labels on compact shopping CTAs. |
| nav | 13px | 400 | 1.38 | 0.038em | — | Maison Neue Book | Compact primary navigation and category links. |
| link | 14px | 400 | 1.43 | 0.036em | — | Maison Neue Book | Shop links beneath campaign tiles and product listings. |
| eyebrow | 12px | 400 | 1.33 | 0.167em | uppercase | Maison Neue Medium | Small uppercase campaign and collection labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 8, 10, 12, 16, 24, 28, 32, 40, 72, 80 px.
- Section rhythm 80px · element gap 24px · card padding — · max content width 1360px.

The page uses a wide desktop canvas capped at the measured 1360px maximum width, with full-bleed campaign media breaking beyond the content grid. Its sequence alternates image-led hero, paired tiles, a horizontal product rail, another paired campaign block, a promotional color band, a featured collection, and four category tiles. Section spacing is generous, with a comfortable density and clear separation between modules. Product and category grids align images cleanly; text is mostly centered for campaign moments and restrained around commerce details.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is largely flat: measured styles show no shadows and no established radius scale. Thin light-gray rules provide occasional separation, while white space and changes in image or section background define hierarchy. Dark campaign media and the burgundy promotion band create layering through contrast rather than card elevation.

## Imagery

Photography is the dominant visual language: lifestyle models wearing shoes, styled product still lifes, and close product views. The opening campaign uses cinematic, full-width video or imagery with dark tonal contrast and centered overlay copy. Other blocks use paired or tiled product photographs on pale backgrounds. Images retain natural textures and warm, varied color; illustrations and 3D are not a defining feature.

## Components

### Announcement bar

A slim burgundy promotion strip above the white header, with compact links, terms text, and directional controls.

### Primary navigation

White horizontal header with the wordmark, category links, and simple utility icons; labels use small Maison Neue sans text.

### Campaign hero

Full-bleed lifestyle media with centered white eyebrow and serif headline, supporting text, and a white rectangular CTA.

### Paired campaign tiles

Two adjacent product or lifestyle images with centered overlay copy and understated shop links beneath.

### Product rail

Horizontally browsable product images with small labels and prices; keep text compact and navy.

### Collection feature

A large lifestyle image paired with smaller product tiles, a short collection heading, and a shop link.

### Category image navigation

Four image tiles for women, men, kids, and accessories, each paired with a small underlined category link.

### Measured component styles

- **Primary button**: background #03143b · text #ffffff · radius 0px · padding 11.5px 28px · 400 16px Maison Neue Book · uppercase
- **Link** (“SHOP WOMEN'S”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Maison Neue Book
- **Navigation item** (“Rothy's: Washable Shoes and Bags Made wi”): transparent background · text #03143b · radius 0px · padding 0px · 400 14px Maison Neue Book

## Do

- Use white space to separate shopping modules.
- Keep navigation small, navy, and visually quiet.
- Use editorial serif headlines for campaign moments.
- Let full-bleed photography carry the hero impact.
- Reserve burgundy for promotions and select accents.
- Keep product names and prices compact and legible.

## Don't

- Do not add decorative shadows or heavy card framing.
- Do not use burgundy as the default interface background.
- Do not let utility navigation compete with campaign imagery.
- Do not replace product photography with illustrations.
- Do not crowd the page with dense promotional copy.
- Do not apply oversized serif typography to every label.

## Agent prompt

Build a fashion-commerce page using Rothy’s editorial visual language. Use Gallery White (#ffffff) as the main canvas and Midnight Ink (#03143b) for navigation, headings, and product text. Keep Quiet Silver (#dcdbdd) hairlines subtle, and use Soft Porcelain (#f9f8f7) only for gentle section variation. Reserve Claret (#5a0a18) for a promotional strip or special sale moment; use Muted Graphite (#5d5d5d) for secondary text. Pair a clean Maison Neue-like sans interface with light, expressive serif campaign headlines. Create an image-led hero, paired campaign tiles, a product rail, and category image links. Keep spacing generous, imagery natural and tactile, controls simple, and elevation minimal. Prioritize calm shopping clarity over decorative UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign media with centered overlay messaging and CTA. | Campaign CTA, Centered offer messaging | Full-bleed photography, White serif headline, Rectangular button |
| 2 | feature-grid | Two side-by-side image tiles with copy overlaid and links below. | Shop by audience, Repeated promotion links | Paired photography, Centered overlay text, Underlined links |
| 3 | product-grid | Horizontal product carousel spanning a single row. | Browse products, Product price scanning | Product thumbnails, Compact labels, Prices |
| 4 | feature-grid | Two equal image-led campaign tiles with shop links. | Shop new arrivals, Browse women's shoes | Paired photography, Minimal captions, Underlined links |
| 5 | cta | Full-width burgundy band with centered heading and CTA. | Sale call to action | Claret background, Large light serif type, Small light button |
| 6 | product-showcase | Editorial lifestyle image alongside a compact product tile grid. | Explore collection, Shop featured styles | Split image and products, Small captions, Centered section heading |
| 7 | category-nav | Four aligned image tiles with category links underneath. | Shop by category | Four image tiles, Small underlined labels |
| 8 | footer | Multi-column footer information with links and supporting controls. | Browse site links, Newsletter signup | Compact text columns, Subdued details, Form controls |

## Source CSS custom properties (selected)

```css
--dna-color-sandstone: #F4F2EF;
--dna-color-midnight: #03143B;
--dna-color-reflex-blue: #092DC5;
--dna-color-brass: #DFA711;
--dna-color-light-grey: #DCDBDD;
--dna-brand-primary: #03143B;
--dna-brand-secondary: #F4F2EF;
--dna-brand-ink: #000000;
--dna-brand-light: #f6f6f6;
--dna-brand-neutral: #b8b8b8;
--dna-brand-reverse: #ffffff;
--dna-brand-subdued: #666666;
--dna-color-night: #03143B;
--dna-color-day: #F4F2EF;
--dna-color-focus: #666666;
--dna-color-text: #03143B;
--dna-color-foreground: #03143B;
--dna-color-background: #F4F2EF;
--dna-color-subdued: #666666;
--dna-color-dark-midnight: #0b163b;
--dna-checkout-accent: #0000ff;
--dna-checkout-form-bg: #ffffff;
--dna-checkout-order-summary-bg: #f6f6f6;
--dna-ui-border-primary: #F4F2EF;
--dna-ui-border-secondary: #b8b8b8;
--dna-ui-color-swatch-active: #000000;
--dna-ui-color-swatch-sold-out: #000000;
--dna-ui-scrollbar-background: #f6f6f6;
--dna-ui-scrollbar-foreground: #666666;
--dna-section-color-primary: #3a3a3a;
--dna-section-color-secondary: #ececec;
--dna-section-gradient-primary: #c7c3c3;
--dna-section-gradient-secondary: #e0e0e0;
--dna-font-sans: 'Maison Neue Book', sans-serif;
--dna-font-sans-medium: 'Maison Neue Medium', sans-serif;
--dna-font-serif: 'Grifo S Light', Georgia, "Times New Roman", serif;
--dna-font-bebas: 'Bebas Regular', sans-serif;
--dna-h1-font: 300 120px/120px 'Grifo S Light', Georgia, "Times New Roman", serif;
--dna-h2-font: 300 80px/80px 'Grifo S Light', Georgia, "Times New Roman", serif;
--dna-h3-font: 300 56px/56px 'Grifo S Light', Georgia, "Times New Roman", serif;
```

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