---
name: Urbanwoodsystems
description: "Worth including as a masterclass in typographic hierarchy and how to achieve a premium, industrial feel using extreme scale and a restricted palette."
version: alpha

colors:
  background: "#E6E6DD"
  primary: "#000000"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 140px
    lineHeight: 0.9
    fontWeight: 500
    letterSpacing: "-2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 11px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.1px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

Bold, grid-based hardware product site with massive typography and neutral palette.

*A minimalist Swiss design magazine meets a high-end hardware catalog.*

## Colors

High-contrast monochromatic palette with a warm neutral background.

- **Background (`#E6E6DD`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- All text is strictly set to medium weight (500).
- Tight letter spacing (-0.1px to -2px) across all elements.
- No font weight variation; hierarchy is established solely through massive scale differences.

## Layout

Asymmetric 2-column grid on desktop, stacking to single column on mobile.

*Rhythm:* Strict 4px grid with minimal padding around interactive elements.

## Elevation & Depth

- Borders: No visible borders except standard 1px system defaults; relies entirely on layout and spacing.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Large white circular containers acting as primary navigation hubs.
- **card:** None; navigation is handled via large geometric shapes.
- **chip:** None.
- **input:** None.
- **hero:** Asymmetric split layout with a large product photograph on one side and a massive typographic block on the other.

## Do's and Don'ts

**Don't:**
- Don't use lightweight or thin font weights — screenshot shows all text at weight 500.
- Don't add drop shadows or depth to surfaces — screenshot shows perfectly flat elements.
- Don't use a pure white background — screenshot shows a warm neutral (#E6E6DD).
- Don't use complex border radii on buttons — screenshot shows large pill/circular shapes (300px radius).
- Don't use bright or multi-colored accent palettes — screenshot is strictly monochromatic with black ink.
- Don't use wide or relaxed letter spacing — screenshot shows tight, compressed typography.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, premium product site for high-end bicycle hardware. It uses a bold, industrial aesthetic with a warm neutral background (#E6E6DD) and deep black ink (#000000). Typography is handled exclusively with a medium-weight (500) grotesque sans-serif font (Unica77), utilizing massive display sizes for headlines (up to 140px) and very small sizes (11px) for body text, creating a stark hierarchical contrast. Critical constraints include: never use font weights other than 500, maintain a strictly monochromatic palette without vibrant accents, and keep surfaces completely flat without shadows. Navigation is achieved through large, white circular hubs rather than traditional menus.
```