---
version: alpha
name: The Raw Materials
description: An unusual design company — warm paper-cream canvas with near-black ink, oversized condensed-grotesk display type set in screaming uppercase, electric primary-color accents (acid green, signal red, ultramarine), and huge soft-rounded card geometry. Editorial swagger meets studio playfulness.

colors:
  # Canvas + ink
  background: "#f4e9e1"        # warm paper cream — primary canvas
  surface: "#ffffff"          # clean white cards on cream
  surface-dark: "#0e0e0e"     # inverted near-black sections
  ink: "#0e0e0e"              # near-black — primary text
  ink-pure: "#000000"
  ink-muted: "#83807c"        # warm stone gray — secondary text

  # Inverted-section ink
  on-dark: "#f4e9e1"          # cream text on the black canvas
  on-dark-pure: "#ffffff"

  # Electric accents — used sparingly as signals
  primary: "#ff003d"          # signal red
  accent-green: "#3eea5a"     # acid green
  accent-blue: "#2835f8"      # ultramarine
  accent-violet: "#5900cc"
  accent-cyan: "#00c2ff"
  accent-yellow: "#ffd93e"
  accent-orange: "#ff5c00"
  accent-pink: "#fa89a8"

  # Warm neutral scale (tints of the cream)
  cream-deep: "#e4d0cd"
  cream-soft: "#e7e4d0"
  stone-700: "#4a3937"
  stone-500: "#83807c"
  panel-soft: "#f5f5f5"

  # On-color
  on-primary: "#ffffff"
  on-accent: "#0e0e0e"

  # Borders / hairlines
  border: "#242320"           # near-black hairline on cream
  border-soft: "#e4d0cd"      # warm divider

typography:
  display-mega:
    fontFamily: "HTQ-Waldenburg-FettSchmal, Anton, Arial Narrow, sans-serif"
    fontSize: 124px
    fontWeight: 700
    lineHeight: 0.92
    letterSpacing: -2.4px
  display-hero:
    fontFamily: "HTQ-Waldenburg-FettSchmal, Anton, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1.8px
  display-condensed:
    fontFamily: "HTQ-Waldenburg-Halbschmal, Anton, Arial Narrow, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.0px
  section-heading:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  card-title:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.5px
  body-large:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.2px
  body:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.1px
  body-small:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-mono:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.2px
  caption:
    fontFamily: "StabilGrotesk, Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 44px
  3xl: 64px
  pill: 9999px

components:
  # Hero / display headline
  display:
    textColor: "{colors.ink}"
    typography: "{typography.display-mega}"

  # Primary CTA — black pill on cream
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark-pure}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Accent CTA — acid green
  button-accent:
    backgroundColor: "{colors.accent-green}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — outlined on cream
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Pill tag / label
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border-soft}"

  # Big soft-rounded content card on cream
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.3xl}"
    padding: 32px
    borderColor: "{colors.border-soft}"

  # Inverted feature card — black canvas
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.3xl}"
    padding: 32px

  # Accent panel — full-color tile
  card-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.3xl}"
    padding: 32px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-soft}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.ink}"

  # Top nav bar — floating pill
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
    borderColor: "{colors.border-soft}"
---

# The Raw Materials Design System

## Overview

The Raw Materials brands itself as "an unusual design company," and its website behaves accordingly — it treats the page as a studio reel, not a corporate brochure. The foundational move is the canvas: a warm paper-cream (`{colors.background}`) rather than the default sterile white, immediately giving every screen the tactile, printed feeling of risograph stock or uncoated paper. Against that cream, text is near-black (`{colors.ink}`) — never pure `#000000` — so the contrast stays editorial-soft rather than digital-harsh.

The typographic personality is loud and condensed. Display headlines are set in HTQ-Waldenburg, an extremely narrow, fat grotesk that lets enormous statements (often 100px+ and uppercase) compress into a single decisive line. This is type as a megaphone — headlines fill the width, line-heights collapse below 1.0, and negative tracking pulls the letters into a dense black mass. Body and UI copy then drop into StabilGrotesk, a clean, slightly idiosyncratic neo-grotesk that keeps reading text humane and modern while the display face does the shouting.

Geometry is the third signature. The Raw Materials loves big, soft, generously-rounded shapes — cards and panels round at 44px to 64px (`{rounded.2xl}`–`{rounded.3xl}`), and pills/blobs push to fully circular. Combined with the cream canvas this reads as friendly and toy-like, deliberately undercutting the seriousness of the oversized type. Color arrives as punctuation: acid green (`{colors.accent-green}`), signal red (`{colors.primary}`), ultramarine (`{colors.accent-blue}`) and a whole confetti box of secondary hues are deployed as full-bleed accent tiles and interactive signals, never as muddy chrome.

