# Awwwards · Design system migration spec

> Source: https://www.awwwards.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Awwwards operates as a high-end digital design gallery and awards platform. Its system is built on the principle of curation, where every element is selected with the precision of a gallery hanging, presenting a curated directory of award-winning web design.

**One-liner:** A curated gallery and directory showcasing award-winning web design.
**Keywords:** Curation · Design Awards · Premium · Gallery
**Analogy:** A high-end digital design gallery and awards platform.

## 2. Color

The color system is built on a strict, high-contrast monochromatic palette using black, white, and a single neutral gray. This foundation ensures content is the sole focus, functioning like the pristine white walls of a gallery.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f8f8f8` | card background |
| `--ink` | `#222222` | body text |
| `--muted` | `#a7a7a7` | placeholder |
| `--line` | `rgba(222,222,222,1)` | divider |

**Color principle:** High contrast black-and-white base with neutral gray accents.

The governing principle is absolute restraint: a monochromatic base ensures content clarity and a premium, neutral backdrop for the showcased work.

## 3. Typography

Typographic voice is established through clean, grotesque sans-serifs, rejecting ornament for clarity. Ultra-light weights for massive display text create a sense of refined scale, while a stronger weight anchors smaller headings.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 300 | -2px | Primary hero headings |
| heading | 20px | 1.4 | 600 | 0px | Section headers |
| body | 14px | 2.0 | 300 | 0px | Standard body text |

## 4. Spacing

All spatial relationships are governed by an 8px base grid, creating a consistent and rhythmic foundation for whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base grid

## 5. Surfaces

Surfaces are defined by near-absence; elevation is suggested through minimal, subtle shadows or thin 1px borders rather than depth. The visual language is flat, relying on composition over layering.

- **Radius:** sm 2px · md 8px · lg 14px · pill 999px
- **Shadows:**
  - rgb(128,128,128) 0px 0px 5px 0px
- **Borders:** 1px solid

## 6. Layout

The layout skeleton is a spacious, centered single-column structure, utilizing a 12-column grid for alignment. This framework accommodates massive, full-width hero imagery and expansive typography above the fold.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column content with edge-to-edge hero images.

## 7. Motion & Interaction

Motion philosophy is one of subtle, functional feedback rather than spectacle. Transitions are smooth and consistent, using a standard 0.3s duration for color, opacity, and background changes to acknowledge interaction without interruption.

- **Durations:** micro 220ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on color, background, and opacity.
  - Hover states on interactive elements.

- **Hover:** Subtle background or color transitions.
- **Click:** Immediate visual feedback.
- **Transition:** 0.3s duration for standard state changes.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is professional, authoritative, and clean. Headlines are bold, oversized, and set in ultra-light weights, while calls to action are expressed as simple text or minimal outlined buttons, avoiding visual noise.

- **Tone:** Professional, authoritative, and clean.
- **Headline style:** Bold, oversized, and ultra-light weights.
- **CTA style:** Simple text or minimal outlined buttons.
- **Avoid:** Decorative or ornate typography / Loud color accents / Cluttered layouts

### Don'ts
- ❌ 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.

The system deliberately avoids vibrant color accents, heavy shadows, decorative typography, and cluttered layouts, enforcing a disciplined visual silence.

## System Prompt (paste into AI tool)

```
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.
```