---
version: alpha
name: Carhartt WIP
description: A stark black-on-white workwear canvas set in Helvetica Neue at maximum weight, where the only chromatic break is the brand's signature construction orange, and product photography of garments with utilitarian pedigree carries all the tactile warmth the type deliberately refuses.

colors:
  # Surface / canvas
  background: "#ffffff"        # pure white page canvas
  surface: "#f3f3f3"           # light gray background for secondary panels and hover states

  # Ink / text
  ink: "#000000"               # headings, body, nav — the dominant black
  ink-secondary: "#737373"     # supporting copy, metadata, captions, disabled states
  on-dark: "#ffffff"           # text/icons on black surfaces

  # Brand accent — Carhartt WIP construction orange
  primary: "#fe5000"           # the signature Carhartt WIP orange — iconic, used sparingly
  on-primary: "#ffffff"        # white text/icons on orange
  primary-dark: "#de141f"      # deep red variant — sale states, alerts
  primary-green: "#00a442"     # green — available/sustainability indicator
  primary-blue: "#3e53bb"      # blue — informational state

  # Borders
  border: "#737373"            # 1px inset-shadow border used on inputs and selects

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0) — Google format requires hex; near-transparent practical shadow

typography:
  display-hero:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.5px
  display:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  label:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 60px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 10px 60px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 60px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 10px 60px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.ink-secondary}"
    padding: 0px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 20px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px 20px

  select:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 15px 41px 15px 20px
  select-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 15px 41px 15px 20px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-sale:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Carhartt WIP Design System

## Overview

Carhartt WIP's site is the digital translation of workwear made honest: a pure white canvas (`{colors.background}`) set almost entirely in Helvetica Neue Bold, where the grid is tight, the corners are square, and the interface makes no attempt to charm. The name stands for Work In Progress — a sub-label of the century-old American workwear brand Carhartt, reinterpreted for streetwear and European urban culture since the early 1990s. That history is not decoration here; it is structural. The page feels like a shipping catalog with a fashion sensibility grafted on top, and the restraint is what makes it work.

Typography is the dominant design decision. Where most fashion retailers break into a secondary serif or introduce display-weight exotics, Carhartt WIP uses Helvetica Neue at 700 throughout the hierarchy — from the 48px campaign headline down to the 14px button label. The weight is constant, the size is the only variable. This is industrial type logic: you print everything in the same ink, you just change the stencil size. The result reads confident without being showy, structural without being cold. Against the white ground, the dense Helvetica creates the same visual register as a garment label or a safety placard.

The single chromatic event is the brand's construction orange (`{colors.primary}`). It surfaces once — on the most critical call-to-action hover state — and then retreats entirely. The rest of the palette is binary: black (`{colors.ink}`) on white (`{colors.background}`), with the mid-tone gray (`{colors.ink-secondary}`) handling metadata and secondary type. There are no decorative shadows, no gradient fills, no rounded corners of any kind (`{rounded.none}` throughout). The product photography — jackets, cargo pants, accessories in studio or editorial light — provides all the warmth and surface variation the chrome withholds.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with black Helvetica Neue Bold at every scale — weight stays 700, size is the only variable
- Single brand accent: construction orange (`{colors.primary}`) rationed to hover states and critical moments — never a fill on rest states
- Square corners everywhere (`{rounded.none}`) — the system has no border-radius tokens beyond zero
- Product cards at zero padding with photography running edge-to-edge, no border, no shadow
- Button padding extreme and deliberate: 10px 60px (`{components.button-primary}`) — wide, declarative, workwear-bold
- Input borders rendered via box-shadow inset (`{colors.border}`) rather than a CSS border property — flat visual language
- Four functional brand colors in CSS variables (`{colors.primary}`, `{colors.primary-dark}`, `{colors.primary-green}`, `{colors.primary-blue}`) — orange is brand, the rest are semantic
- Tailwind CSS with arbitrary values — spacing is precise and non-standard (e.g., `top-[117px]`)
- Motion in links and buttons at 0.2s with `cubic-bezier(0.4, 0, 0.2, 1)` — material-design easing, not bounce
- Mid-tone gray (`{colors.ink-secondary}`) is the only ink step between pure black and white — the system is deliberately three-tone

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The total page canvas — unbroken, no tint, no warmth. Every surface defaults here.
- **Light Gray** (`{colors.surface}`): Faint panel backgrounds, hover fill states, secondary surface zones.

