---
version: alpha
name: "032c"
description: "Berlin editorial magazine and shop — NHaas Grotesk Bold on white, volcanic red full-bleed sections, zero border radius, ink-on-white commerce grid."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"

  # Near-black primary text (rgba(18,18,18,0.75) flattened to opaque approx)
  ink: "#121212"  # was rgba(18,18,18) dominant — Google format requires hex
  ink-muted: "#666666"  # estimated — secondary caption text
  on-background: "#121212"
  on-surface: "#121212"

  # The 032c red — pure, uncompromising
  primary: "#ff0000"
  on-primary: "#ffffff"
  primary-container: "#ff0000"

  # Link and interaction states
  text-hover: "#ff0000"  # links snap to red on hover
  focus-ring: "#121212"  # dark outline on white chrome
  focus-tint: "#ff0000"

  # Borders and dividers
  border: "#000000"  # 2px solid black <hr> separators
  border-subtle: "#e0e0e0"  # 1px dividers between grid items
  border-input: "#dddddd"  # input border (rgb(221,221,221))

  # Shadow
  shadow-soft: "#1e1e1e"  # was rgba(0,0,0,0.12) — flattened to near-black approx

typography:
  display-hero:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 62px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0.6px
  display:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0.6px
  heading-section:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0.6px
  heading-sub:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: 1px
  body-large:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.6px
  body:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.6px
  nav-link:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 1px
  button-ui:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.6px
  caption:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0.48px
  overline:
    fontFamily: "NHaas Grotesk, Neue Haas Grotesk, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.7px

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

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 30px
    border: 1px solid {colors.ink}
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 30px
    border: 1px solid {colors.ink}
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 15px 30px
    border: 1px solid {colors.background}
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 30px
    border: 1px solid {colors.background}
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 30px
    border: 1px solid {colors.background}
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 98px 15px 15px
    border: 1px solid {colors.border-input}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 98px 15px 15px
    outline: 0px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.overline}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  nav-item-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  product-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 0px
---

# 032c Design System

## Overview

032c operates at the intersection of culture and commerce, and the design system reflects exactly that duality. The dominant canvas is clinical white (`{colors.background}`) — the negative space of an art gallery, the blankness of an unprinted page. Against this white, black text and editorial photography sit flat and factual, like a well-typeset magazine spread. Then, without warning, a full-bleed section in `{colors.primary}` arrives: the 032c red. Pure, unfiltered, uncompromising. It is not a call-to-action color or a brand highlight — it is a declaration. The red functions the same way the magazine's covers function: as a provocation, a visual disruption, a demand for attention.

The typeface is **NHaas Grotesk** — Neue Haas Grotesk, the refined commercial release of the same DNA that produced Helvetica. But where Helvetica was designed to disappear, 032c uses NHaas at weight 700 for nearly everything above caption level, pushing its clean geometric neutrality into confident territory. The result has a distinctly German precision about it: logical, undecorated, operating at high size with generous tracking (0.6px consistent across contexts) that gives the type room to breathe without loosening its authority. There is no serif, no handwriting, no editorial whimsy in the type palette. Just one grotesque, deployed with varying size and weight.

The defining structural move is **the hard color block.** White sections and red sections alternate as discrete slabs — no transition, no fade, no gradient. Commerce grids sit on white; magazine covers and feature callouts arrive on red. Border radius is zero across the entire system: every container, button, input, image frame, and product tile is a perfect rectangle. No rounding, no softening, no friendliness. It is a design system that has decided what it is and declines to apologize for it.

**Key Characteristics:**
- NHaas Grotesk as the sole typeface — weight 700 for headings, weight 500 for body and UI — a single-family discipline
- White-on-red and black-on-white are the only two compositional modes; nothing in between
- Zero border radius throughout — every surface is a rectangle, including buttons, inputs, images, and cards
- `{colors.primary}` (pure `#ff0000`) deployed as full-bleed section color, not as a CTA tint
- Consistent 0.6px letter-spacing on NHaas across all sizes — slightly opened, precisely editorial
- 2px solid black `<hr>` separators between sections — no soft dividers, no hairlines
- Product grid with square product photography, no border-radius crop, no shadow lift
- Link hover states snap directly to `{colors.primary}` — 0.15s ease transition, not instant but not slow
- Search input at 15px 98px 15px 15px padding (asymmetric for internal icon clearance) — utilitarian, zero radius
- Full editorial photography from the magazine bleeds into commerce without stylistic seam

## Colors

### Primary
- **White** (`{colors.background}`): The default canvas for editorial and commerce. Flat, clinical, maximum contrast for photography and typography. No warm tint, no cream, no off-white.
- **Near-Black** (`{colors.ink}`): All body text, headings, product names, navigation. Not pure `#000000` — a 7% near-black that's slightly softer under editorial lighting.

