# Telfar · Design system migration spec

> Source: https://telfar.net  ·  Curated by OpenDesign  ·  en

> An excellent example of minimalist e-commerce where the 'less is more' approach elevates the brand's iconic status and product appeal.

## 1. Identity DNA

Telfar's design system operates on a single, powerful premise: the interface is a clean, utilitarian boutique where the product is the hero. Every decision, from the stark color palette to the deliberate lack of ornamentation, is made to frame the fashion itself.

**One-liner:** Minimalist, photography-driven fashion e-commerce focused on bold, accessible luxury.
**Keywords:** Minimalist · Urban · Accessible Luxury · Iconic · NYC
**Analogy:** A clean, utilitarian boutique where the product is the hero

## 2. Color

The palette is a study in high-contrast minimalism, built on a strict foundation of pure white and black. This deliberate restraint creates a neutral stage, ensuring the varied colors and textures of the garments provide all necessary visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#1F1F1F` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast minimalism to let product photography dominate

The principle is absolute: the interface must never compete with the product for attention.

## 3. Typography

Typography is set in a single **grotesque sans-serif** typeface, establishing a voice that is clean, legible, and consistently understated. Weight uniformity across most UI elements reinforces a calm, ordered hierarchy where content—not decoration—dictates emphasis.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -0.5px | Brand logo and primary headings |
| body | 16px | 1.2 | 400 | 0px | Product names, prices, and body copy |

**Type rules:**
- Use uniform weight for most UI elements
- Ensure tight line-height for compact text blocks
- Apply uppercase sparingly for labels and badges

## 4. Spacing

A consistent 4px base grid underpins the layout, creating a predictable and orderly spatial rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with standard e-commerce spacing

## 5. Surfaces

Depth is communicated with surgical precision. Surfaces are primarily flat white, separated only by the thinnest 1px solid black borders, while shadow is reserved for a single, barely perceptible state to suggest elevation without weight.

- **Radius:** sm 2px · md 6px · lg 12px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.01) 0px 0px 10px 0px
- **Borders:** Thin 1px solid black for cards and interactive elements

## 6. Layout

The layout skeleton favors an asymmetric masonry or two-column grid, organized to showcase product imagery with spacious clarity. This structure provides a stable, functional framework that supports both browsing and detailed examination.

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

**Skeleton:** Asymmetric masonry or 2-column grid for product showcases

## 7. Motion & Interaction

Motion is treated as functional feedback, not decoration. Animations like smooth scale transitions and fade-ins are minimal and purposeful, designed to confirm interaction and guide focus while maintaining the interface's serene, understated character.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth scale transitions for hover states
  - Fade-in for modal and overlay elements

- **Hover:** Subtle opacity change or background-color transition
- **Click:** Immediate visual feedback with minimal animation
- **Transition:** All properties transition smoothly over 0.15s to 0.6s
- **Keyboard:** Standard focus states using browser defaults or thin outlines

## 8. Voice & Don'ts

The editorial voice is confident, direct, and understated, matching the visual tone. Headlines are clear and informative, while calls to action are simple and action-oriented, avoiding any hint of promotional excess.

- **Tone:** Confident, direct, and understated
- **Headline style:** Clear and informative, often stating color or product type
- **CTA style:** Simple, action-oriented text like 'View All' or 'Manage preferences'
- **Avoid:** Excessive promotional language / Decorative ornaments / Loud color combinations

### Don'ts
- ❌ Don't use decorative gradients — screenshot shows solid color backgrounds
- ❌ Don't use drop shadows heavily — screenshot shows only one very subtle box-shadow
- ❌ Don't use heavy typography weights — screenshot shows a preference for weight 400
- ❌ Don't use vibrant accent colors in UI — screenshot shows no dominant accent color
- ❌ Don't use rounded corners everywhere — screenshot shows mostly sharp or slightly rounded corners
- ❌ Don't clutter the UI with icons — screenshot shows a minimalist icon set in the header

The system deliberately avoids decorative gradients, heavy shadows, vibrant accent colors, and cluttered iconography, understanding that subtraction is a core part of the design.

## System Prompt (paste into AI tool)

```
Telfar is a minimalist fashion e-commerce site with a clean, utilitarian aesthetic. It uses a high-contrast palette of pure white (#FFFFFF) and black (#000000), allowing bold product photography to dominate the visual space. The typography relies on a grotesque sans-serif (Neue Haas Grotesk Text Pro) with a focus on legibility and clean lines. Critical design constraints include avoiding heavy shadows, excessive decorative elements, or vibrant accent colors that would compete with the products. The layout is spacious and grid-based, emphasizing the iconic 'Shopping Bag' product line through large, clear imagery and minimal interface chrome.
```