### Ink / Text
- **Black** (`{colors.ink}`): The primary workhorse. Headings, body, navigation, buttons — everything defaults to pure black.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary metadata, captions, disabled UI, supporting copy. The only ink step between black and white.
- **White-on-Dark** (`{colors.on-dark}`): Text and icons reversed onto black surfaces (buttons, dark panels).

### Brand Accent
- **Construction Orange** (`{colors.primary}`): The signature Carhartt WIP orange, carried since the early streetwear era. Reserved for hover states and critical-action moments — never fills rest-state chrome. Pairs with white text (`{colors.on-primary}`).

### Semantic States
- **Deep Red** (`{colors.primary-dark}`): Sale pricing, error/alert states. Derived from the CSS variable `--color-red`.
- **Green** (`{colors.primary-green}`): Availability indicators, sustainability signals. From `--color-green`.
- **Blue** (`{colors.primary-blue}`): Informational state, selected UI indicators. From `--color-blue`.

### Borders & Shadow Tints
- **Gray Inset** (`{colors.border}`): Input and select borders are rendered as an inset box-shadow at `rgb(115,115,115)` — not a CSS border. Flat visual effect.

## Typography

### Font Family
- **Primary**: `Helvetica Neue`, with fallbacks: `Helvetica, Arial, sans-serif` — the Swiss grotesque serving every typographic role without variation.
- **No secondary typeface**: Carhartt WIP does not split into a display font, a mono, or a serif. One face, one weight range (400 for body, 700 for headings and UI).
- **OpenType**: Standard ligatures and lining numerals; no decorative feature-settings detected.

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 700 — campaign headline, hero title |
| `display` | 32px / 700 — section headers, category titles |
| `heading-section` | 24px / 700 — page sub-section heads |
| `heading-sub` | 20px / 700 — feature blocks, promotional cards |
| `body-large` | 18px / 400 — editorial lead copy |
| `body` | 16px / 400 — product descriptions, standard body |
| `nav-link` | 14px / 400 — navigation items, tertiary links |
| `button-ui` | 14px / 700 — all button labels |
| `label` | 14px / 400 — product tile labels, filter text |
| `caption` | 12px / 400 — SKU data, badge labels, fine print |

### Principles
- **One typeface, one weight range**: Helvetica Neue in 400 and 700 only — the distinction between heading and body is size, not personality.
- **Bold as structure**: 700 weight runs from the largest headline to the smallest CTA label. Weight signals "act here" more than it signals "read here."
- **No decorative letter-spacing**: tracking appears only as a tool for contrast correction (slight negative on display sizes), not for stylistic effect.
- **Uppercase is rare**: navigation and certain utility labels may uppercase; body and CTAs stay sentence case — the system reads like a label, not a logotype.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The rhythm balances catalog density at component level against generous editorial air between major sections.

### Grid & Container
- Full-width product grids on category pages — four columns desktop, reflow to two on tablet, one on mobile
- Product photography runs zero-padding, edge-to-edge in tiles — the image is the card
- Navigation bar is flat, flush to viewport edges with horizontal padding via `{spacing.lg}`
- Campaign hero sections span full width; headline positioned upper-center or left-aligned

### Whitespace Philosophy
- **Density at the tile level**: product cards are tight — photography abutting, captions immediately beneath, no gap between image and type
- **Air between sections**: major campaign zones and category shifts breathe with `{spacing.4xl}` or more
- **No decorative containers**: no shadowed boxes, no tinted panels that aren't functional — space is defined by the photography itself

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; no border | The total default — page canvas, product tiles, buttons at rest |
| Inset Border (Level 1) | `0 0 0 1px inset {colors.border}` | Input and select field boundaries — shadow-simulated border |
| Flat (Level 0) | No shadow; no border | Cards, navigation bar — zero elevation throughout chrome |

