---
name: Awwwards
description: "This site is a perfect reference for 'quiet luxury' web design, demonstrating how massive typography and strict restraint can create a premium, gallery-like atmosphere."
version: alpha

colors:
  background: "#ffffff"
  primary: "#222222"
  neutral: "#a7a7a7"
  bg-soft: "#f8f8f8"
  line: "rgba(222,222,222,1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 600
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 2.0
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 8px
  lg: 14px
  pill: 999px

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

---

## Overview

A curated gallery and directory showcasing award-winning web design.

*A high-end digital design gallery and awards platform.*

## Colors

High contrast black-and-white base with neutral gray accents.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#222222`)** — uses `ink` token
- **Muted (`#a7a7a7`)** — uses `muted` token
- **Borders (`rgba(222,222,222,1)`)** — uses `line` token

## Typography

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

## Layout

Centered single-column content with edge-to-edge hero images.

*Rhythm:* 8px base grid

## Elevation & Depth

- rgb(128,128,128) 0px 0px 5px 0px
- Borders: 1px solid

## Shapes

- `sm`: 2px
- `md`: 8px
- `lg`: 14px
- `pill`: 999px

## Components

- **button:** Minimalist pill-shaped buttons with 1px borders and transparent backgrounds.
- **card:** Clean image-forward cards with minimal or no visible borders.
- **chip:** Small rounded tags with thin borders.
- **input:** Search bar with a light gray background and rounded corners.
- **hero:** Massive full-width typography dominating the viewport above full-width photography.

## Do's and Don'ts

**Don't:**
- Use vibrant, saturated colors — screenshot shows a strictly monochromatic palette.
- Apply heavy drop shadows — screenshot shows almost zero elevation or shadows.
- Use decorative or serif fonts — screenshot shows exclusively clean grotesque sans-serifs.
- Create rounded, bubbly interfaces — screenshot shows sharp to moderately rounded corners.
- Fill layouts with multiple competing colors — screenshot relies on black, white, and gray.
- Use complex, busy backgrounds — screenshot relies on solid flat colors or single hero photos.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, gallery-style design system for a curated design awards platform. It uses a strict monochrome palette with an #ffffff background, #222222 ink, and #a7a7a7 muted text. The typography relies heavily on a grotesque-sans font in ultra-light weights (300) for massive display text, and 600 weight for smaller headings. The layout is spacious, utilizing a 12-column grid and generous whitespace. Critical donts: Do not use saturated accent colors; do not use heavy shadows; do not use serif fonts; do not clutter the layout with visual noise. The overall tone is refined, professional, and highly curated.
```