# Urbanwoodsystems · Design system migration spec

> Source: https://www.urbanwoodsystems.com  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in typographic hierarchy and how to achieve a premium, industrial feel using extreme scale and a restricted palette.

## 1. Identity DNA

The design system for Urbanwood Systems operates on a principle of radical reduction, where the essence of the product is communicated through pure form and scale. Its visual identity draws a clear line between the functional precision of industrial hardware and the austere beauty of minimalist graphic design, creating a language that is both robust and refined.

**One-liner:** Bold, grid-based hardware product site with massive typography and neutral palette.
**Keywords:** premium · industrial · minimal · urban · functional
**Analogy:** A minimalist Swiss design magazine meets a high-end hardware catalog.

## 2. Color

The palette is an exercise in strict monochromatism, pairing deep black ink with a single warm neutral. This creates a high-contrast field that forces attention onto form, texture, and the precise relationship between elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E6E6DD` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochromatic palette with a warm neutral background.

The system's core chromatic rule is the deliberate exclusion of vibrant accents, ensuring the product remains the sole source of visual interest.

## 3. Typography

Typography is the primary architectural tool, using a single medium weight (500) of a grotesque sans-serif across the entire scale. Hierarchy is achieved not through weight variation, but through dramatic, almost architectural shifts in size, from massive display headlines to compact body text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 140px | 0.9 | 500 | -2px | Hero headlines and main branding |
| body | 11px | 1.1 | 500 | -0.1px | Body text and navigation links |

**Type rules:**
- 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.

## 4. Spacing

Spacing adheres to a strict 4px grid, creating a consistent rhythmic foundation for all layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px grid with minimal padding around interactive elements.

## 5. Surfaces

Surfaces are defined by absence, existing as flat planes devoid of shadow or depth cues. The system relies entirely on spatial relationships and the grid itself to establish structure and separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** No visible borders except standard 1px system defaults; relies entirely on layout and spacing.

## 6. Layout

The desktop layout is built on an asymmetric two-column grid, establishing a dynamic tension between visual elements. This skeleton simplifies to a single column on mobile, maintaining compositional integrity through scale and spacing alone.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Interaction design is nearly static, prioritizing compositional stability over animation. Motion is limited to utilitarian color transitions on interactive elements, providing necessary feedback without compromising the site's calm, deliberate presence.

- **Durations:** micro 0ms · small 200ms · medium 0ms
- **Easing:** `linear`
- **Patterns:**
  - Color transitions on interactive elements (0.2s).
  - No complex entrance animations or motion patterns visible.

- **Hover:** Standard pointer cursor on clickable elements.
- **Click:** None.
- **Transition:** Color changes on hover.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice mirrors the visual system: confident, understated, and strictly functional. Communication favors concise, direct statements over descriptive flourish, using headline scale as its primary expressive tool.

- **Tone:** Confident, understated, and functional.
- **Headline style:** Massive, bold, and tightly spaced.
- **CTA style:** Subtle, integrated into large geometric navigation hubs.
- **Avoid:** Excessive adjectives or marketing fluff. / Complex or multi-step navigation menus. / Vibrant or neon color schemes. / Decorative elements or unnecessary UI flourishes. / Italicized or script typography.

### Don'ts
- ❌ 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.

The system deliberately forgoes decorative elements, complex navigation patterns, and any typographic or chromatic ornamentation, leaving the product's form as the unadorned subject.

## System Prompt (paste into AI tool)

```
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.
```