### Brand Accent
- **032c Red** (`{colors.primary}`): The signature. Used as section background at full bleed, in the wordmark on red sections, and as the hover color on links. Not a button tint, not a focus indicator — a whole compositional mode.

### Text States
- **Text Hover** (`{colors.text-hover}`): Link hover fires to red, matching the brand accent. 0.15s ease transition across opacity and color properties.
- **Focus Ring** (`{colors.focus-ring}`): Dark outline on white surfaces — no colored ring, no Tailwind-blue default.
- **Ink Muted** (`{colors.ink-muted}`): Secondary captions and metadata — lighter but still NHaas, same family.

### Borders & Surfaces
- **Border** (`{colors.border}`): The 2px solid black `<hr>` separator. Structural, not decorative.
- **Border Subtle** (`{colors.border-subtle}`): 1px grid dividers between product cells, very light.
- **Surface** (`{colors.surface}`): Hover state for product grid items — a barely-there gray lift.
- **Shadow Soft** (`{colors.shadow-soft}`): The single dropdown/modal shadow, `rgba(0,0,0,0.12)` flattened to near-black approximation. Elevation is almost never used.

## Typography

### Font Family
- **Primary**: `NHaas Grotesk` (self-hosted as `NHaasGroteskTXPro-65Md.woff2` and `NHaasGroteskTXPro-75Bd.woff2`), with fallbacks: `Neue Haas Grotesk`, `Helvetica Neue`, `Helvetica`, `Arial`, `sans-serif`
- **Variants in use**: TX Pro 65 Medium (weight 500) and TX Pro 75 Bold (weight 700) — exactly two weights, nothing else

*Note: NHaas Grotesk is licensed through Linotype. For external implementations, **Neue Haas Grotesk** (Adobe Fonts), **Aktiv Grotesk**, or **Inter** at high weight are close approximations. Avoid geometric grotesques (Futura, Avenir) — NHaas is humanist-inflected. Helvetica Neue Bold at 0.6px tracking is an acceptable fallback for short runs.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Feature callouts, magazine issue announcements at hero scale |
| `display` | Section feature headings, major product moments |
| `heading-section` | Shop category heads, article intros |
| `heading-sub` | Product subcategory labels, list section titles with 1px tracking |
| `body-large` | Blurb text, leading editorial copy |
| `body` | Default commerce and article text, navigation context |
| `nav-link` | Top navigation links — weight 500 at 14px with 1px tracking |
| `button-ui` | All button labels, filter chips, cart confirmations |
| `caption` | Price labels, stock status, dates — uppercase overline variant |
| `overline` | Category tags, product type labels — uppercase at 0.7px tracking |

### Principles
- One typeface across every context — no mixing, no display-versus-text split
- Two weights only: 500 (text and UI) and 700 (headings and feature moments)
- Consistent 0.6–1.0px letter-spacing — slightly wide for the editorial register
- No italic, no oblique — 032c doesn't hedge
- Uppercase appears only at caption and overline scale, via `text-transform: uppercase` with expanded tracking

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

032c's spacing is tight where it needs to be dense and spacious where it needs to signal premium. The 8px and 20px steps dominate the product grid; 36px and 40px appear at section transitions. The very large values (41.5px = approximately 2.5rem) appear as asymmetric hero offsets — not round numbers, but computed grid positions from the Tailwind arbitrary-value system.

### Grid & Container
- Max content width: approximately 1600px (breakpoint evidence ceiling)
- Product grid: typically 4-column on desktop, collapsing to 2 on tablet and 1 on mobile
- No fixed gutter constants — Tailwind arbitrary values (`top-[117px]`) suggest dynamic positioning
- Magazine cover sections: full viewport width, no container constraint
- Commerce sections: padded container with editorial top/bottom sections bleeding full-width

### Whitespace Philosophy
- Minimal padding on product cards — no breathing room around product tiles, the grid is the density
- Section-level spacing is generous (36–40px top/bottom) to allow the color blocks to read as distinct zones
- Photography bleeds to edges without padding; the white canvas IS the frame
- Navigation bar is sparse — logo centered, minimal links, no mega-menu overhang

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All products, navigation, page body |
| Divider (Level 1) | `2px solid {colors.border}` top-border only | Section separators — `<hr>` rule |
| Subtle Border (Level 2) | `1px solid {colors.border-subtle}` | Grid cell division, light separation |
| Modal (Level 3) | `rgba(0,0,0,0.12) 0px 4px 20px 0px` | Cart drawer, search overlay |
| Focus Ring | `{colors.focus-ring}` outline none | Inputs suppress default ring — outline: 0 on focus |