**Shadow Philosophy**: Carhartt WIP is entirely flat. There is no elevation system in the conventional sense — no card shadow, no panel lift, no modal depth. The product photography creates visual weight through imagery; the chrome stays on the surface. The only depth signal is the inset box-shadow used on form inputs in place of a CSS border, and even this is rendered at the same visual weight as a hairline rule. The flatness is not a limitation — it matches the utilitarian register of the brand.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every element in the system — buttons, inputs, cards, badges, images |

Carhartt WIP is the most minimal shape system possible: one token, one value, zero radius anywhere. Buttons are rectangular slabs. Product cards are hard rectangles. Form inputs are bare fields. This is not an accident — it is the workwear principle applied to UI: corners don't need rounding if the structure is honest.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants

- **`button-primary`** — Black fill (`{colors.ink}`), white bold label, square, conspicuously wide (10px 60px padding). The "Shop Now" CTA. On hover, flips to construction orange (`{colors.primary}`) — the only moment orange appears in chrome.
- **`button-secondary`** — White fill, black label, square — a bordered or context-implied secondary action.
- **`button-ghost`** — Transparent, black text, zero padding — inline link-style tertiary actions, nav items.

### Cards

- **`card-product`** — Zero padding, no radius, no shadow, no border. Photography runs full-bleed to the card edge. Product name and price in `{typography.label}` immediately below the image. The tile is defined by the photograph alone.

### Inputs

- **`input`** — White background, no CSS border property. The field boundary is drawn by a 1px inset box-shadow in `{colors.border}` gray. Square corners. 0px vertical padding — the boundary is visual only, not structural.
- **`select`** — Same inset-shadow border treatment, with asymmetric padding `{components.select}` to accommodate the custom dropdown arrow.

### Navigation

- **`nav-bar`** — White, flat, borderless. Top-level categories in `{typography.nav-link}` at 14px/400, flush to viewport with `{spacing.lg}` horizontal padding. No bottom rule, no shadow. The navigation is invisible as chrome, visible only as labels.

### Badges

- **`badge`** — Orange (`{colors.primary}`) fill, white caption — used for new-arrival or campaign flags. Square, tight padding.
- **`badge-sale`** — Deep red (`{colors.primary-dark}`) fill, white caption — for sale or discount states.

## Do's and Don'ts

### Do
- Keep the canvas pure white (`{colors.background}`) — let the product photography carry all warmth and color
- Use Helvetica Neue Bold (700) for every heading, button label, and structural element — weight is the only hierarchy signal besides size
- Reserve construction orange (`{colors.primary}`) for hover and interactive feedback — never use it as a fill color on rest states or backgrounds
- Keep every corner square (`{rounded.none}`) — the system has no radius and needs none
- Let product photography run edge-to-edge with zero padding inside tiles
- Set button padding at 10px 60px — the wide, declarative slab is part of the brand language
- Use the inset box-shadow border technique for inputs — it matches the flat visual register
- Use `{colors.ink-secondary}` for all secondary metadata and captions — the system is intentionally three-tone (black / gray / white)

### Don't
- Don't introduce any border-radius — not even 1px or 2px; the zero-radius posture is the brand's structural identity
- Don't use orange (`{colors.primary}`) on rest-state backgrounds, hero fills, or large surfaces — it is a hover signal and a flag, not a brand-wash color
- Don't add drop shadows to cards, buttons, or navigation — flat is the complete philosophy here
- Don't substitute a secondary or display typeface — the entire system runs in Helvetica Neue; variety comes from size and weight, not face
- Don't tighten button padding to match other brands' conventions — the wide 60px horizontal pad is a deliberate workwear-label signature
- Don't soften the product photography with rounded crop masks or card shadows — the sharpness is load-bearing
- Don't use orange as a text color on white — the contrast at `{colors.primary}` against white is insufficient for body copy; reserve it for white-on-orange badge and button hover states
- Don't introduce decorative motion (bounce, overshoot, springs) — transitions run at 0.2s with `cubic-bezier(0.4, 0, 0.2, 1)`, material-design precise

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below reflect observed behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column product stack; navigation collapses to hamburger; hero type scales down from 48px to ~28px |
| Tablet | 640–1023px | Two-column product grid; campaign headers scale to ~36px |
| Desktop | 1024–1279px | Four-column product grid; full horizontal navigation visible |
| Large Desktop | ≥1280px | Maximum container width; generous section padding (`{spacing.4xl}`) between zones |

