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

# Rox · Design System

> Editorial calm, built around human stories and revenue AI.

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

Rox pairs a restrained, warm-neutral canvas with cinematic customer video and crisp editorial typography. Spacious research and product sections lead into a dark testimonial band, then return to a quiet, structured close.

## North star

Let restrained editorial typography and warm neutral space frame real customer proof, reserving deep black for the strongest contrast.

## Overview

The page balances a warm off-white canvas with near-black surfaces, using contrast to distinguish the bright research and product narrative from the cinematic customer-proof band. The palette stays deliberately restrained: muted stone text and fine gray rules support the content, while the white CTA is a clear, high-contrast control. Display and heading copy uses the measured Season Mix-TRIAL Regular face with tight negative tracking, giving the large editorial statements a refined, slightly distinctive silhouette; compact system sans-serif carries navigation, labels, and supporting text. The top hero is full-bleed customer video under a dark overlay, with centered white type and paired actions. Below, a centered content frame organizes logos, research, product UI, and report cards with generous breathing room and thin dividers. The testimonial section reverses to black with image-led cards; the final CTA and footer return to light, ordered layouts.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Linen | `#f7f6f4` | `--color-gallery-linen` | brand | Primary page canvas and light CTA/footer surroundings; the warm off-white establishes the page’s quiet editorial baseline. |
| Quiet Stone | `#a6a09b` | `--color-quiet-stone` | neutral | Muted copy and secondary links, especially low-priority supporting text against light surfaces. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero and dark-section text, light cards, and the prominent Start now CTA. |
| Fine Silver | `#e5e5e5` | `--color-fine-silver` | semantic | Hairline dividers and subtle boundaries between the logo, content, CTA, and footer areas. |
| Stage Black | `#000000` | `--color-stage-black` | surface | Large dark testimonial band and selected dark cards; also appears in gradient overlays on hero media. |
| Charcoal Roast | `#292524` | `--color-charcoal-roast` | surface | Dark testimonial and story-card surfaces, lending depth to customer proof. |
| Soft Obsidian | `#100f0e` | `--color-soft-obsidian` | surface | Near-black inner card surfaces within the dark story-card system. |
| Oat Surface | `#f0eeea` | `--color-oat-surface` | surface | Occasional light section or card surface, subtly differentiated from the main canvas. |
| Warm Graphite | `#57534d` | `--color-warm-graphite` | neutral | Primary supporting text and secondary content on light backgrounds. |
| Deep Umber | `#1c1917` | `--color-deep-umber` | neutral | Dark headings, text, and gradient transition tone; not a separate accent color. |
| Night Ink | `#0c0a09` | `--color-night-ink` | neutral | Occasional darkest text and interface detail on light sections. |
| Ash Taupe | `#87827d` | `--color-ash-taupe` | neutral | Sparse secondary text and incidental interface details. |
| Muted Sand | `#c2bdb2` | `--color-muted-sand` | neutral | Low-frequency supporting tone, mostly incidental detail rather than a defining brand color. |

### Semantic aliases

`--color-canvas` → `#f7f6f4` (Gallery Linen) · `--color-surface` → `#292524` (Charcoal Roast) · `--color-surface-2` → `#100f0e` (Soft Obsidian) · `--color-surface-3` → `#000000` (Stage Black) · `--color-surface-4` → `#f0eeea` (Oat Surface) · `--color-text` → `#57534d` (Warm Graphite) · `--color-text-muted` → `#a6a09b` (Quiet Stone) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#e5e5e5` (Fine Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#57534d` | `#f7f6f4` | 7.07:1 | AAA |
| `#57534d` | `#292524` | 1.99:1 | fail |
| `#57534d` | `#100f0e` | 2.51:1 | fail |
| `#57534d` | `#000000` | 2.75:1 | fail |
| `#a6a09b` | `#f7f6f4` | 2.39:1 | fail |
| `#a6a09b` | `#292524` | 5.87:1 | AA |
| `#a6a09b` | `#100f0e` | 7.41:1 | AAA |
| `#a6a09b` | `#000000` | 8.12:1 | AAA |
| `#ffffff` | `#f7f6f4` | 1.08:1 | fail |
| `#ffffff` | `#292524` | 15.17:1 | AAA |

