---
name: Telfar
description: "An excellent example of minimalist e-commerce where the 'less is more' approach elevates the brand's iconic status and product appeal."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#1F1F1F"
  bg-quiet: "#F2F2F2"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 6px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Minimalist, photography-driven fashion e-commerce focused on bold, accessible luxury.

*A clean, utilitarian boutique where the product is the hero*

## Colors

High-contrast minimalism to let product photography dominate

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#1F1F1F`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Asymmetric masonry or 2-column grid for product showcases

*Rhythm:* Consistent 4px base grid with standard e-commerce spacing

## Elevation & Depth

- rgba(0, 0, 0, 0.01) 0px 0px 10px 0px
- Borders: Thin 1px solid black for cards and interactive elements

## Shapes

- `sm`: 2px
- `md`: 6px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimalist pill-shaped or rectangular with thin borders
- **card:** Clean white cards with subtle borders for product grouping
- **chip:** Simple text-based navigation tabs
- **input:** Standard text inputs with clear labels
- **hero:** Large, full-width photographic banners with minimal overlay text

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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