---
name: Article
description: "This site is a prime example of modern, photography-driven e-commerce that uses a minimal UI to let the product shine."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2E2E2E"
  secondary: "#424242"
  tertiary: "#FF6458"
  neutral: "#626262"
  bg-soft: "#F2F2F2"
  line: "rgba(46, 46, 46, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A clean, photographic e-commerce platform for modern furniture and home decor.

*A curated catalog for modern living*

## Colors

A high-contrast neutral base with photographic color and a vibrant coral accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2E2E2E`)** — uses `ink` token
- **Secondary text (`#424242`)** — uses `ink-soft` token
- **Accent (`#FF6458`)** — uses `accent` token
- **Muted (`#626262`)** — uses `muted` token
- **Borders (`rgba(46, 46, 46, 1)`)** — uses `line` token

## Typography

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

- Use uppercase for buttons and navigation links
- Headlines use tight tracking and bold weight
- Body text uses regular weight with comfortable line height

## Layout

Full-width hero images followed by structured grids for products.

*Rhythm:* Consistent 4px grid with generous spacing between sections.

## Elevation & Depth

- rgba(0, 0, 0, 0.08) 0px 4px 8px 0px
- rgba(0, 0, 0, 0.04) 0px 16px 16px 0px
- rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- Borders: 1px solid #2E2E2E

## Shapes

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

## Components

- **button:** Pill-shaped with solid white background and black border, uppercase text.
- **card:** Clean image cards with minimal text below, often in a horizontal scroll or grid.
- **chip:** Simple text-based category links.
- **input:** Minimalist search bar with placeholder text and a magnifying glass icon.
- **hero:** Full-bleed lifestyle photography with centered text overlays.

## Do's and Don'ts

**Don't:**
- Don't use rounded rectangles — screenshot shows pill-shaped buttons instead.
- Don't use a bright, clashing accent palette — screenshot shows a restrained neutral base with one coral accent.
- Don't use complex shadows on cards — screenshot shows minimal, flat photography.
- Don't use serif fonts — screenshot shows exclusively sans-serif typography.
- Don't use dense text blocks — screenshot shows generous whitespace and short copy.
- Don't use dark backgrounds for the main layout — screenshot shows primarily white and off-white backgrounds.

---

## System Prompt (paste into AI agent)

```
This is a modern e-commerce design for a furniture brand, focusing on large lifestyle photography and clean typography. The layout uses a white background with dark gray text (#2E2E2E) and a vibrant coral accent (#FF6458). Typography is a geometric sans-serif category, using bold weights for headlines and regular for body text. Critical constraints: avoid using serif fonts, never use rounded rectangles for buttons, and avoid dense text blocks that would clutter the photographic-heavy layout. The design prioritizes whitespace and clear visual hierarchy to let the product images stand out.
```