---
name: Bitofdenim
description: "A strong example of restraint and editorial design in an e-commerce context."
version: alpha

colors:
  background: "#F2F2F1"
  primary: "#1A0A0E"
  neutral: "#222222"
  line: "rgba(26,10,14,1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 280px
    lineHeight: 0.85
    fontWeight: 700
    letterSpacing: "-2px"
  heading:
    fontFamily: monospace
    fontSize: 28px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "0px"
  body:
    fontFamily: monospace
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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, editorial-style e-commerce site for upcycled denim products.

*A high-end fashion editorial magazine*

## Colors

High-contrast, achromatic palette focused on typography and imagery

- **Background (`#F2F2F1`)** — uses `bg` token
- **Primary text (`#1A0A0E`)** — uses `ink` token
- **Muted (`#222222`)** — uses `muted` token
- **Borders (`rgba(26,10,14,1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** monospace
- **Mono:** monospace

- Use Space Mono for all UI and body text
- Use Meno Display Condensed for the hero brand name
- Keep navigation text clean and uppercase or sentence case

## Layout

Full-width hero with asymmetric layout and generous negative space

*Rhythm:* Generous whitespace and padding

## Elevation & Depth

- Borders: 1px solid #1A0A0E

## Shapes

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

## Components

- **button:** Minimal, outlined rectangle with uppercase text
- **card:** No visible cards, product images are presented directly
- **input:** Simple outlined text input
- **hero:** Large typography paired with a studio photograph

## Do's and Don'ts

**Don't:**
- don't use gradients — screenshot shows flat, solid backgrounds instead
- don't use rounded corners on containers — screenshot shows sharp, rectangular edges
- don't use drop shadows — screenshot shows elements without elevation effects
- don't use bright accent colors — screenshot shows a strictly monochromatic palette
- don't use sans-serif for navigation — screenshot shows a monospaced font
- don't clutter the layout — screenshot shows generous negative space and minimal elements

---

## System Prompt (paste into AI agent)

```
This is a minimalist, editorial-style e-commerce site for upcycled denim products. The design relies on a high-contrast, achromatic palette with a light gray (#F2F2F1) background and near-black (#1A0A0E) typography. The hero features a massive didone-serif display font, while all other UI elements use a monospaced font. Key colors are #F2F2F1 and #1A0A0E. Critical donts: avoid using gradients, avoid using rounded corners on containers, and avoid cluttering the layout with unnecessary elements. The layout is spacious with generous negative space, emphasizing typography and photography.
```