---
name: Platformart
description: "A sophisticated example of a premium art gallery site, using a restrained visual language to let the curated photography take center stage."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#AAAAAA"
  neutral: "#AAAAAA"
  bg-soft: "#F5F5F5"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.24px"

rounded:
  sm: 0px
  md: 4px
  lg: 0px
  pill: 999px

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

---

## Overview

A premium art platform showcasing curated objects and artists with a clean, editorial design.

*A minimalist, high-end art gallery website*

## Colors

High-contrast, monochromatic palette that lets photography dominate.

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

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use MediumLLWeb (grotesque-sans) as the primary typeface
- Apply uppercase transformation to navigation and labels
- Maintain a consistent, wide letter-spacing for body text

## Layout

Full-width imagery with centered content blocks and a top-aligned navigation bar.

*Rhythm:* Consistent 4px base unit for all spacing and sizing

## Elevation & Depth

- 0px 2px 80px 1px rgba(0,0,0,0.2)
- Borders: 1px solid #000000

## Shapes

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

## Components

- **button:** Minimalist outline and solid buttons with sharp corners.
- **card:** No border-radius, image-driven cards with a focus on photography.
- **chip:** Simple, uppercase text labels with minimal styling.
- **input:** Clean input fields with 1px solid borders.
- **hero:** Full-screen photographic background with centered text overlay.

## Do's and Don'ts

**Don't:**
- Don't use rounded corners on containers or buttons — screenshot shows sharp, square edges.
- Don't use multiple brand colors — screenshot shows a strictly monochromatic black/white palette.
- Don't use serif fonts — screenshot shows a consistent use of MediumLLWeb (grotesque-sans).
- Don't use drop shadows on all elements — screenshot shows a single, very large shadow on the cookie modal.
- Don't use small, cramped spacing — screenshot shows generous padding and clear visual hierarchy.
- Don't use lowercase for navigation — screenshot shows 'PLATFORM:', 'Shop', 'Objects', 'Artists' in a specific mixed-case/uppercase style.

---

## System Prompt (paste into AI agent)

```
This is a premium art platform (platformart.com) with a minimalist, editorial design. The site uses a strict monochromatic palette of black (#000000) and white (#FFFFFF), with a secondary gray (#AAAAAA) for muted text. The primary font is a grotesque sans-serif (MediumLLWeb). Navigation is top-aligned with uppercase labels. The layout is centered on large-scale photography with generous spacing (4px base unit). Key features include full-screen hero images, a sharp-cornered cookie settings modal with a distinct drop shadow, and minimal UI components. Avoid rounded corners, multiple colors, or serif typography. The voice is sophisticated and understated, with direct calls to action.
```