---
name: Our Legacy
description: "A great example of editorial fashion e-commerce that prioritizes photography and typography over complex UI elements."
version: alpha

colors:
  background: "#FFFDFC"
  primary: "#121110"
  line: "rgba(18,17,16,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.56px"
  body:
    fontFamily: grotesque-sans
    fontSize: 13.5px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A minimalist fashion brand presented with large-scale photography and restrained typography.

*A curated gallery or museum exhibition*

## Colors

High-contrast minimalism relying on black and off-white, allowing photography to provide the color.

- **Background (`#FFFDFC`)** — uses `bg` token
- **Primary text (`#121110`)** — uses `ink` token
- **Borders (`rgba(18,17,16,1)`)** — uses `line` token

## Typography

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

## Layout

Full-bleed hero images followed by split-screen sections with large text on one side and imagery on the other.

*Rhythm:* Generous padding (60px to 120px) defines sections, with 40px gaps between stacked elements.

## Elevation & Depth

- Borders: Minimal, defined primarily by the contrast between image and background.

## Shapes

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

## Components

- **button:** Minimal, likely text-based or simple geometric shapes.
- **card:** None visible; layout is section-based.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Full-viewport immersive photography with large, left-aligned bold typography.

## Do's and Don'ts

**Don't:**
- Don't use decorative patterns — screenshot shows large, clean photographic surfaces instead.
- Don't use rounded corners on primary containers — screenshot shows sharp, zero-radius edges.
- Don't use multi-color palettes — screenshot shows a monochromatic black/white/off-white scheme.
- Don't center-align all major headlines — screenshot shows consistent left alignment for titles.
- Don't use script or serif fonts — screenshot shows a consistent, clean grotesque sans-serif.
- Don't use small, cramped spacing — screenshot shows generous padding and whitespace.

---

## System Prompt (paste into AI agent)

```
This is a premium fashion e-commerce site for Our Legacy. The design is strictly minimalist and editorial, relying on full-bleed, high-quality photography and massive, bold typography. The color palette is restricted to off-white (#FFFDFC) and near-black (#121110), with no accent colors. The typography is a clean grotesque sans-serif (Neue Haas Unica) with very large display weights. Critical donts: Do not use decorative borders or shadows, do not use rounded corners, do not use aggressive call-to-action buttons, and do not use complex color gradients. The layout uses generous whitespace (60-120px padding) and follows a rigid grid with left-aligned text.
```