### Touch Targets
- Primary buttons at 10px 60px padding provide approximately 34–44px hit height — adequate on mobile
- Navigation links in hamburger menu expand to full-row touch targets
- Product card tap area is the full tile — zero padding means the entire image is interactive

### Collapsing Strategy
- **Navigation**: full horizontal → hamburger icon; the same black-on-white identity persists
- **Hero headline**: 48px display-hero scales to ~28px on mobile — bold weight holds legibility at small sizes
- **Product grid**: four-column → two-column → single-column; photography maintains zero-padding edge-to-edge treatment throughout
- **Spacing**: inter-section air compresses from `{spacing.4xl}` to `{spacing.2xl}` at mobile

### Image Behavior
- Product photography fills tiles at every breakpoint with no border-radius and no shadow — the image treatment is breakpoint-agnostic
- Campaign photography uses full-width treatment at all sizes; text overlays shift from upper-center to upper-left on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Brand accent: Construction Orange (`{colors.primary}`)
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Input border: Gray inset shadow (`{colors.border}`)
- Button hover: Orange (`{colors.primary}`)

### Example Component Prompts

- "Create a Carhartt WIP hero section on white (`{colors.background}`). Headline at 48px Helvetica Neue Bold, weight 700, letter-spacing -0.5px, line-height 1.10, in black (`{colors.ink}`). Below it, a black rectangular CTA button — black fill, white bold 14px label, zero border-radius (`{rounded.none}`), 10px top/bottom padding and 60px left/right padding. On hover, the button fill flips to construction orange (`{colors.primary}`) with white text."
- "Build a product tile with zero padding and zero radius (`{rounded.none}`). The product photograph runs edge-to-edge, no border, no shadow. Directly below the image: 14px Helvetica Neue Regular product name in black (`{colors.ink}`), then 14px price in black, then 12px colorway caption in mid-gray (`{colors.ink-secondary}`). No card chrome whatsoever — the tile IS the photograph."
- "Design a campaign badge: construction orange (`{colors.primary}`) fill, white 12px Helvetica Neue caption (`{typography.caption}`), zero radius (`{rounded.none}`), 4px 8px padding. Reads 'NEW SEASON' or 'SALE' in sentence-case or uppercase."
- "Create an email input field: white background, no CSS border, a 1px gray inset box-shadow (`0 0 0 1px inset {colors.border}`), zero border-radius, 0px 20px padding, 16px Helvetica Neue Regular placeholder text in `{colors.ink-secondary}`. On focus, the inset shadow intensifies to black (`{colors.ink}`) — no glow ring, no color fill change."
- "Design a Carhartt WIP navigation bar: white background, flat, no bottom border, no shadow. Left: wordmark in black at ~20px bold. Center: nav links at 14px Helvetica Neue Regular (`{typography.nav-link}`) — 'Men', 'Women', 'Accessories', 'Shoes'. Right: account, search, cart icons. On category hover, the link color transitions from black (`{colors.ink}`) to mid-gray (`{colors.ink-secondary}`) at 0.2s `cubic-bezier(0.4, 0, 0.2, 1)`."

### Iteration Guide

1. Start on pure white (`{colors.background}`) with black Helvetica Neue Bold (`{colors.ink}`). If the canvas has any tint or warmth, reset it — Carhartt WIP is zero-compromise white.
2. Set every heading, label, and button in Helvetica Neue 700. If you reached for a different weight or face, revert — the mono-weight mono-face is the identity.
3. Keep all corners at zero radius (`{rounded.none}`). If any element shows rounding, remove it before proceeding.
4. Orange (`{colors.primary}`) appears only on hover. If you used it as a rest-state fill or background, it belongs only in the interactive layer.
5. Product photography gets zero padding, zero radius, zero shadow. The image is the card.
6. Button padding is 10px 60px — wide. Resist the urge to tighten it; the slab proportion is brand-deliberate.
7. Secondary information (prices at rest, metadata, captions) uses mid-gray (`{colors.ink-secondary}`) — the system's only color step between black and white.

---

## 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 Carhartt WIP. Brand names and trademarks belong to their respective owners.