**Shadow Philosophy**: 032c is almost entirely flat. The single documented shadow value (`rgba(0,0,0,0.12) 0px 4px 20px 0px`) appears on modal-type surfaces like the cart drawer — a necessary separation, not a design choice. Everything else is distinguished by color blocks and border rules, not light simulation. This is consistent with the editorial heritage: a magazine page is flat; depth is created by image scale and type hierarchy, not drop shadows.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — all buttons, inputs, images, cards, containers, badges |

032c is a zero-radius system. No exceptions were found in the dembrandt extraction (`borderRadius.values: []`). The rectangle is the only shape. Product photography is displayed as a perfect square crop; buttons are sharp-cornered rectangles; the search input is a flat-edged white field. This is not a cost reduction — it is a deliberate aesthetic commitment. The 032c square logo sits flush in the center of red covers, and the site's geometry reflects that: all planes, all edges, no curves.

## Components

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

### Button variants

- **`button-primary`** — Black fill, white text, 1px solid black border, 0px radius. The "add to bag" CTA. Hover inverts to white fill with black border, creating a negative-space flash effect.
- **`button-secondary`** — White fill, black text, 1px solid white border (invisible on white backgrounds, appears on red sections). Used for secondary actions, newsletter opt-ins on red panels.
- **`button-ghost`** — Transparent, white text, 1px white border. Lives on red `{colors.primary}` section backgrounds. Hover fills to white, text flips to black.

### Cards

Product tiles are no-padding flat rectangles (`{components.card}`). No box shadow, no border, no radius. A product is a photograph with a label beneath it — category above the image in `{typography.overline}`, product name in `{typography.body}`, price in `{typography.caption}`. Hover state shifts the tile background to `{colors.surface}` (barely-perceptible light gray). The card is a minimal frame for the photography to own.

### Inputs

The search input (`{components.input}`) uses asymmetric padding (`15px 98px 15px 15px`) to clear the internal submit icon. Background is white, border is `{colors.border-input}` — a light gray in default state. On focus, the system suppresses the outline entirely (`outline: 0`) — no ring, no highlight, just the cursor. This is aggressive about removing UI chrome.

### Badges / Tags

Category labels and product overlines use `{components.badge}` — uppercase at 12–14px with 0.7px tracking, no border radius, minimal padding. `[SOLD OUT]` and status labels share the same non-pill treatment. There are no pills in this system.

### Navigation

The header is centered on the wordmark with Magazine and Store links flanking left, utility icons (search, account, cart) on the right. Navigation links render in `{typography.nav-link}` — 14px weight 500, 1px tracking. Hover fires to `{colors.primary}` at 0.15s ease. The nav is slim (approximately 90px height), non-sticky, and recedes behind editorial content on scroll. No mega-menu, no dropdown, no mobile hamburger visible at page 1 of the dembrandt extraction.

## Do's and Don'ts

### Do
- Set section backgrounds as full-bleed `{colors.primary}` or `{colors.background}` — no half-measures, no contained red boxes
- Use NHaas Grotesk (or Helvetica Neue) at weight 700 for all headings — confidence, not decoration
- Keep border-radius at `{rounded.none}` everywhere — no exceptions for inputs, images, or buttons
- Apply 0.6px letter-spacing consistently on NHaas across all sizes — it's the editorial register
- Invert button on hover: fill → outline, outline → fill — the negative-space toggle is the interaction signature
- Use 2px solid black `<hr>` rules as section separators — sharp, structural, unambiguous
- Place the 032c wordmark in white on red sections — `{colors.primary}` is both background and brand canvas
- Snap link hover to `{colors.primary}` — the red flash on hover is the system's only color event
- Let product photography run edge-to-edge within its grid cell — no padding, no drop shadow, no card chrome
- Maintain uppercase-with-tracking for category labels and overlines — it signals information hierarchy without a size shift

### Don't
- Don't introduce any border radius — not 2px on inputs, not 4px on tags, not 9999px on badges
- Don't use `{colors.primary}` as a button fill on white backgrounds — red is a section mode, not a button color
- Don't add drop shadows to product tiles — flat photography on flat white is the entire premise
- Don't use Helvetica or Arial as a display font — they need to match the weight 700 precision of NHaas; use the correct fallback stack
- Don't introduce a third font weight — only 500 and 700 are in the system; adding 400 or 300 reads as imprecision
- Don't mix type sizes freely — the scale is deliberately stepped; intermediate sizes (e.g., 19px, 22px, 35px) break the typographic grid
- Don't use `{colors.primary}` for focus rings or semantic states — red is editorial, not interactive feedback
- Don't soften the button hover — the inversion should be instantaneous-feeling (0.15s ease max)
- Don't add gradients to red sections — the flat color block is the point; any gradient dissolves its authority
- Don't center-align body text — the system is left-aligned throughout; centering reads as promotional, not editorial

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <650px | Single column product grid, nav collapses, display type drops to 28–36px |
| Mobile | 650–749px | 2-column grid begins, nav links reduce |
| Mobile Large | 750–989px | 2-column grid, full nav, display at 40–50px |
| Tablet | 990–1199px | 3-column grid, section padding reduces, hero type at full weight |
| Desktop | 1200–1599px | 4-column grid, full editorial layout, 62px display |
| Large Desktop | ≥1600px | Layout maxes at ~1600px container, centered with white margins |

