# Khaite · Design system migration spec

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

> A masterclass in restrained luxury e-commerce design where photography does all the heavy lifting while the interface disappears.

## 1. Identity DNA

Khaite's design system operates with the discipline of a high-end fashion boutique, where the architecture recedes to let the product—photography and garment—command all attention. Every interface decision serves this single purpose: to create a clean, editorial frame that never competes with the merchandise.

**One-liner:** A luxury fashion e-commerce experience blending editorial photography with refined typography and ample whitespace.
**Keywords:** Luxury · Fashion · Editorial · Minimal · Elegant
**Analogy:** A high-end fashion boutique with editorial photography and refined typography.

## 2. Color

The palette is a strict, deliberate void of color. Pure black and pure white form a neutral ground where the only visual interest comes from the photography itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F8F8F8` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#222222` | secondary text |
| `--muted` | `#000000` | placeholder |
| `--muted-soft` | `rgba(0,0,0,0.5)` | weak hint |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** Strict achromatic palette dominated by pure black and white, allowing high-quality photography to carry all visual interest and brand personality.

This approach trusts the imagery completely, making the achromatic system a deliberate choice for visual restraint.

## 3. Typography

Typography follows a clear hierarchy of voice. A high-contrast didone serif, ITC Galliard, establishes the brand's editorial authority at scale, while a light grotesque sans-serif, Fakt Pro, handles the interface with understated clarity.

- **Display:** didone-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | 0px | Brand logo and primary editorial headlines like 'Pre-Fall 2026' |
| heading | 12px | 1.6 | 400 | 0.5px | Navigation menu items and secondary labels |
| body | 12px | 1.6 | 400 | 0.5px | Product names, utility links, and general interface text |

**Type rules:**
- The brand logo 'KHAITE' uses a high-contrast didone serif (ITC Galliard) at large sizes.
- All navigation and UI text uses a clean, light grotesque sans-serif (Fakt Pro) at 12px.
- Text is frequently uppercase with generous tracking for a refined, editorial feel.
- Weight stays strictly at 350-400, avoiding bold except for very rare emphasis.

## 4. Spacing

Spacing is governed by a strict 4px base grid, but its application prioritizes generous whitespace over mechanical precision.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px base grid with generous whitespace and breathing room, especially around photographic elements.

## 5. Surfaces

Surfaces are defined by their absence. There are no shadows, glows, or decorative treatments; the interface relies on clean edges and ample negative space to create order.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal, used only for subtle underlines on interactive text elements like 'Shop Now'.

## 6. Layout

The layout skeleton begins with a full-bleed hero, an immersive photographic statement that fills the viewport. This transitions to a clean, centered grid where products are presented with significant breathing room between elements.

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

**Skeleton:** Full-bleed hero imagery followed by a clean, centered grid layout with ample negative space between elements.

## 7. Motion & Interaction

Motion philosophy is one of subtle confirmation, not decoration. All transitions are limited to smooth, 300ms changes in opacity and background-color, providing feedback without drawing attention to the mechanism itself.

- **Durations:** micro 300ms · small 300ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity transitions for interactive element states
  - Subtle background-color changes on hover

- **Hover:** Subtle opacity reduction or underline appearance on text links
- **Click:** Standard pointer interaction with no visual feedback beyond the hover state
- **Transition:** Smooth 0.3s transitions on opacity and background-color changes
- **Keyboard:** Standard focus management implied by link-based navigation

## 8. Voice & Don'ts

The editorial voice is sophisticated and confident, communicated through elegant serif headlines and restrained, text-based calls-to-action. The system deliberately avoids casual language, excessive punctuation, and any visual noise that would break the refined tone.

- **Tone:** Sophisticated, understated, and confident
- **Headline style:** Elegant serif headlines, occasionally italicized, conveying editorial authority.
- **CTA style:** Subtle text-based calls-to-action with thin underlines rather than bold buttons.
- **Avoid:** Excessive punctuation / Casual language / Visual clutter / Promotional badges

### Don'ts
- ❌ Don't use bold, heavy typography — screenshot shows light font weights (350-400) throughout
- ❌ Don't add decorative shadows or glows — screenshot shows completely flat, clean surfaces
- ❌ Don't use colorful buttons or badges — screenshot shows only subtle text links with underlines
- ❌ Don't clutter the layout with multiple competing elements — screenshot shows generous whitespace
- ❌ Don't use rounded corners on containers — screenshot shows sharp, clean edges
- ❌ Don't use busy patterns or gradients — screenshot shows solid white and near-white backgrounds

The design deliberately avoids bold weights, decorative shadows, colorful buttons, and cluttered layouts, choosing instead the powerful statement of a restrained, photography-forward interface.

## System Prompt (paste into AI tool)

```
This is a luxury fashion e-commerce site for Khaite. Positioning is premium, editorial, and understated. Key colors are pure black (#000000) and white (#FFFFFF) with no accent colors. Typography uses a didone serif (ITC Galliard) for the brand logo and headlines, and a light grotesque sans-serif (Fakt Pro) for all UI text at 12px. Critical donts: never use bold weights, never add decorative shadows, never use colorful buttons, never clutter the layout, never round container corners, and never use busy backgrounds. The design prioritizes high-quality photography with minimal UI interference, creating an elevated shopping experience.
```
