# It's Nice That · Design system migration spec

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

> This site is a quintessential example of modern editorial design, successfully blending traditional serif typography with a vibrant, digital-first content strategy.

## 1. Identity DNA

The design system for It's Nice That functions as a vibrant creative director's mood board, translated into a structured digital publication. Its identity is built on the tension between authoritative editorial tradition and the spontaneous, community-driven energy of a daily inspiration feed.

**One-liner:** A leading online publication and community championing global creativity through visual journalism and curated projects.
**Keywords:** creative inspiration · design journalism · community · curation
**Analogy:** A vibrant creative director's mood board brought to life as a daily digital publication.

## 2. Color

The color system is anchored by a high-contrast black-and-white base, establishing a clear canvas for content. A vibrant purple accent and sections of warm peach are deployed with intention, creating zones of curation and call-to-action without overwhelming the visual field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F4F4F4` | card background |
| `--bg-quiet` | `#FFEDD1` | quiet area |
| `--ink` | `#2B2B2B` | body text |
| `--ink-soft` | `#676767` | secondary text |
| `--muted` | `#676767` | placeholder |
| `--accent` | `#6219FF` | single accent |
| `--line` | `rgba(43,43,43,1.0)` | divider |

**Color principle:** High-contrast black-and-white base with a vibrant purple accent and warm pastel sections for content curation.

The core principle is restraint: high-chroma color is a strategic accent, never a foundational background.

## 3. Typography

The typographic voice pairs a transitional-serif for authoritative headlines with a humanist-sans for readable body copy. This combination grounds the publication in editorial credibility while ensuring long-form content remains accessible.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -1px | Main branding and primary headlines |
| h2 | 32px | 1.2 | 400 | 0px | Section titles and article headers |
| body | 17px | 1.47 | 400 | 0.09px | Primary body text and article content |
| caption | 11px | 1.45 | 400 | 1px | Metadata, tags, and secondary labels |

**Type rules:**
- Use transitional-serif for large, authoritative headlines and display text.
- Use humanist-sans for all body copy and functional UI elements to maintain high readability.
- Maintain tight tracking (-1px) on large display type for a modern editorial feel.
- Use generous line-height (~1.5) for body text to ensure comfortable reading.

## 4. Spacing

An 8px baseline grid establishes a consistent vertical rhythm, governing everything from line-height to the spacing between modular content components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px baseline grid used for consistent vertical rhythm and component spacing.

## 5. Surfaces

Surfaces are defined by minimal solid borders and a triad of subtle, soft box-shadows. This approach creates gentle depth and separation without resorting to complex, multi-layered effects that would clutter the clean interface.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 24px 38px 0px rgba(0, 0, 0, 0.08)
  - 0px 9px 46px 0px rgba(0, 0, 0, 0.08)
  - 0px 11px 15px 0px rgba(0, 0, 0, 0.08)
- **Borders:** Minimal solid 1px borders in dark ink color (#2B2B2B) for structural separation.

## 6. Layout

The layout skeleton follows a classic editorial magazine structure. It features a clean top navigation, a horizontal scrolling feed for featured content, and varied grid-based sections that reject uniform card layouts in favor of mixed aspect ratios.

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

**Skeleton:** Classic editorial magazine layout with a clean top navigation, horizontal feed, and varied grid-based content sections.

## 7. Motion & Interaction

Motion is philosophy of immediacy and subtle confirmation. All transitions are confined to a swift 0.1s ease-in, prioritizing fast feedback on interactive states over elaborate, time-consuming animations.

- **Durations:** micro 100ms · small 300ms · medium 2000ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle opacity transitions for background elements and UI states.
  - Fast background-color and color changes on interactive elements.

- **Hover:** Subtle background-color and color transitions over 0.1s ease-in for links and buttons.
- **Click:** Immediate visual feedback with fast background-color updates.
- **Transition:** All CSS properties transition over 0.1s ease-in for a responsive feel.
- **Keyboard:** Standard browser focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is inspiring and supportive, using engaging, conversational headlines that avoid corporate jargon and overly formal language. It speaks directly to the creative process with knowledge and encouragement.

- **Tone:** Inspiring, supportive, and deeply knowledgeable about creative processes.
- **Headline style:** Engaging, often conversational or thought-provoking questions and statements in a bold transitional serif.
- **CTA style:** Direct and action-oriented, frequently using a simple arrow icon to indicate forward movement.
- **Avoid:** Corporate jargon / Overly formal academic language / Aggressive sales-driven copy

### Don'ts
- ❌ Don't use a dark mode interface — the screenshot shows a predominantly white and light-warm background palette.
- ❌ Don't use purely geometric sans-serif fonts for headlines — the screenshot shows a distinct transitional serif for display text.
- ❌ Don't hide behind complex, multi-layered drop shadows — the screenshot shows very subtle, soft box-shadows.
- ❌ Don't use a grid of identical square cards — the screenshot shows a varied layout with mixed aspect ratios and horizontal feeds.
- ❌ Don't use a single monolithic background color — the screenshot shows a multi-tonal approach with white, light gray, and warm peach sections.
- ❌ Don't use neon or overly saturated accent colors everywhere — the screenshot restricts high-chroma color to a specific purple accent.

The system deliberately does not accommodate a dark mode interface, committing fully to its light, warm, and airy editorial aesthetic.

## System Prompt (paste into AI tool)

```
Design a clean, editorial website inspired by It's Nice That. Position it as a premium digital publication for the creative community. Use a white (#FFFFFF) base with light gray (#F4F4F4) and warm peach (#FFEDD1) backgrounds. Primary ink color should be dark gray (#2B2B2B) with a vibrant purple (#6219FF) as the sole high-chroma accent. Use a transitional-serif font for headlines and a humanist-sans for body text. Layouts should be magazine-inspired, allowing for varied image aspect ratios and horizontal scrolling feeds. Critical donts: never use a dark mode base, never use geometric sans for display text, and never use harsh, saturated colors for backgrounds. Keep interactions fast with 0.1s transitions. Focus on generous white space and clear typography hierarchy.
```
