---
name: Kith
description: "This site is an excellent example of a 'chromeless' e-commerce experience where the UI completely retreats to let the product photography and editorial imagery take center stage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#333333"
  secondary: "#333333"
  neutral: "#D9D9D9"
  bg-soft: "#F2F2F2"
  line: "rgba(51, 51, 51, 1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 28px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "0.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "0.6px"
  nav:
    fontFamily: humanist-sans
    fontSize: 10px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "1.4px"

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

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

---

## Overview

A photography-driven streetwear brand that prioritizes lifestyle storytelling and seasonal lookbooks over aggressive retail grids.

*A premium streetwear catalog that feels like a cinematic lifestyle magazine.*

## Colors

Strict monochrome canvas designed to retreat entirely into the background, letting vibrant, real-world photography drive the visual interest.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#333333`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#D9D9D9`)** — uses `muted` token
- **Borders (`rgba(51, 51, 51, 1.0)`)** — uses `line` token

## Typography

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

- Typography is universally set to uppercase with generous tracking.
- Hero headlines transition to a serif typeface to add editorial weight.
- Body copy is kept extremely small (12px) to prioritize visual space for photography.

## Layout

Full-bleed hero sections that transition into tight, 4-column product grids.

*Rhythm:* A steady 4px base grid that utilizes generous whitespace to let full-bleed photography breathe.

## Elevation & Depth

- Borders: 1px solid borders are the primary UI dividers, using ink or white depending on the background overlay.

## Shapes

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

## Components

- **button:** Ghost buttons defined by sharp 1px borders and uppercase tracking, featuring zero border-radius.
- **card:** Tight, edge-to-edge image cards with zero padding or border-radius, forming a continuous visual grid.
- **chip:** N/A
- **input:** N/A
- **hero:** Massive full-viewport cinematic imagery featuring bottom-left aligned serif text and ghost action buttons.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on buttons — the screenshot shows sharp, rectangular 0px border-radius UI elements.
- Don't use large, bold sans-serif headlines — the screenshot shows refined, lightweight serif typography for display text.
- Don't use bright, saturated background colors — the screenshot shows a strict white (#FFFFFF) and off-white (#F2F2F2) UI surface.
- Don't use heavy drop shadows or 3D effects — the screenshot shows flat, 2D border-based UI components.
- Don't use mixed-case sentence typography — the screenshot shows strict ALL-CAPS formatting with wide tracking.
- Don't use small, constrained image containers — the screenshot shows full-bleed, edge-to-edge photography that dominates the viewport.

---

## System Prompt (paste into AI agent)

```
Kith is a premium streetwear brand with a photography-first, editorial aesthetic. The design system relies on a strict monochrome canvas (#FFFFFF background, #333333 ink) to let vibrant, full-bleed lifestyle photography drive the visual interest. Typography pairs a refined transitional-serif for display text with a clean humanist-sans (proxima-nova) for UI, always heavily tracked and uppercased. Critical rules: never use rounded corners (maintain sharp 0px rectangles), avoid heavy shadows or 3D effects, and always prioritize the hero image over UI chrome. Use ghost buttons with 1px solid borders for primary calls-to-action to maintain visual lightness.
```