---
name: Everlane
description: "This site is an excellent reference for how a highly restrained, monochromatic UI can effectively showcase a premium product line through typography and photography."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#121212"
  secondary: "#4C4C4C"
  neutral: "#737373"
  bg-soft: "#F8F6F5"
  bg-quiet: "#EFEFEF"
  line: "rgba(18, 18, 18, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.6px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.8
    fontWeight: 400
    letterSpacing: "0.48px"
  small:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0.6px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

Clean, minimal aesthetic focused on high-quality photography and typography with a neutral palette.

*A curated gallery of essential garments*

## Colors

Neutral palette with photography providing the primary visual interest.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#121212`)** — uses `ink` token
- **Secondary text (`#4C4C4C`)** — uses `ink-soft` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgba(18, 18, 18, 0.1)`)** — uses `line` token

## Typography

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

- All primary text is uppercase with generous letter-spacing.

## Layout

Grid-based layout with generous white space.

*Rhythm:* Consistent use of a 4px base unit for spacing.

## Elevation & Depth

- rgba(0, 0, 0, 0.15) 0px 4px 20px 0px
- Borders: Minimal, mostly 1px solid borders for subtle separation.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal text-based buttons with uppercase text and generous letter-spacing.
- **card:** Simple rectangular cards with clean photography and minimal typography below.
- **chip:** Simple text chips with uppercase text.
- **input:** Minimal text inputs with subtle bottom borders.
- **hero:** Full-width photographic hero with overlaid text and a call to action.

## Do's and Don'ts

**Don't:**
- Don't use decorative or script fonts — screenshot shows a clean, geometric grotesque sans-serif.
- Don't use rounded corners on cards or containers — screenshot shows sharp, rectangular edges.
- Don't use bright, saturated accent colors — screenshot uses a strict neutral palette of black, white, and grays.
- Don't use heavy drop shadows or complex 3D effects — screenshot shows minimal, subtle shadows.
- Don't use center-aligned text for body copy — screenshot shows left-aligned or centered only for headlines.
- Don't use lowercase for navigation and section headers — screenshot shows all-uppercase text with wide letter-spacing.

---

## System Prompt (paste into AI agent)

```
This is a premium, minimal e-commerce site for a modern clothing brand. The design DNA is built on a strict neutral palette of white (#FFFFFF), off-white (#F8F6F5), and near-black (#121212). Typography is a clean grotesque sans-serif, used almost exclusively in uppercase with wide letter-spacing for navigation and headings. Layout is grid-based with generous white space, allowing high-quality photography to dominate. Key critical donts: do not use bright accent colors, do not use decorative fonts, and do not use rounded corners on major components. The overall feel is restrained, premium, and focused on product photography.
```