---
name: The FWA
description: "This site is worth including as a prime example of restrained, content-first gallery design that uses texture and grid to create a professional, curated atmosphere."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#404040"
  secondary: "#9A9A9A"
  tertiary: "#FFCC00"
  neutral: "#8E8E8E"
  bg-soft: "#ECECEC"
  line: "rgba(236, 236, 236, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 2.0
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "0"

rounded:
  sm: 2px
  md: 4px
  lg: 5px
  pill: 999px

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

---

## Overview

A clean, content-first exhibition space for curated digital excellence.

*A refined digital museum or curated gallery for award-winning web design.*

## Colors

A monochromatic canvas that uses subtle texture and a single vibrant yellow accent to frame curated content.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#404040`)** — uses `ink` token
- **Secondary text (`#9A9A9A`)** — uses `ink-soft` token
- **Accent (`#FFCC00`)** — uses `accent` token
- **Muted (`#8E8E8E`)** — uses `muted` token
- **Borders (`rgba(236, 236, 236, 1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Uppercase text-transform for categorical labels and dates
- Light weights (300) for secondary information
- Strict left-alignment for all content blocks

## Layout

Structured asymmetric grid combining large media blocks with narrow metadata columns.

*Rhythm:* Consistent 4px grid used for all internal padding and margins.

## Elevation & Depth

- 0 1px 3px rgba(0,0,0,0.1)
- Borders: Thin 1px borders used to separate content blocks and define grid structures.

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 5px
- `pill`: 999px

## Components

- **button:** Text-based buttons and outlined pill shapes with clear padding.
- **card:** Large media cards featuring subtle pixel-pattern backgrounds and structured metadata labels.
- **chip:** Small uppercase text labels for categories.
- **input:** Standard dropdown selectors with thin borders.
- **hero:** Full-width media containers with overlaid text and interactive play controls.

## Do's and Don'ts

**Don't:**
- Don't use complex gradients — the screenshot shows flat white backgrounds with subtle pixel textures.
- Don't use bold font weights for everything — the ground-truth shows predominantly 400 and 300 weights.
- Don't use vibrant colors everywhere — the palette is strictly monochromatic except for a single yellow accent.
- Don't use rounded corners aggressively — the ground-truth shows very small 2px to 5px radii.
- Don't use tight spacing — the ground-truth shows generous 20px and 44px padding in key areas.
- Don't use centered text alignment — the screenshot shows a strict left-aligned typographic hierarchy.

---

## System Prompt (paste into AI agent)

```
The FWA is a curated digital award gallery and portfolio showcase. The design DNA is built on a minimalist monochromatic palette using white (#FFFFFF) and charcoal (#404040), accented only by a vibrant yellow (#FFCC00). Typography relies on a humanist-sans for body text and a condensed grotesque-sans for display elements, prioritizing legibility and hierarchy through weight and size rather than color. The layout is a structured grid that uses thin lines and subtle pixel textures to define surfaces. Key critical don'ts: never use multiple accent colors, never center-align large blocks of text, and never use heavy font weights for standard UI elements. The overall feel is calm, refined, and content-first, allowing the featured projects to stand out against a restrained, gallery-like environment.
```