---
name: Fillingpieces
description: "The site's strength lies in its restraint and focus on premium photography, making it a great reference for high-end consumer e-commerce design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#E5E7EB"
  bg-soft: "#EFEFEF"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

Clean, typography-driven e-commerce design with a premium, understated aesthetic.

*A premium streetwear brand that values understated elegance.*

## Colors

A high-contrast, monochromatic palette that lets the product photography take center stage.

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

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use uppercase for navigation links, buttons, and secondary labels.
- Maintain tight tracking on large display text.
- Use a clean sans-serif for all UI elements to maintain a modern feel.

## Layout

A standard 12-column grid system with a maximum width container and responsive breakpoints for tablet and desktop.

*Rhythm:* A consistent 4px base grid is used throughout the layout to ensure visual harmony.

## Elevation & Depth

- 0 4px 6px -1px rgba(0, 0, 0, 0.1)
- 0 2px 4px -2px rgba(0, 0, 0, 0.1)
- 0 20px 25px -5px rgba(0, 0, 0, 0.1)
- Borders: 1px solid rgba(0,0,0,0.1) is the standard for defining boundaries and inputs.

## Shapes

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

## Components

- **button:** Simple rectangular buttons, often with uppercase text and no border radius, or fully rounded pills for specific call-to-actions.
- **card:** Clean, borderless cards where the product image is the primary focus, separated by generous whitespace.
- **chip:** Minimal chips, sometimes used for filtering, with a clean border and simple typography.
- **input:** Minimalist input fields with a subtle bottom border or a light background, focusing on clarity.
- **hero:** Full-width, high-quality photographic hero sections with centered or left-aligned text overlays.

## Do's and Don'ts

**Don't:**
- Don't use bright, saturated colors — the palette is strictly monochromatic with black, white, and grays.
- Don't use rounded corners on buttons — the screenshot shows rectangular buttons with sharp or slightly rounded corners.
- Don't use decorative or script fonts — the typography is consistently clean and sans-serif.
- Don't use heavy drop shadows on UI elements — shadows are subtle and used for depth, not decoration.
- Don't clutter the layout — the design relies on generous whitespace to create a premium feel.
- Don't use complex gradients — the color scheme is solid and flat.

---

## System Prompt (paste into AI agent)

```
This is a premium consumer e-commerce site for a streetwear brand. The design DNA is defined by a strict monochromatic palette (black #000000, white #FFFFFF, and subtle grays like #EFEFEF and #E5E7EB) and clean, sans-serif typography (geometric and humanist categories). The layout uses a 12-column grid with generous whitespace and high-quality photography. Critical donts: never use bright or saturated colors, avoid decorative or script fonts, and do not over-complicate the clean, minimalist aesthetic with unnecessary gradients or heavy shadows. All UI elements should feel refined and understated.
```