# Eye on Design · Design system migration spec

> Source: https://eyeondesign.aiga.org  ·  Curated by OpenDesign  ·  en

> A strong example of editorial design principles applied to a digital medium, balancing content with distinctive branding.

## 1. Identity DNA

Eye on Design operates like a well-architected gallery: its structure is intentionally sparse to let the curated work speak. The system’s core is a white canvas, a deliberate ground that pushes content forward through high-contrast typography and a signature pink accent.

**One-liner:** An editorial design blog featuring curated articles with a distinctive pink and green color palette.
**Keywords:** design · publication · curation · visual culture
**Analogy:** A premium digital design magazine with a clean, editorial layout.

## 2. Color

The color system is reductive, built on a high-contrast palette of white, black, and a single vibrant pink. This restraint ensures the accent serves a clear functional purpose, marking interactive elements and category labels without visual noise.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#ECE2E2` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#524B48` | secondary text |
| `--muted` | `#524B48` | placeholder |
| `--accent` | `#FF8C8C` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Clean white canvas with a dominant pink accent and high-contrast black typography.

Every color choice is dictated by legibility and hierarchy, using contrast as its primary tool.

## 3. Typography

Typography follows a clear voice: headings in a bold grotesque sans-serif assert presence, while body copy in a clean humanist sans-serif ensures readability. Uppercase labels with increased letter spacing act as quiet, structural signposts within the content flow.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 44px | 1.0 | 700 | 1px | Main headings and titles |
| body | 16px | 1.5 | 400 | 0.5px | Article body text and descriptions |

**Type rules:**
- Headings use a bold grotesque sans-serif
- Body text uses a clean humanist sans-serif
- Uppercase labels with increased letter spacing

## 4. Spacing

Spacing establishes a consistent vertical rhythm, with generous whitespace between sections to prevent visual crowding and give each element room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm with generous whitespace between sections.

## 5. Surfaces

Surfaces are flat and unadorned, relying on solid borders and stark color blocks rather than shadows for definition. A solid 2px black border is reserved for featured elements, creating a sharp, graphic distinction.

- **Radius:** sm 4px · md 4px · lg 4px · pill 999px
- **Borders:** Solid 2px black for featured elements, minimal elsewhere.

## 6. Layout

The layout skeleton is a responsive framework, beginning with a 3-column grid for article cards on larger screens. This structure collapses to a single, focused column for main content, maintaining clarity across devices.

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

**Skeleton:** 3-column grid for article cards, single column for main content.

## 7. Motion & Interaction

Motion is treated as a functional polish rather than a decorative feature. All transitions are smooth and purposeful, serving to confirm interactions and guide focus with a consistent 0.3s ease-in-out cadence.

- **Durations:** micro 150ms · small 300ms · medium 300ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth transitions for interactive elements

- **Hover:** Color transitions on links and buttons.
- **Click:** Immediate response.
- **Transition:** 0.3s ease-in-out for most transitions.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is professional and authoritative, yet approachable—headlines are direct and bold, while calls to action remain understated. This tone is mirrored in the visual system, which avoids clutter and decorative flourish.

- **Tone:** Professional, authoritative, yet approachable and engaging.
- **Headline style:** Direct, informative, and bold.
- **CTA style:** Understated and functional.
- **Avoid:** Overly casual language / Decorative elements that distract from content / Cluttered layouts

### Don'ts
- ❌ don't use a cluttered layout — screenshot shows clean, generous whitespace between elements
- ❌ don't use decorative fonts — screenshot shows clean, functional grotesque and humanist sans-serifs
- ❌ don't use a dark background — screenshot shows predominantly white backgrounds
- ❌ don't use subtle gradients — screenshot shows flat, solid color blocks like the pink accent
- ❌ don't use low-contrast text — screenshot shows high-contrast black text on white backgrounds
- ❌ don't hide navigation — screenshot shows persistent, clear navigation elements

The system deliberately forgoes dark backgrounds, decorative typography, and low-contrast text, committing fully to its clean, content-first foundation.

## System Prompt (paste into AI tool)

```
This is an editorial design publication website. It uses a clean, 3-column grid layout with generous whitespace and high-contrast typography. The primary color is a vibrant pink (#FF8C8C) used for accents and category labels, paired with black (#000000) for headings and white (#FFFFFF) for backgrounds. The typography relies on grotesque and humanist sans-serif categories. Critical design constraints: avoid cluttered layouts, decorative fonts, and low-contrast text. Maintain a professional, authoritative tone while keeping the visual presentation clean and focused on the content.
```