**Key Characteristics:**
- Warm paper-cream canvas (`{colors.background}`) instead of white — tactile, printed feel
- Near-black ink (`{colors.ink}`), never pure black — softer editorial contrast
- HTQ-Waldenburg condensed display type, huge and uppercase, line-height below 1.0
- StabilGrotesk for body/UI — clean modern neo-grotesk reading voice
- Oversized soft-rounded geometry (44–64px radii), pills and circles everywhere
- Electric accent palette (acid green, signal red, ultramarine) used as punctuation, not chrome
- Dual-tone system: cream sections invert to near-black canvases for rhythm
- Negative letter-spacing across display sizes for dense, decisive headlines

## Colors

### Primary
- **Paper Cream** (`{colors.background}`): The signature canvas. Warm, printed, uncoated-stock feel.
- **Near-Black Ink** (`{colors.ink}`): Primary text and dark inverted sections. Not pure black.
- **White** (`{colors.surface}`): Clean card surfaces floating on the cream.

### Inverted
- **Dark Canvas** (`{colors.surface-dark}`): Full near-black sections for contrast rhythm.
- **Cream-on-Dark** (`{colors.on-dark}`): The cream used as text color inside dark sections.

### Electric Accents
- **Signal Red** (`{colors.primary}`): Primary accent, alert tiles, hot CTAs.
- **Acid Green** (`{colors.accent-green}`): The studio's loudest signal — buttons, highlights.
- **Ultramarine** (`{colors.accent-blue}`): Cool counterweight accent tiles.
- **Violet** (`{colors.accent-violet}`), **Cyan** (`{colors.accent-cyan}`), **Yellow** (`{colors.accent-yellow}`), **Orange** (`{colors.accent-orange}`), **Pink** (`{colors.accent-pink}`): The confetti box of secondary accent tiles.

### Neutrals
- **Stone Gray** (`{colors.ink-muted}`): Secondary/muted text, warm-tinted.
- **Deep Cream** (`{colors.cream-deep}`) / **Soft Cream** (`{colors.cream-soft}`): Warm dividers and tinted panels.
- **Border** (`{colors.border}`): Near-black hairline on cream.
- **Border Soft** (`{colors.border-soft}`): Warm low-contrast divider.

## Typography

### Font Family
- **Display**: `HTQ-Waldenburg-FettSchmal` / `HTQ-Waldenburg-Halbschmal` (condensed fat grotesk), fallbacks `Anton, Arial Narrow, sans-serif`
- **Body / UI**: `StabilGrotesk`, fallbacks `Inter, Arial, sans-serif`
- **Casing**: Display headlines are frequently set in `text-transform: uppercase`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-mega}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-mega` | 124px screaming uppercase hero |
| `display-hero` | Large display statements |
| `display-condensed` | Sub-display condensed headings |
| `section-heading` | StabilGrotesk section titles |
| `card-title` | Card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `label-mono` | Uppercase labels, metadata |
| `button-ui` | Buttons, nav |
| `caption` | Tags, fine print |

### Principles
- **Condensed and loud**: Display type uses an extremely narrow grotesk so huge uppercase statements fit one line.
- **Sub-1.0 line-height on display**: Headlines stack as a dense black mass; tracking goes negative (-1.8 to -2.4px).
- **Two-voice system**: HTQ-Waldenburg shouts, StabilGrotesk speaks. Never mix roles.
- **Warm contrast**: Near-black ink on cream keeps even the loudest type from feeling harsh.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, scaling to very large section gaps (`{spacing.3xl}`–`{spacing.4xl}`) between studio-reel blocks.

### Grid & Container
- Generous max content width with full-bleed accent tiles breaking the grid
- Hero: oversized single-statement headline, often left-aligned and width-filling
- Content: large soft-rounded cards in 2–3 column mosaics
- Sections alternate cream and near-black canvases for rhythm

### Whitespace Philosophy
- **Cream breathing room**: The warm canvas itself is a design element — left mostly empty around dense type.
- **Big shapes, big gaps**: Oversized rounded cards demand oversized spacing between them.
- **Color as event**: Accent tiles punctuate long cream stretches like signal flares.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `sm` | 8px | Inputs, small chips |
| `md` | 16px | Inputs, compact cards |
| `lg` | 24px | Standard cards |
| `xl` | 32px | Large cards |
| `2xl` | 44px | Feature panels |
| `3xl` | 64px | Hero cards, big content tiles |
| `pill` | 9999px | Buttons, tags, nav, avatar blobs, decorative circles |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Near-black pill, white text. The default decisive CTA.
- **`button-accent`** — Acid-green pill with near-black text. The studio's loud signal action.
- **`button-secondary`** — Cream surface, near-black outline pill. Quiet secondary.

### Cards
- **`card`** — White surface on cream, very large 64px radius, soft warm hairline.
- **`card-dark`** — Inverted near-black card with cream text for rhythm.
- **`card-accent`** — Full-color accent tile (signal red default), white text.

### Inputs
- **`input`** — White surface, warm soft border, 16px radius. Focus darkens border to near-black ink.

### Navigation
- **`nav-bar`** — Floating cream pill, near-black text, soft warm border.

### Badges
- **`badge`** — White pill tag with warm hairline, near-black text.

## Do's and Don'ts

### Do
- Use the warm cream (`{colors.background}`) as the default canvas, not white
- Use near-black ink (`{colors.ink}`), never pure `#000000`, for the editorial-soft contrast
- Set display headlines huge, condensed, uppercase, with sub-1.0 line-height and negative tracking
- Keep StabilGrotesk for all reading and UI copy
- Round cards big — 44px to 64px — and use full pills for buttons
- Deploy electric accents as full-color tiles and signals, sparingly

