Dribbble Design System Reference

Creative Community Design System

Dribbble Design System

Sophisticated, creative, and refined — tokens and components that power the world's leading community for designers and creative professionals.

16 Color tokens 8 Type styles 4 Shadow levels 7 Radius tokens Mona Sans + Amazon Ember

Foundation

Color Tokens

The full color palette extracted from Dribbble's design system, including deep navy backgrounds, vibrant pink accents, and a sophisticated neutral scale.

Deep Navy

#0D0C22

Primary background · Dominant UI surface

Ultra Dark

#060318

Deepest background layer · Contrast separation

Black

#000000

Strong contrast text · High-emphasis elements

Hot Pink

#EA4C89

Primary CTA · Brand accent · Hero highlights

Magenta

#E62D75

Secondary accent · Active states · Button active

Periwinkle

#3E34D3

Tertiary accent · Interactive focus · Link emphasis

Amber

#FF9902

Warning states · Caution · Secondary CTAs

Off-White

#FFFFFF

Primary text on dark · Card surfaces · Inverted

Light Gray

#D1CEDA

Secondary text · Disabled states · Muted labels

Dark Gray

#3A3546

Medium-emphasis text · Section headers

Card Border

#F3F3F4

Light card edges · Subtle dividers · Light surfaces

Charcoal

#655C7A

Tertiary text · Hints · Subdued information

Typography

Type Scale

Mona Sans and Amazon Ember drive Dribbble's voice — a sophisticated blend of system fonts for optimal readability and refined hierarchy.

Primary Mona Sans UI · Headings · Body · Buttons

Secondary Amazon Ember Display · Intro text · Button CTA

Display XL Build what matters 52px · 600 · 1.2

Display MD The quick brown fox 32px · 400 · 1.2

H1 The quick brown fox jumps 24px · 700 · 1.21

H3 The quick brown fox jumps over the lazy dog 16px · 700 · 1.25

Body The quick brown fox jumps over the lazy dog 14px · 500 · 1.4

Label Form label text here 16px · 500 · 1.5

Button Get Started 16px · 700 · normal

Caption Fine print and captions 13.33px · 400 · normal

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (0px) to fully circular (50%) to match component context and visual refinement.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

28px card

32px xl

52px hero

Border Radius

None 0px

XS 2px

SM 4px

MD 6px

LG 8px

XL 12px

Full 50%

Border Widths

Thin 1px

Medium 2px

Thick 3px

Opacity

Full 100%

Medium 60%

Disabled 28%

Shadows

Level 0 Base · no elevation

Raised Dropdowns · modals

Card Cards · panels · containers

Deep Modals · overlays · prominent

Z-index / Layering

Base 1

Sticky 999

Modal 9996

Toast 10000

Elevation

Depth & Surfaces

Deep navy dominates as the primary background, creating a sophisticated foundation. Ultra dark is used strategically for depth separation. White surfaces serve as inverted contexts for elevated content.

Page Background

Primary UI surface — the canvas everything sits on

L0 · #0D0C22

Ultra Dark Surface

Deepest background layer · contrast and depth separation

L1 · #060318

Card Surface (Light)

Elevated containers · cards · inverted sections

L2 · #FFFFFF

Deep Navy #0D0C22

Ultra Dark #060318

Off-White #FFFFFF

Card Border #F3F3F4

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states that embody Dribbble's creative identity.

Buttons

Interactive triggers — Primary Solid, Secondary Ghost, Tertiary, Disabled

.btn

Primary: #EA4C89 bg · #FFFFFF text · 2px radius · 5px 30px padding · 32px height. Secondary: transparent bg · #3A3546 text · no border. Ghost: link-style · rgba text. Active: #E62D75 background.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · 54px height · 12px radius · 24px left padding. Focus: #3E34D3 border · 40px height · 3px periwinkle focus ring rgba(62,52,211,.1).

Card

Content container — elevated surface with subtle shadow

.card

Creative Project

A beautiful showcase of design work with 2.5k views and growing recognition in the community.

#1F2328 bg · #E7E7E9 border · 8px radius · Card shadow. Title: 14px/600/#F0F6FC. Body: 13px/#655C7A. CTA: primary hot pink button 32px height.

Badges

Status indicators — Solid, Outline variants

.badge

Featured Hot Trend New

12px/600 · 4px 12px padding · 4px radius. Success: #EA4C89. Error: #E62D75. Info: #3E34D3. All white text on solid backgrounds.

Guidelines

Do's & Don'ts

Principles for consistent application of the Dribbble design language across surfaces and contexts.

Do — Embrace

Use deep navy (#0D0C22) as the dominant background for a sophisticated, focused environment
Apply hot pink (#EA4C89) sparingly and deliberately for primary CTAs and brand moments
Maintain generous whitespace (28px to 72px) between major sections; it's core to the identity
Leverage the full typography hierarchy; don't collapse sizes or weights together
Apply subtle shadows (rgba(18, 22, 25, 0.02) 0px 1px 10px 0px) to create depth without overwhelming

Don't — Avoid

Don't overuse pink/magenta; it should punctuate the interface, not dominate it
Don't reduce padding below 8px or gaps below 16px; the system is built on generous spacing
Don't use shadows heavier than Card level (rgba(18, 22, 25, 0.02)) for standard elements
Don't collapse the typography hierarchy; maintain clear size/weight distinction between roles
Don't place text directly against dark backgrounds without 80+ WCAG contrast verification

dribbble.com

Preview