---
name: Veja
description: "Worth including as a prime example of a premium e-commerce brand using a minimalist, editorial design system to communicate sustainability and quality."
version: alpha

colors:
  background: "#000000"
  primary: "#000000"
  neutral: "#888888"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 5px
  lg: 10px
  pill: 50px

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

---

## Overview

A premium sustainable footwear brand utilizing a photography-forward, minimalist editorial design system.

*A premium fashion brand that blends minimalist e-commerce with high-end editorial storytelling.*

## Colors

Monochrome palette with high-contrast black and white, relying on photography for visual richness.

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

## Typography

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

- Use uppercase for navigation and major call-to-action text
- Maintain a strict typographic hierarchy using Helvetica and sans-serif fallbacks
- Ensure tight line-height for large display text and standard spacing for body copy

## Layout

Photography-driven layout with a standard e-commerce grid hidden behind a central modal and bottom cookie banner.

*Rhythm:* Consistent 4px grid with generous padding for interactive elements and modal layouts.

## Elevation & Depth

- 0px 0px 18px 0px rgba(0, 0, 0, 0.2)
- Borders: 1px solid borders for buttons and interactive states.

## Shapes

- `sm`: 2px
- `md`: 5px
- `lg`: 10px
- `pill`: 50px

## Components

- **button:** Rectangular buttons with minimal border-radius and uppercase text.
- **card:** Grid of product or editorial images without visible borders.
- **chip:** N/A
- **input:** N/A
- **hero:** Full-bleed cinematic photography used as the primary hero element.

## Do's and Don'ts

**Don't:**
- Don't use vibrant accent colors — screenshot shows a strict monochrome palette of black, white, and gray.
- Don't use rounded pill buttons — screenshot shows rectangular buttons with small border radii of 5px or less.
- Don't use playful, handwritten, or serif typefaces — screenshot shows strict Helvetica/grotesque-sans usage.
- Don't clutter the layout with multiple overlapping text elements — screenshot shows minimal text over large photographic areas.
- Don't hide the brand identity behind complex navigation — screenshot shows a persistent, clear logo placement.
- Don't use light, airy pastel backgrounds — screenshot shows deep blacks and stark whites for high contrast.

---

## System Prompt (paste into AI agent)

```
This is a premium sustainable footwear e-commerce site that relies heavily on cinematic, photography-forward layouts. The visual system uses a strict monochrome palette (Black #000000, White #FFFFFF, Gray #888888) to let the editorial imagery stand out. Typography is driven by Helvetica and standard grotesque-sans fonts, with uppercase treatments for navigation and large, bold display text for headlines. Layouts are generous and minimal, prioritizing breathing room around imagery. Critical donts: avoid vibrant accent colors, avoid rounded/playful UI elements, and avoid cluttering the interface with dense text blocks. The design must remain restrained, premium, and photography-driven at all times.
```