Dribbble

---
version: alpha
name: "Dribbble Light"
description: "Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering."
colors:
  pure-white: "#ffffff"
  off-white-surface: "#faf9fb"
  dark-plum: "#3a3546"
  deep-ink: "#060318"
  dribbble-pink: "#ea4c89"
  medium-gray: "#6e6d7a"
  mid-purple-gray: "#524b63"
  muted-lavender: "#beb9ca"
  navy-black: "#0d0c22"
  soft-gray: "#ecebf0"
typography:
  hero-heading:
    fontFamily: "Mona Sans"
    fontSize: "52px"
    fontWeight: "600"
    lineHeight: "62.4px"
  body-default:
    fontFamily: "Mona Sans"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "28px"
  nav-label:
    fontFamily: "Mona Sans"
    fontSize: "13px"
    fontWeight: "600"
    lineHeight: "13px"
  small-label-medium:
    fontFamily: "Mona Sans"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "12px"
  body-large:
    fontFamily: "Mona Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "28px"
  button-label:
    fontFamily: "Mona Sans"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "17px"
  micro-bold:
    fontFamily: "Mona Sans"
    fontSize: "9px"
    fontWeight: "800"
    lineHeight: "20px"
  body-semibold:
    fontFamily: "Mona Sans"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "17px"
rounded:
  radius-sm: "4px"
  radius-md: "8px"
  radius-lg: "12px"
  radius-xl: "24px"
  radius-pill: "10000000px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "12px"
  space-4: "16px"
  space-5: "24px"
  space-6: "32px"
  space-7: "40px"
  space-8: "72px"
---

## Overview

Dribbble's design system is built on a deep near-black navy (#0d0c22) paired with a crisp white surface, punctuated by a signature hot-pink (#ea4c89) accent used sparingly for editorial emphasis and interactive highlights. The entire typographic system relies exclusively on Mona Sans across all weights, creating hierarchy through weight and size alone. Pill-shaped buttons (border-radius: 1e+07px) and rounded cards (12px radius) define the geometry language. The layout is spacious with an 8px base grid, and elevation is conveyed through subtle drop shadows rather than heavy layering.

**Signature traits:**
- Single-family weight hierarchy: Builds hierarchy from Mona Sans across 4 weights rather than multiple families.
- Soft, rounded geometry: Generous corner rounding up to 10000000px.
- Layered elevation: Depth comes from 4 validated shadow tokens.

## Colors

The palette uses 10 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-border** maps to `navy-black`: Role "border" is grounded by usage context "Primary button fill, heading text, body text, border color on interactive elements".
- **action-primary** maps to `pure-white`: Role "primary" is grounded by usage context "Page background, button text on dark fills, card surfaces".
- **surface-background** maps to `off-white-surface`: Role "background" is grounded by usage context "Subtle section backgrounds, announcement banner fill".
- **content-text** maps to `deep-ink`: Role "text" is grounded by usage context "High-contrast body text, nav item text, input text".