### Gradients

- `linear-gradient(rgb(247, 246, 244) 23.1563%, rgb(255, 255, 255) 100%)`
- `linear-gradient(rgb(0, 0, 0) 0%, rgb(28, 25, 23) 92.5226%)`
- `linear-gradient(rgb(255, 255, 255) 0%, rgb(82, 82, 82) 100%)`
- `linear-gradient(213deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 106%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 500 | Navigation, body copy, captions, and compact links. | Inter |
| Season Mix-TRIAL Regular | `--font-display` | webfont | 420 | Display statements and page headings. | DM Serif Display |
| Geist | `--font-geist` | webfont | 400, 500 | Smaller heading and interface emphasis. | Geist |

- **system-ui:** Regular to medium weights; compact supporting text, natural casing, and neutral tracking.
- **Season Mix-TRIAL Regular:** Measured around weight 420 with tight negative tracking; use for editorial headings, not dense UI.
- **Geist:** Regular to medium weight with neutral tracking; reserve for compact, clear supporting headings.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 420 | 1.2 | -0.02em | — | Season Mix-TRIAL Regular | Large hero statement and prominent editorial headings. |
| h1 | 30px | 420 | 1.2 | -0.02em | — | Season Mix-TRIAL Regular | Primary section heading, including major content and CTA blocks. |
| h2 | 22px | 420 | 1.2 | -0.02em | — | Season Mix-TRIAL Regular | Secondary section headings and supporting editorial titles. |
| h3 | 20px | 420 | 1.2 | -0.02em | — | Season Mix-TRIAL Regular | Card and subsection headings. |
| h4 | 18px | 400 | 1.4 | 0 | — | Geist | Compact interface or supporting headings. |
| body | 14px | 400 | 1.4 | 0 | — | system-ui | Paragraphs, descriptions, and standard page copy. |
| caption | 12px | 400 | 1.4 | 0 | — | system-ui | Small metadata, attribution, and supporting labels. |
| link | 12px | 400 | 1.4 | 0 | — | system-ui | Compact navigation and inline actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 13, 16, 20, 24, 30, 38, 40, 80 px.
- Section rhythm 80px · element gap 10px · card padding — · max content width 1100px.

Use a centered content frame with a measured maximum width of 1100px, while allowing the opening video and dark testimonial band to span the viewport. Content sections align mainly left; the closing CTA centers its heading and actions. The page rhythm is comfortable, with a measured section gap of 80px and clear pauses between logo proof, research, product, and news content. Light hairlines divide major regions. Keep the card and report areas orderly rather than dense, using small groups of aligned content and generous surrounding canvas.

## Shape & elevation

- Radius: card `8px` · media `10px` · link `6px` · xs `2px` · sm `3px` · md `6px` · lg `8px` · xl `10px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.25) 0px 14px 32px 0px`
- Shadow `sm` (card, other): `rgba(0, 0, 0, 0.07) 0px 2px 6px 0px`
- Shadow `hairline` (link): `rgba(0, 0, 0, 0.04) 0px 1px 2px 0px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.25) 0.5px 0.5px 0.5px 0px inset, rgba(0, 0, 0, 0.12) -0.5px -0.5px 1px 0px inset, rgba(0, 0, 0, 0.08) 1px 1px 2px 0px inset`
- Shadow `hairline-2` (link): `rgba(0, 0, 0, 0.82) 0px 1px 2px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.04) 0px 2.8px 9.6px 0px`

Most light content is flat, separated by fine gray rules rather than prominent containers. The customer-proof cards use measured rounded corners and deeper shadows to lift dark media from the black band. A subtle shadow supports small controls; avoid adding depth to every section or card.

## Imagery

Customer interview video is the defining visual: full-bleed in the hero and reused as image-led testimonial cards, with dark overlays to maintain legible text. Product UI is shown as large, light interface captures, while report cards use restrained editorial thumbnails. Logos and product imagery sit within the page grid. The small amount of burgundy visible belongs to customer footage, not the brand palette.

## Components

### Full-bleed video hero

Customer footage fills the opening viewport beneath a darkened treatment; centered white display copy sits above paired Contact Sales and white Start now actions.

### Customer logo strip

A horizontal sequence of monochrome customer marks rests on the light canvas, separated and framed by fine rules.

### Research feature

Editorial heading and research links sit alongside a large product-interface image in an airy, aligned content area.

### Product showcase

A product headline and compact platform link introduce a broad, light UI capture with supporting report cards below.

### Testimonial cards

Dark story cards with customer video imagery, concise attribution, and strong contrast sit within the black testimonial band.

### Closing CTA

Centered heading and concise supporting copy pair Contact Sales with a white Start now action on the light canvas.

### Multi-column footer

A structured link directory, small brand/social details, and subdued legal copy close the page on a pale neutral surface.

### Measured component styles

- **Primary button** (“Start now”): background #fafafa · text #0000ee · radius 0px · padding 8px 13px · 400 12px sans-serif · shadow rgba(255, 255, 255, 0.25) 0.5px 0.5px 0.5px 0px inset, rgba(0, 0, 0, 0.12) -0.5p
- **Secondary button** (“Start now”): background #ffffff · text #0000ee · radius 0px · padding 12px 24px 13px 24px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.14) 0px 1px 2px 0px
- **Link** (“Open story”): transparent background · text #0000ee · radius 0px · padding 30px · 400 12px sans-serif
- **Card** (“Read “If you want to have a positive imp”): background #292524 · text #0000ee · radius 8px · padding 0px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.25) 0px 14px 32px 0px

## Do

- Use #f7f6f4 as the dominant light canvas.
- Reserve #000000 and nearby dark tones for the customer-proof band and dark cards.
- Use the display face for large, short editorial statements.
- Keep navigation and supporting copy compact and sans-serif.
- Use customer video as the main source of visual impact.
- Separate major light sections with subtle gray rules.
- Keep the closing CTA centered and visually quiet.

## Don't

- Do not introduce bright accent colors absent from the measured palette.
- Do not turn the page into a dense dashboard layout.
- Do not apply heavy shadows to every light card.
- Do not treat colors in customer footage as brand colors.
- Do not use oversized display typography for navigation or body copy.
- Do not make every section dark; preserve the light editorial canvas.
- Do not invent decorative gradients or elaborate illustration systems.

## Agent prompt

Build a new Rox page that follows the site’s calm editorial system. Use Gallery Linen (#f7f6f4) as the primary canvas, Paper White (#ffffff) for high-contrast controls and dark-surface copy, Warm Graphite (#57534d) for supporting text, and Fine Silver (#e5e5e5) for quiet dividers. Use near-black Stage Black (#000000) sparingly for a strong proof or media section. Set prominent headings in an elegant editorial display serif with tight tracking; keep navigation and body copy in a clean sans-serif. Structure content in a centered frame, with spacious section transitions, left-aligned editorial content, and a centered CTA where appropriate. Prefer authentic customer video, restrained product UI captures, and monochrome logos. Keep most sections flat; use selective depth on media cards only.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | testimonials | Dark, full-width band with a left-aligned heading and a horizontal sequence of customer video cards. | Customer proof, Video testimonials, Card carousel | Black background, Dark media cards, Compact attribution |
| 2 | cta | Centered single-column block on the warm light canvas with a heading, brief copy, and paired actions. | Contact sales, Start now | Centered heading, Quiet button pair, Light background |
| 3 | footer | Wide light footer with a brand area, six link columns, social details, and subdued legal copy. | Grouped navigation, Social links, Legal information | Multi-column links, Muted text, Pale neutral surface |

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