# The FWA · Design system migration spec

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

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

## 1. Identity DNA

The FWA operates as a refined digital museum for award-winning web design, where curation is the primary architecture. Its identity is built on a minimalist monochromatic palette that acts as a gallery wall, allowing the exhibited work to command full attention.

**One-liner:** A clean, content-first exhibition space for curated digital excellence.
**Keywords:** curation · digital-awards · portfolio-gallery · design-showcase
**Analogy:** A refined digital museum or curated gallery for award-winning web design.

## 2. Color

The color system is a disciplined monochrome canvas of whites and grays, anchored solely by a single high-chroma yellow accent. This restraint creates a neutral, focused backdrop where the vibrant accent functions as a deliberate highlight for interactive elements and key callouts.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#ECECEC` | card background |
| `--ink` | `#404040` | body text |
| `--ink-soft` | `#9A9A9A` | secondary text |
| `--muted` | `#8E8E8E` | placeholder |
| `--accent` | `#FFCC00` | single accent |
| `--line` | `rgba(236, 236, 236, 1.0)` | divider |

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

The governing principle is one of absolute chromatic restraint, where a single accent color must justify its presence against the monochromatic field.

## 3. Typography

Typographic hierarchy is established through a clear category distinction: a humanist-sans for legible body text and a condensed groteske for display elements. The voice is professional and authoritative, prioritizing clarity through weight and scale over decorative flourish.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Large date numerals and primary project titles |
| body | 16px | 2.0 | 400 | 0 | Standard paragraph text and UI descriptions |
| caption | 14px | 1.2 | 300 | 0 | Small uppercase labels, metadata, and secondary information |

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

## 4. Spacing

All spacing adheres to a consistent 4px grid, creating a measurable, predictable rhythm for internal padding and margins that underpins the entire layout's structural integrity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 px
- **Rhythm:** Consistent 4px grid used for all internal padding and margins.

## 5. Surfaces

Surfaces are defined by thin, 1px borders and minimal shadows, establishing depth through precise linear separation rather than heavy elevation. This approach maintains the clean, gallery-like atmosphere while clearly delineating content blocks.

- **Radius:** sm 2px · md 4px · lg 5px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0,0,0,0.1)
- **Borders:** Thin 1px borders used to separate content blocks and define grid structures.

## 6. Layout

The layout skeleton is a structured, asymmetric grid that pairs large media blocks with narrow columns for metadata. This framework uses thin lines and subtle pixel textures to organize content, creating a clear visual path for curated projects.

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

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

## 7. Motion & Interaction

Motion philosophy is one of restraint, using only opacity fades and slide-in animations to manage state changes and content reveals. The transitions are smooth and purposeful, designed to guide the user without drawing attention to the animation itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Opacity fades for interactive state changes
  - Slide-in animations for content reveals

- **Hover:** Cursor changes to pointer with subtle opacity or color shifts.
- **Click:** Direct navigation or media play triggers.
- **Transition:** Smooth 0.4s ease-out transitions for opacity and visibility changes.
- **Keyboard:** Standard tab navigation supported for interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and highly curated, avoiding all marketing jargon and overly casual language. Headlines are clean and factual, pairing large numerals with straightforward titles to present content without embellishment.

- **Tone:** Professional, authoritative, and highly curated.
- **Headline style:** Clean, large numerals paired with straightforward project titles.
- **CTA style:** Functional and direct (e.g., 'See Case', 'Launch Project').
- **Avoid:** Excessive marketing jargon / Decorative typography / Overly casual language

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

The system deliberately avoids decorative typography, centered text alignment, and the use of multiple vibrant accent colors.

## System Prompt (paste into AI tool)

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