---
name: Monos
description: "A strong example of premium e-commerce that uses editorial photography and generous whitespace to create a high-end, sophisticated brand experience."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A1A1A"
  secondary: "#4D4D4D"
  neutral: "#808080"
  muted-soft: "#B3B3B3"
  line: "rgba(179, 179, 179, 1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 11.2px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "1.2px"

rounded:
  sm: 2px
  md: 4px
  lg: 8px
  pill: 999px

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

---

## Overview

Premium luggage brand with a minimalist yet colorful, editorial aesthetic.

*A high-end travel brand that blends editorial fashion photography with clean, modern e-commerce design.*

## Colors

Clean white canvas with dark charcoal text and muted grays, relying on vibrant product photography for color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`#4D4D4D`)** — uses `ink-soft` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(179, 179, 179, 1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use transitional-serif for large display headings to create an editorial feel
- Use humanist-sans for navigation and body text for clean readability
- Apply wide letter-spacing to small uppercase labels and navigation items
- Use all-caps for navigation and call-to-action text
- Maintain a generous line-height for body copy to ensure readability

## Layout

Full-bleed hero images with centered, layered text and a single central call-to-action.

*Rhythm:* Generous vertical spacing between sections with tight, controlled spacing within components.

## Elevation & Depth

- rgba(100, 100, 100, 0.2) -7.5px 7.5px 15px 0px
- Borders: Minimal use of 1px borders in muted gray tones, primarily for separation and input fields.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 8px
- `pill`: 999px

## Components

- **button:** Outlined with a white border and uppercase text, maintaining a minimal and clean appearance.
- **card:** Clean, edge-to-edge photography with minimal overlay text, emphasizing the product lifestyle.
- **input:** Simple outlined fields with subtle gray borders.
- **hero:** Split-screen or full-bleed photographic hero with large, centered serif typography.

## Do's and Don'ts

**Don't:**
- Don't use a single high-chroma accent color — the site uses a neutral palette with product photography providing color.
- Don't use a dark mode or dark background — the primary background is always clean white.
- Don't use a sans-serif for large display headings — the site consistently uses a transitional-serif for its main hero text.
- Don't use small, tight letter-spacing for navigation — all nav items use wide tracking.
- Don't use drop shadows or heavy gradients — the design relies on clean photography and solid colors.
- Don't use a dense or cluttered grid — the layout uses generous whitespace and large, full-bleed imagery.

---

## System Prompt (paste into AI agent)

```
A premium luggage e-commerce brand featuring a clean, minimalist aesthetic with an editorial fashion photography style. The core palette is white (#FFFFFF) with dark charcoal (#1A1A1A) text and muted grays (#808080, #B3B3B3), letting vibrant product photography provide the color. Typography pairs a transitional-serif for large display headings with a humanist-sans for body and navigation. Critical donts: 1) Avoid high-chroma accent colors; the site relies on neutral tones and rich photography. 2) Do not use a dark background; it is consistently a clean white canvas. 3) Avoid using sans-serif for large display headings; the site uses a serif font for hero text to create an editorial feel.
```