The dembrandt extraction documented 10 breakpoints (650, 749, 750, 767, 800, 989, 990, 1100, 1200, 1600px), suggesting a dense mobile-transition zone. The 749/750 and 989/990 pairs indicate slight layout adjustments at closely-spaced widths — typical of a Shopify + Tailwind build that needed specific corrections at near-standard breakpoints.

### Touch Targets
- Navigation links: approximately 40–44px height with top/bottom padding
- Product tile tap zones: full-image width (no dedicated touch target beyond the grid cell)
- Cart and utility icons: approximately 44px square safe area based on nav height
- Buttons at 15px vertical padding on 14px text give approximately 43px total height — at the minimum 44px threshold

### Collapsing Strategy
- Product grid: 4 → 3 → 2 → 1 column across breakpoints
- Navigation: Utility icons persist; text links may collapse into icon-only mode on smallest breakpoints
- Full-bleed red sections persist at all breakpoints — no responsive lightening of the brand color
- Display type: scales down from 62px to approximately 28–36px at mobile
- The white-on-red and black-on-white compositional modes are maintained at every width

### Image Behavior
- Product photography: square crops maintained, scale to grid cell width
- Magazine covers on red sections: constrained width with overflow hidden, no aspect-ratio cropping via CSS
- No lazy-load art direction changes — the same image source scales via responsive container

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / red section: `{colors.primary}`
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border}`
- Link hover: `{colors.text-hover}`
- Section divider: `2px solid {colors.border}` top-only

### Example Component Prompts

- "Create a product grid section on `{colors.background}` white. 4 columns, no gutter padding beyond the grid gap. Each tile: product image full-width, no border-radius, no shadow. Below the image, overline category label in NHaas Grotesk 12px weight 600 uppercase 0.7px tracking `{colors.ink}`, product name in 16px weight 500 0.6px tracking, price in 12px weight 600 uppercase. No card chrome — the photography IS the tile."
- "Build a full-bleed red section using `{colors.primary}` as background. Place the 032c wordmark as white text, NHaas Grotesk 62px weight 700. Below the wordmark: a ghost button with transparent fill, 1px solid white border, white text, 0px border-radius, padding 15px 30px. Hover: background fills to white, text flips to `{colors.ink}`. No gradient, no shadow."
- "Design a top navigation bar: white background, 032c wordmark centered in NHaas 18px weight 700. Left side: 'Magazine' and 'Store' in NHaas 14px weight 500, 1px tracking, `{colors.ink}`. Right side: search, account, cart icon buttons, 44px touch targets. Link hover: color transitions to `{colors.primary}` at 0.15s ease. A 2px solid black separator below the nav."
- "Create an Add to Bag button: black fill `{colors.ink}`, white text `{colors.background}`, NHaas Grotesk 14px weight 500, 0.6px tracking. 0px border-radius. Padding 15px 30px. No shadow. Hover state: background becomes transparent, text becomes `{colors.ink}`, border 1px solid `{colors.ink}` appears. Transition: 0.15s ease on background-color and color."
- "Build a magazine cover callout: white body above a hard edge. Below the hard edge: full-bleed `{colors.primary}` section. On the red: white NHaas Grotesk 50px weight 700, issue title text. Below the title: `{typography.nav-link}` in white. 2px solid black `<hr>` immediately above the red section. No fade between white and red — the border rule provides the transition."
- "Design a search input on white: NHaas Grotesk 16px weight 500, padding 15px 98px 15px 15px (clearance for submit icon on right). Border: 1px solid `{colors.border-input}`. Border-radius: 0px. On focus: remove outline entirely. The input is a clean white rectangle flush to the page chrome."

### Iteration Guide

1. Set the default canvas to `{colors.background}` white — commerce and editorial both live here first.
2. When a moment needs the brand's full force, flip the section background to `{colors.primary}` full-bleed. This is the only switch in the palette.
3. Use NHaas Grotesk weight 700 for every heading above 18px. Weight 500 for body, UI, and nav. No other weights exist.
4. Keep border-radius at `{rounded.none}` — 0px — on every element. The rectangle is the identity.
5. Apply 0.6px letter-spacing on NHaas consistently across all non-caption sizes. Caption/overline gets 0.7–1.0px and uppercase transform.
6. Button interactions invert: solid ↔ transparent swap over 0.15s ease. Never use `{colors.primary}` as a button fill on white — red is a section, not a CTA.
7. Link hover snaps to `{colors.primary}` at 0.15s ease. That single color event is the site's interactive signature.

---

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