### Primary Brand
- **Pure White** (#ffffff): Page background, button text on dark fills, card surfaces. Role: primary. {authored: rgb(255, 255, 255), space: rgb, alpha: 0}

### Text Scale
- **Dark Plum** (#3a3546): Tertiary text, footer section headings. Role: text. {authored: rgb(58, 53, 70), space: rgb}
- **Deep Ink** (#060318): High-contrast body text, nav item text, input text. Role: text. {authored: rgb(6, 3, 24), space: rgb}
- **Dribbble Pink** (#ea4c89): Hero rotating word highlight, checkmark icons, hover accents. Role: text. {authored: rgb(234, 76, 137), space: rgb}
- **Medium Gray** (#6e6d7a): Placeholder text, meta labels, icon fills. Role: text. {authored: rgb(110, 109, 122), space: rgb}
- **Mid Purple-Gray** (#524b63): Secondary body text, footer links, subdued labels. Role: text. {authored: rgb(82, 75, 99), space: rgb}

### Interactive
- **Muted Lavender** (#beb9ca): Dividers, muted icon fills, secondary text decorations. Role: border. {authored: rgb(190, 185, 202), space: rgb}
- **Navy Black** (#0d0c22): Primary button fill, heading text, body text, border color on interactive elements. Role: border. {authored: rgb(13, 12, 34), space: rgb}
- **Soft Gray** (#ecebf0): Hairline borders, card outlines, input borders. Role: border. {authored: rgb(236, 235, 240), space: rgb}

### Surface & Shadows
- **Off White Surface** (#faf9fb): Subtle section backgrounds, announcement banner fill. Role: background. {authored: rgb(250, 249, 251), space: rgb}

## Typography

Typography uses Mona Sans across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Uses Mona Sans throughout for a uniform feel. Weight range spans semi-bold, regular, medium, bold. Sizes range from 9px to 52px.

### Font Roles
- **Headline Font**: Mona Sans
- **Body Font**: Mona Sans

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary hero headline and rotating word animation | Mona Sans | 52px | 600 | 62.4px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Primary body copy, card descriptions, nav dropdown text | Mona Sans | 14px | 400 | 28px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Navigation items, tab labels, section switchers | Mona Sans | 13px | 600 | 13px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Badges, chips, tags, meta labels | Mona Sans | 12px | 500 | 12px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Larger body paragraphs, nav sub-item descriptions | Mona Sans | 16px | 400 | 28px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Button text, interactive labels | Mona Sans | 14px | 500 | 17px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Eyebrow labels, badge superscripts, tiny caps-style labels | Mona Sans | 9px | 800 | 20px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Emphasized body text, card titles, link labels | Mona Sans | 14px | 600 | 17px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |

## Layout

Responsive system uses 2 breakpoint tier(s): mobile, desktop.

This system uses a 8px base grid with scale values 4, 8, 12, 16, 24, 32, 40, 72.

### Responsive Strategy
- **mobile (576-845px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-1 | 4px | 4 | Extracted spacing token |
| space-2 | 8px | 8 | Extracted spacing token |
| space-3 | 12px | 12 | Extracted spacing token |
| space-4 | 16px | 16 | Extracted spacing token |
| space-5 | 24px | 24 | Extracted spacing token |
| space-6 | 32px | 32 | Extracted spacing token |
| space-7 | 40px | 40 | Extracted spacing token |
| space-8 | 72px | 72 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| shadow-card | 1 | 0px 3px 6px 0px rgba(0, 0, 0, 0.14) |
| shadow-float | 1 | 0px 15px 50px 0px rgba(27, 32, 50, 0.1) |
| shadow-modal | 1 | 0px 32px 68px 0px rgba(0, 0, 0, 0.3) |
| shadow-subtle | 1 | 0px 2px 4px 0px rgba(6, 3, 24, 0.1) |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(13, 12, 34) ; rgb(190, 185, 202) ; rgb(255, 255, 255) |
| Light | outline-width | 3px ; 0px |
| Light | outline-offset | 0px ; -3px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, 1, 0) ; matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 8px | 8 | Control corner |
| radius-lg | 12px | 12 | Control corner |
| radius-xl | 24px | 24 | Large surface corner |
| radius-pill | 10000000px | 10000000 | Large surface corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 8px | px |
| radius-lg | 12px | px |
| radius-xl | 24px | px |
| radius-pill | 10000000px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Single-family weight hierarchy, Soft, rounded geometry, Layered elevation without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 352px | (max-width: 352px) |
| Mobile | <= 425px | (max-width: 425px) |
| Mobile | <= 440px | (max-width: 440px) |
| Mobile | <= 500px | (max-width: 500px) |
| Mobile | <= 576px | (max-width: 576px) |
| Breakpoint 6 | <= 768px | (max-width: 768px) |
| Breakpoint 7 | <= 845px | (max-width: 845px) |
| Mobile | >= 576px | (min-width: 576px) and (max-height: 660px) |
| Breakpoint 9 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.