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

# Raw Materials · Design System

> Quiet canvas, oversized type, unapologetic color.

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

Raw Materials introduces its design company through a restrained canvas, oversized black letterforms, and a vivid numbered section menu. The result feels like a printed editorial cover reimagined as an interactive, color-coded index.

## North star

Keep the canvas quiet and let oversized typography, precise outlines, and the numbered color-block navigation provide the drama.

## Overview

The page builds its identity from a warm, pale beige canvas (#f4e9e1), near-black typography (#0e0e0e), and a narrow rail of saturated, individually colored navigation blocks. A large outlined hero panel frames the initials as a dramatic typographic image; small brand and descriptor labels sit at its upper corners, keeping the composition editorial rather than promotional. StabilGrotesk is used consistently at regular weight, with scale and placement—not elaborate styling—creating hierarchy. The navigation alternates vivid orange, purple, black, blue, red, yellow, and green, while the main canvas stays calm. Rounded corners soften the otherwise stark geometric treatment. Fine dark outlines define the hero and content card without shadows. Generous open space around the oversized letterforms contrasts with compact labels and closely stacked navigation, making the first screen feel considered, legible, and unusually bold.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#f4e9e1` | `--color-warm-paper` | brand | Dominant page canvas and light text on saturated navigation blocks; gives the composition its warm editorial ground. |
| Soft Ink | `#0e0e0e` | `--color-soft-ink` | neutral | Primary lettering and fine panel outlines; defines the oversized initials and the restrained structural details. |
| Signal Orange | `#ff3d00` | `--color-signal-orange` | accent | Hello navigation block and section-entry strip; the leading warm accent against the pale canvas. |
| Vivid Violet | `#5900cc` | `--color-vivid-violet` | accent | Approach navigation block; a saturated cool counterpart to the orange section marker. |
| Electric Blue | `#2835f8` | `--color-electric-blue` | accent | Talent navigation block; one of the vivid numbered section colors. |
| Punch Red | `#ff003d` | `--color-punch-red` | accent | Careers navigation block; a high-energy red-pink section color. |
| Neon Yellow | `#ffff00` | `--color-neon-yellow` | accent | Contact navigation block; the brightest navigation tile, paired with dark lettering. |
| Acid Green | `#05ff00` | `--color-acid-green` | accent | Unusual Index navigation tile; a vivid section color rather than a broad page background. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Small navigation surface for the Raw Materials index item; a limited contrast against the warm canvas. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Work navigation tile and bold graphic lettering; used as a stark, high-contrast block. |

### Semantic aliases

`--color-canvas` → `#f4e9e1` (Warm Paper) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#000000` (Pure Black) · `--color-text` → `#0e0e0e` (Soft Ink) · `--color-text-muted` → `#f4e9e1` (Warm Paper) · `--color-border` → `#0e0e0e` (Soft Ink) · `--color-accent` → `#ff3d00` (Signal Orange) · `--color-accent-2` → `#5900cc` (Vivid Violet) · `--color-accent-3` → `#2835f8` (Electric Blue) · `--color-on-accent` → `#f4e9e1` (Warm Paper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0e0e0e` | `#f4e9e1` | 16.17:1 | AAA |
| `#0e0e0e` | `#ffffff` | 19.3:1 | AAA |
| `#0e0e0e` | `#000000` | 1.09:1 | fail |
| `#f4e9e1` | `#ffffff` | 1.19:1 | fail |
| `#f4e9e1` | `#000000` | 17.59:1 | AAA |
| `#ff3d00` | `#f4e9e1` | 2.97:1 | fail |
| `#ff3d00` | `#ffffff` | 3.55:1 | AA-large |
| `#ff3d00` | `#000000` | 5.92:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| StabilGrotesk | `--font-body` | webfont | 400 | Shared display, body, navigation, and caption typeface | Inter |

- **StabilGrotesk:** Regular weight throughout; hierarchy comes from scale and placement. Keep case natural, with compact labels and oversized graphic letterforms.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24.5px | 400 | 1 | 0 | — | StabilGrotesk | Brand and section headings, including the oversized initials in the hero. |
| body | 18px | 400 | normal | 0 | — | StabilGrotesk | Section introductions and supporting copy. |
| caption | 12px | 400 | 1 | -0.01em | — | StabilGrotesk | Compact index labels and small utility details. |
| nav | 12px | 400 | normal | 0 | — | StabilGrotesk | Numbered section navigation and its small labels. |

OpenType features in use: `"ss02"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 16, 24, 36, 48, 112 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width —.

A narrow, vertically stacked section index anchors the left side, beside a broad main content area. The hero sits in a large rounded, hairline-outlined panel, with small labels aligned to its upper corners and oversized initials occupying most of the interior. A slim orange section-status strip follows below. The measured page uses a six-column grid, comfortable density, and recurring open space; preserve the sidebar-to-canvas relationship rather than inventing a fixed maximum width.

## Shape & elevation

- Radius: button `16px` · card `16px` · xs `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

The design is essentially flat: no measured shadows or gradients. Thin near-black outlines separate the hero panel from the canvas, while filled, rounded navigation tiles provide contrast through color rather than depth. Maintain clean layering and avoid faux elevation.

## Imagery

The opening view is led by typography rather than photography: giant black initials become the central graphic, set directly against the warm canvas. Brand and descriptor labels remain small and peripheral. The measured page contains many image, video, and SVG elements, but they are not the defining visual in this first viewport; treat other media as supporting content, not as a replacement for the typographic hero.

## Components

### Section index

A vertical series of numbered, rounded navigation tiles. Use warm-paper text on saturated blocks, dark text on the pale or yellow tiles, and black for the Work tile.

### Outlined hero panel

A large rounded rectangle with a thin near-black outline and warm-paper interior; position small brand labels at the top and oversized black initials below.

### Section status strip

A slim orange rounded band beneath the hero, carrying a small section-entry message and a compact progress indicator.

### Editorial labels

Small, regular-weight StabilGrotesk labels identify the company and its unusual design positioning, aligned to opposite sides of the hero.

### Rounded content card

Use a warm, flat surface and a thin near-black outline where a card needs separation; avoid shadow-based elevation.

### Measured component styles

- **Primary button** (“01 Hello”): background #ff3d00 · text #f4e9e1 · border 1px solid · radius 16px · padding 0px · 400 13.3333px StabilGrotesk
- **Secondary button** (“02 Approach”): background #5900cc · text #f4e9e1 · border 1px solid · radius 16px · padding 0px · 400 13.3333px StabilGrotesk
- **Card** (“01 Hello”): background #ff3d00 · text #f4e9e1 · radius 16px · padding 0px · 400 16px StabilGrotesk
- **Navigation item** (“01”): transparent background · text #f4e9e1 · radius 0px · padding 0px · 400 12px StabilGrotesk

## Do

- Use #f4e9e1 as the dominant page canvas.
- Set primary text and hero letterforms in near-black.
- Make the hero typography oversized and compositionally dominant.
- Keep section navigation numbered, vertical, and color-coded.
- Use thin outlines and rounded corners to define major panels.
- Set the interface in a consistent regular-weight grotesque sans.

## Don't

- Do not replace the warm canvas with stark white.
- Do not add gradients, shadows, or glossy surface effects.
- Do not turn every accent color into a large background band.
- Do not crowd the hero with supporting copy or decorative imagery.
- Do not use heavy type weights where scale already creates emphasis.
- Do not introduce unmeasured spacing, sizing, or radius values.

## Agent prompt

Build a new page in the Raw Materials visual style. Use Warm Paper (#f4e9e1) as the calm canvas and Soft Ink (#0e0e0e) for type and thin panel outlines. Create a broad, rounded outlined hero with a small brand label, a short descriptor, and one dominant typographic graphic. Pair it with a vertical numbered section index using Signal Orange (#ff3d00), Vivid Violet (#5900cc), Electric Blue (#2835f8), Punch Red (#ff003d), Neon Yellow (#ffff00), and Acid Green (#05ff00) selectively. Use StabilGrotesk, or Inter as a free substitute, at regular weight; create hierarchy through scale and alignment. Keep surfaces flat, omit shadows and gradients, and use open space around the hero while keeping navigation compact. Follow measured proportions and do not invent dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left vertical numbered section index beside a broad, outlined hero panel; orange section-status strip below. | Color-coded section navigation, Section-entry status, Numbered index | Oversized initials, Warm canvas, Hairline outline, Rounded color tiles |

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