# Kith · Design system migration spec

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

> This site is an excellent example of a 'chromeless' e-commerce experience where the UI completely retreats to let the product photography and editorial imagery take center stage.

## 1. Identity DNA

Kith operates like a premium streetwear catalog that has become a cinematic lifestyle magazine. The system is built on a strict monochrome canvas, designed to retreat entirely into the background so that vibrant, real-world photography drives all visual interest.

**One-liner:** A photography-driven streetwear brand that prioritizes lifestyle storytelling and seasonal lookbooks over aggressive retail grids.
**Keywords:** streetwear · lifestyle · premium · editorial · summer
**Analogy:** A premium streetwear catalog that feels like a cinematic lifestyle magazine.

## 2. Color

The palette is a stark, minimalist container of pure white and deep charcoal, serving as a neutral stage for colorful photography. Every hue is ceded to the imagery; the UI itself holds no chromatic ambition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#333333` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#D9D9D9` | placeholder |
| `--line` | `rgba(51, 51, 51, 1.0)` | divider |

**Color principle:** Strict monochrome canvas designed to retreat entirely into the background, letting vibrant, real-world photography drive the visual interest.

The guiding principle is absolute restraint—the interface exists only to frame the product, never to compete with it.

## 3. Typography

Typography is universally set in uppercase with generous tracking, creating a disciplined, architectural voice. A refined transitional serif is reserved for editorial hero headlines, while a clean humanist sans-serif like Proxima Nova handles all primary UI and body copy.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.1 | 300 | 0.6px | Hero campaign titles (e.g., 'Kith Summer 2026') |
| body | 12px | 1.2 | 300 | 0.6px | Primary UI text, navigation, and body copy |
| nav | 10px | 1.2 | 500 | 1.4px | Top-level navigation links |

**Type rules:**
- Typography is universally set to uppercase with generous tracking.
- Hero headlines transition to a serif typeface to add editorial weight.
- Body copy is kept extremely small (12px) to prioritize visual space for photography.

## 4. Spacing

A steady 4px base grid governs rhythm, creating generous whitespace that lets full-bleed photography breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A steady 4px base grid that utilizes generous whitespace to let full-bleed photography breathe.

## 5. Surfaces

Surfaces are flat and border-defined, with 1px solid lines as the primary dividers. The system avoids shadows and 3D effects entirely, relying on ink or white borders against background overlays for separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Borders:** 1px solid borders are the primary UI dividers, using ink or white depending on the background overlay.

## 6. Layout

The layout skeleton is built on full-viewport hero sections that command the initial view, transitioning into tight, 4-column product grids. Images run edge-to-edge, forming a continuous visual field with minimal padding.

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

**Skeleton:** Full-bleed hero sections that transition into tight, 4-column product grids.

## 7. Motion & Interaction

Motion philosophy favors clean, rapid transitions designed to feel responsive without distracting from the primary visual storytelling. Standard hover states use smooth color and transform transitions, with complex state changes governed by a slightly longer cubic-bezier curve.

- **Durations:** micro 200ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and transform transitions on standard hover states.

- **Hover:** Subtle opacity shifts or background color fills on interactive elements.
- **Click:** Immediate state change on primary call-to-action buttons.
- **Transition:** 0.2s ease-in-out for standard hover effects, 0.3s cubic-bezier for more complex state changes.
- **Keyboard:** Standard focus rings likely derived from system defaults or thin outlines.

## 8. Voice & Don'ts

The editorial voice is sophisticated, confident, and lifestyle-oriented, letting the photography do the heavy lifting. Headlines are season-focused and refined, while calls-to-action remain direct, uppercase, and utilitarian.

- **Tone:** Sophisticated, confident, and lifestyle-oriented, letting the photography do the heavy lifting.
- **Headline style:** Editorial and season-focused (e.g., 'Kith Summer 2026'), set in a refined serif typeface.
- **CTA style:** Direct, uppercase, and utilitarian, using small geometric sans-serif text.
- **Avoid:** Avoid loud promotional language or discount-driven banners. / Avoid rounded corners on primary UI components. / Avoid cluttering the visual hierarchy with secondary UI elements.

### Don'ts
- ❌ Don't use rounded corners on buttons — the screenshot shows sharp, rectangular 0px border-radius UI elements.
- ❌ Don't use large, bold sans-serif headlines — the screenshot shows refined, lightweight serif typography for display text.
- ❌ Don't use bright, saturated background colors — the screenshot shows a strict white (#FFFFFF) and off-white (#F2F2F2) UI surface.
- ❌ Don't use heavy drop shadows or 3D effects — the screenshot shows flat, 2D border-based UI components.
- ❌ Don't use mixed-case sentence typography — the screenshot shows strict ALL-CAPS formatting with wide tracking.
- ❌ Don't use small, constrained image containers — the screenshot shows full-bleed, edge-to-edge photography that dominates the viewport.

The system deliberately avoids loud promotional language, rounded corners, heavy shadows, and any UI element that might clutter the visual hierarchy or distract from the photographic narrative.

## System Prompt (paste into AI tool)

```
Kith is a premium streetwear brand with a photography-first, editorial aesthetic. The design system relies on a strict monochrome canvas (#FFFFFF background, #333333 ink) to let vibrant, full-bleed lifestyle photography drive the visual interest. Typography pairs a refined transitional-serif for display text with a clean humanist-sans (proxima-nova) for UI, always heavily tracked and uppercased. Critical rules: never use rounded corners (maintain sharp 0px rectangles), avoid heavy shadows or 3D effects, and always prioritize the hero image over UI chrome. Use ghost buttons with 1px solid borders for primary calls-to-action to maintain visual lightness.
```
