# Highsnobiety · Design system migration spec

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

> A quintessential example of a modern editorial site that blends streetwear aesthetics with premium design sensibilities.

## 1. Identity DNA

Highsnobiety operates as a premium streetwear magazine, its design system analogous to the architecture of a flagship store: stark, confident, and built around the content it houses. The visual language is rooted in editorial clarity, using a high-contrast monochrome palette to frame cultural commentary and fashion news. It is a platform where the design serves the story, not the other way around.

**One-liner:** A premium editorial platform for streetwear culture and fashion news.
**Keywords:** editorial · streetwear · premium · cultural
**Analogy:** A premium streetwear magazine that blends fashion, culture, and commerce.

## 2. Color

The color system is a disciplined exercise in contrast, built on a monochrome foundation of black and white. Accents are reserved for muted olive and grey tones, used sparingly to highlight editorial elements without disrupting the overall gravitas.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F0F0F0` | card background |
| `--bg-quiet` | `#E0E0E0` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#020202` | secondary text |
| `--muted` | `#737373` | placeholder |
| `--accent` | `#263D43` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast monochrome with muted olive/khaki accents for editorial highlights.

The core principle is restraint; color is a functional tool for hierarchy, not decoration.

## 3. Typography

Typography is the voice of the system, anchored by HS Sans, a custom grotesque sans-serif that delivers headlines with bold, uppercase authority. Body text is set with a comfortable line-height, creating a clear typographic hierarchy from major editorial statements down to metadata.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.0 | 900 | -1px | Major editorial headlines |
| headline | 20px | 1.2 | 700 | -0.4px | Section headers and article titles |
| body | 17px | 1.6 | 400 | 0px | Main body text and descriptions |
| caption | 14px | 1.2 | 400 | 0px | Metadata, labels, and small UI elements |

**Type rules:**
- Headlines and navigation use uppercase with tight tracking.
- Body text uses a comfortable line-height for reading.
- Primary font is a custom grotesque sans-serif (HS Sans).

## 4. Spacing

Spacing follows a strict vertical rhythm, with all measurements in multiples of 4px to create consistent and predictable padding and margins throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Multiples of 4px for consistent vertical rhythm and padding.

## 5. Surfaces

Surfaces are defined by precision rather than depth, using thin, bottom-heavy 1px borders in black or grey to delineate content. Shadows are minimal or absent, maintaining the flat, graphic quality of the editorial grid.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px rgba(0,0,0,1)
  - 0px 0px 0px 0px rgba(0,0,0,0.12)
  - 0px 0px 0px 0px rgba(0,0,0,0.08)
- **Borders:** Thin 1px borders (bottom-heavy) using #000000 or #737373.

## 6. Layout

The layout skeleton is a classic editorial grid, beginning with a full-width hero section for photographic impact. Content blocks follow in a structured arrangement, prioritizing clear visual hierarchy and generous spacing for large-scale imagery.

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

**Skeleton:** Classic editorial grid with a prominent hero section, followed by content blocks.

## 7. Motion & Interaction

Motion is purposeful and understated, designed to guide focus rather than distract. Smooth, long-duration opacity transitions govern overlays, while quick border and opacity animations provide immediate feedback for interactive UI elements.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity transitions for overlays (2s).
  - Subtle transform animations for elements (1s).
  - Quick transitions for UI interactions (0.2s border/opacity).

- **Hover:** Underlines appear on text links; subtle color shifts on interactive elements.
- **Click:** Immediate visual feedback through state changes or slight scaling.
- **Transition:** Border and opacity transitions are used to indicate active states.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative, cool, and direct, mirroring the bold typography of the headlines. It is a tone that sets trends, communicated through stark, functional language and a complete avoidance of whimsy or decorative excess.

- **Tone:** Authoritative, cool, and trend-setting.
- **Headline style:** Bold, uppercase, and direct, often using large-scale typography.
- **CTA style:** Direct and functional, often presented as simple text or a full-width button.
- **Avoid:** Playful or whimsical language / Excessive punctuation / Soft, rounded shapes

### Don'ts
- ❌ Don't use bright, neon colors — screenshot shows a palette of black, white, and muted earth tones.
- ❌ Don't use decorative or script fonts — screenshot shows a clean, bold grotesque sans-serif.
- ❌ Don't use heavy drop shadows — screenshot shows flat design with subtle or no shadows.
- ❌ Don't use small, dense text blocks — screenshot shows generous line-height and clear hierarchy.
- ❌ Don't use rounded corners everywhere — screenshot shows sharp or very slightly rounded edges.
- ❌ Don't use vibrant gradients — screenshot shows solid color blocks and photographic backgrounds.

The system deliberately forgoes playful language, excessive punctuation, and soft, rounded shapes to maintain its sharp, premium editorial integrity.

## System Prompt (paste into AI tool)

```
Highsnobiety is a premium streetwear and culture editorial platform. Its design DNA is rooted in a high-contrast monochrome palette, using #000000 and #FFFFFF as the primary drivers, with occasional muted accents like #263D43 and #737373. The typography is a custom grotesque sans-serif (HS Sans) used in a bold, uppercase style for headlines and navigation, with a comfortable 1.6 line-height for body text. Critical design rules: avoid any whimsical or rounded elements, never use bright or neon colors, and maintain a strict, clean editorial grid. Always prioritize large, impactful imagery and clear typographic hierarchy over decorative flourishes.
```