### Don't
- Don't put body copy in HTQ-Waldenburg — the condensed display face is for shouting only
- Don't use positive letter-spacing on display headlines
- Don't let accent colors become UI chrome (borders, backgrounds of neutral elements)
- Don't use tight square corners on cards — the soft oversized radius is core identity
- Don't swap the cream canvas for sterile white
- Don't mute the accents — they are signal flares, full-saturation

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display type scales down but stays condensed/uppercase |
| Tablet | 600–1024px | 2-column card mosaics begin |
| Desktop | 1024–1440px | Full mosaic layout, full-bleed accent tiles |
| Large | >1440px | Centered, generous cream margins |

### Touch Targets
- Pill buttons use 14px+ vertical padding for comfortable taps
- Nav pill stays floating and finger-sized on mobile

### Collapsing Strategy
- Hero display type: 124px → scales fluidly (the live site uses vw-based sizing) while preserving negative tracking
- Card mosaic: 3-column → 2-column → single column
- Accent tiles: maintain full-bleed treatment, stack vertically on mobile
- Section rhythm: cream/black alternation preserved at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Paper Cream `{colors.background}`
- Text: Near-Black Ink `{colors.ink}`
- Primary CTA: Near-black pill `{colors.ink}` / acid-green pill `{colors.accent-green}`
- Accent tiles: Signal Red `{colors.primary}`, Ultramarine `{colors.accent-blue}`
- Card surface: White `{colors.surface}`, 64px radius

### Example Component Prompts
- "Create a hero on paper-cream `{colors.background}`. Headline in a condensed fat grotesk (HTQ-Waldenburg / Anton fallback), uppercase, 124px, weight 700, line-height 0.92, letter-spacing -2.4px, color `{colors.ink}`. Subhead in StabilGrotesk 20px weight 400, `{colors.ink-muted}`. Acid-green pill CTA (`{colors.accent-green}` bg, `{colors.on-accent}` text, 9999px radius)."
- "Design a card: white `{colors.surface}` on cream, 64px radius (`{rounded.3xl}`), 32px padding, soft warm hairline `{colors.border-soft}`. Title 24px StabilGrotesk weight 500, body 17px weight 400."
- "Build an accent tile: `{colors.primary}` background, white text, 64px radius, oversized condensed uppercase headline."
- "Create a floating nav pill: cream `{colors.background}`, near-black text, 9999px radius, warm border `{colors.border-soft}`, 12px 20px padding."

### Iteration Guide
1. Cream canvas + near-black ink is the foundation — never white + pure black
2. Display = condensed/uppercase/huge/negative-tracked; body = StabilGrotesk normal
3. Round everything generously — 64px cards, full pills, decorative circles
4. Accents are full-saturation signal flares, never neutral chrome
5. Alternate cream and near-black sections for editorial rhythm

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by The Raw Materials. Brand names and trademarks belong to their respective owners.