---
name: Consumedinkey
description: "A striking example of minimalist editorial design that uses extreme restraint and atmospheric photography to create a focused, immersive user experience for a musical project."
version: alpha

colors:
  background: "#000000"
  primary: "#ffffff"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0.64px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.12
    fontWeight: 400
    letterSpacing: "0.64px"

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

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

---

## Overview

A minimalist, atmospheric website for a musical collaboration, using stark contrasts and photographic elements.

*A stark, atmospheric gallery exhibition for a musical project.*

## Colors

High-contrast monochrome palette, using pure black and white to create a stark, focused atmosphere.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- Use HelveticaLT or similar humanist-sans.
- Keep font weight consistently at 400.
- Apply a subtle, positive letter-spacing to all text.

## Layout

A full-bleed hero section, followed by a dark content section with a central visual and flanking text columns.

*Rhythm:* Generous padding and consistent gaps create an open, breathable layout.

## Elevation & Depth

- Borders: Sharp, hard edges. No border-radius. Content floats in space.

## Shapes

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

## Components

- **button:** Text-based actions with simple dividers (e.g., 'Listen | Buy').
- **card:** Not used. Visuals are presented as immersive, edge-to-edge imagery.
- **chip:** Not present.
- **input:** Not present.
- **hero:** Full-screen, atmospheric black-and-white photographic hero with overlaid text.

## Do's and Don'ts

**Don't:**
- Don't use border-radius on any element — screenshot shows perfectly sharp corners everywhere.
- Don't introduce a vibrant accent color — screenshot is strictly monochrome black and white.
- Don't use decorative or serif fonts — screenshot uses a clean, geometric sans-serif (HelveticaLT).
- Don't add drop shadows or box shadows — elements appear flat against the background.
- Don't use complex background patterns or gradients — backgrounds are solid colors or full-bleed images.
- Don't use multiple font weights — screenshot shows a consistent, uniform weight (400) throughout.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, atmospheric website for the musical collaboration 'Consumed In Key'. It uses a stark, high-contrast monochrome palette of pure black (#000000) and white (#ffffff), with a single atmospheric black-and-white photographic element. The typography is a clean, geometric humanist-sans-serif (HelveticaLT) set at a consistent 400 weight with subtle letter-spacing. The layout is immersive and open, using generous padding and full-bleed imagery. Critical design constraints: 1) Maintain absolute color restraint with no accent colors. 2) Use sharp, hard edges with zero border-radius on all elements. 3) Keep typography minimal, uniform in weight, and subtly spaced. Avoid any decorative elements, complex components, or high-energy interactions. The goal is to create a calm, focused, and enigmatic visual experience that complements the musical content.
```