---
name: Nomad
description: "Worth including as a strong example of a high-end, photographic e-commerce design that uses restraint and monochrome typography to elevate physical products."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#555555"
  neutral: "#4B4B4B"
  bg-soft: "#F3F3F3"
  muted-soft: "#7F7F7F"
  line: "rgba(0, 0, 0, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.32px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.25
    fontWeight: 700
    letterSpacing: "-0.32px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  overline:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "1px"

rounded:
  sm: 3px
  md: 8px
  lg: 20px
  pill: 999px

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

---

## Overview

A premium e-commerce experience for high-end tech accessories, grounded in utility and refined aesthetics.

*Apple-style product retail with a rugged, travel-focused twist.*

## Colors

High-contrast monochrome base with photographic heroes and no primary brand accent color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#555555`)** — uses `ink-soft` token
- **Muted (`#4B4B4B`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 1.0)`)** — uses `line` token

## Typography

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

## Layout

Full-width image hero followed by a centered quote section and a grid of product cards.

*Rhythm:* Linear spacing scale based on 4px increments, used generously for large layouts.

## Elevation & Depth

- 0px 6px 6px -3px rgba(0, 0, 0, 0.06)
- 0px 0px 0px 1px rgba(0, 0, 0, 0.06)
- 0px 0px 0px 1px inset rgba(0, 0, 0, 0.1)
- Borders: 1px solid rgba(0, 0, 0, 1.0)

## Shapes

- `sm`: 3px
- `md`: 8px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Rounded pill-shaped or soft-curve buttons with high-contrast solid fills or simple text links.
- **card:** Rounded-corner product cards with subtle inset or drop shadows, often featuring grid or image backgrounds.
- **chip:** None visible in the primary viewport.
- **input:** Standard form fields with soft rounded corners and inset shadows.
- **hero:** Full-bleed photographic image with a dark gradient overlay and massive, tightly tracked sans-serif typography.

## Do's and Don'ts

**Don't:**
- Don't use a vibrant primary accent color — screenshot shows a strictly monochrome palette without a dominant hue.
- Don't use decorative serif fonts for main headlines — screenshot shows tight, bold grotesque-sans for display text.
- Don't apply soft, circular border-radii to main UI elements — screenshot shows a mix of sharp corners and pill-shaped buttons.
- Don't use heavy, colorful drop shadows — screenshot shows very subtle, almost invisible drop shadows or inset outlines.
- Don't center all body copy — screenshot shows center-aligned hero text but standard left-aligned body copy elsewhere.
- Don't use thin, light weights for primary text — screenshot shows mostly regular (400) and bold (700) weights.

---

## System Prompt (paste into AI agent)

```
This is a premium e-commerce design system for high-end tech accessories. The visual language is grounded in a strict monochrome palette, using black, white, and mid-tone grays to let product photography dominate. Typography relies heavily on tightly tracked, bold grotesque-sans for impactful hero headlines. The layout is clean, spacious, and modern, featuring full-bleed imagery and subtle, refined UI components. Critical constraints include avoiding any dominant, vibrant accent colors, avoiding decorative serifs for headlines, and maintaining generous whitespace. The overall tone is confident and utility-focused, prioritizing product photography and clear, direct calls to action.
```