# Dribbble · Design system migration spec

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

> The site is a prime example of a gallery-style SaaS platform that uses a neutral UI to highlight its primary content: visual design.

## 1. Identity DNA

Dribbble's design system operates like a gallery-style exhibition hall: a meticulously neutral architecture built to frame the colorful work of others. Its identity is one of curated restraint, where every surface, shadow, and typographic choice serves as a quiet backdrop for the community's visual storytelling.

**One-liner:** A curated marketplace connecting designers and clients through visual storytelling.
**Keywords:** marketplace · creativity · portfolio · community · talent
**Analogy:** A clean, gallery-style exhibition hall for digital design portfolios.

## 2. Color

The color system is fundamentally a supporting actor, built on a clean foundation of white and soft gray that lets user-generated content dominate. A signature pink accent appears only at key interactive moments, a deliberate signal against an otherwise achromatic stage.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#FAF9FB` | card background |
| `--bg-quiet` | `#ECBEA300` | quiet area |
| `--ink` | `#0D0C22` | body text |
| `--ink-soft` | `#212121` | secondary text |
| `--muted` | `#524B63` | placeholder |
| `--muted-soft` | `#BEB9CA` | weak hint |
| `--accent` | `#E94B84` | single accent |
| `--line` | `rgba(13, 12, 34, 0.08)` | divider |

**Color principle:** A high-contrast, neutral foundation designed to let colorful user-generated work take center stage.

The principle is clear: the interface's palette must never compete with the work it presents.

## 3. Typography

Typography relies on a single grotesque-sans family, Mona Sans, establishing a consistent and modern voice across the marketplace. Hierarchy is achieved through weight and scale rather than family variation, with tight letter-spacing on large headlines reinforcing a premium, intentional feel.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.1 | 600 | -0.5px | Main hero headlines |
| headline | 32px | 1.2 | 600 | -0.2px | Section headers |
| body-lg | 16px | 1.5 | 400 | 0px | Introductory text and descriptions |
| body | 14px | 1.6 | 400 | 0px | General body text and metadata |
| caption | 12px | 1.4 | 400 | 0px | Small labels and technical details |

**Type rules:**
- Use -1px letter spacing for large display headlines to create a tight, premium feel.
- Maintain a consistent 600 weight for primary headlines and a 400 weight for body text.

## 4. Spacing

A strict 4px-based rhythm governs all spacing, creating a consistent and airy grid that allows complex visual work to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px-based grid with generous whitespace to maintain a clean, airy layout.

## 5. Surfaces

Surfaces are defined by subtle depth and fine borders. Shadows are layered and low-opacity, while borders are consistently thin and lightly tinted, ensuring they define boundaries without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 3px 6px rgba(0, 0, 0, 0.14)
  - 0px 15px 50px rgba(27, 32, 50, 0.1)
  - 0px 2px 4px rgba(6, 3, 24, 0.1)
- **Borders:** 1px solid rgba(13, 12, 34, 0.08)

## 6. Layout

The layout skeleton is a responsive 12-column grid, expanding to a 1280px container on desktop before collapsing to a 4-column stack on mobile. This structure supports the signature split-hero component, balancing bold, left-aligned typography with contextual imagery.

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

**Skeleton:** A responsive 12-column grid that collapses to 4 columns on mobile.

## 7. Motion & Interaction

Motion is purposeful and restrained, focused on providing immediate feedback for user actions. Micro-interactions on hover and click offer subtle cues, while larger state changes use a smooth, consistent 0.5s transition to maintain flow without distraction.

- **Durations:** micro 100ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.32, 0, 0.59, 0.03)`
- **Patterns:**
  - Micro-interactions on hover for buttons and cards.
  - Smooth 0.5s ease-in-out transitions for background color changes.

- **Hover:** Subtle shadow elevation on cards and background color shifts on buttons.
- **Click:** Immediate visual feedback with color transitions over 0.05s.
- **Transition:** Consistent use of cubic-bezier easing for smooth state changes.
- **Keyboard:** Standard focus ring visibility for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and direct, matching the platform's role as a curated talent marketplace. Language is benefit-oriented and action-driven, avoiding casual slang or passive constructions that might dilute its empowering tone.

- **Tone:** Confident, professional, and empowering.
- **Headline style:** Direct and benefit-oriented, often using bold typography to highlight key features.
- **CTA style:** Action-driven and clear, utilizing pill-shaped buttons for prominent calls to action.
- **Avoid:** Overly casual or slang-heavy language. / Passive voice in instructions. / Jargon without context.

### Don'ts
- ❌ Don't use serif fonts — screenshot shows a consistent use of grotesque-sans throughout.
- ❌ Don't use rounded corner radii larger than 12px for cards — screenshot shows 12px as the standard.
- ❌ Don't use high-chroma background colors — screenshot shows a strictly white and light gray palette.
- ❌ Don't use left-aligned text in the hero — screenshot shows a centered or right-aligned layout depending on the section.
- ❌ Don't use thin, low-contrast borders — screenshot shows a distinct 1px border with rgba(13, 12, 34, 0.08).
- ❌ Don't use dark mode themes — screenshot shows a purely light-mode interface.

The system deliberately avoids dark mode, serif typography, and complex chrome, ensuring nothing distracts from the visual work at its core.

## System Prompt (paste into AI tool)

```
Dribbble is a curated marketplace for digital design portfolios and talent. It features a clean, light-mode aesthetic with a white and light gray background (#FFFFFF, #FAF9FB) to let colorful user work stand out. Typography is primarily grotesque-sans (Mona Sans) with a clear hierarchy from bold 52px headlines down to 14px body text. A signature pink accent (#E94B84) is used sparingly for icons and highlights. The layout is a 12-column grid with generous spacing and 12px rounded corners on cards. Critical don'ts: avoid dark mode, avoid serif fonts, and avoid overly complex UI components that distract from the visual work.
```
