Dribbble Design Community

Overview

Dribbble is a vibrant, community-driven platform where designers showcase portfolios, discover inspiration, and connect with creative talent worldwide. The design system embodies a 'Clarity-First Minimalism' aesthetic—a clean, light-dominant interface punctuated by a bold, energetic accent color (#ea4c89 pink) that draws attention to calls-to-action and key interactive moments. The brand personality is approachable yet professional: encouraging exploration and collaboration without sacrificing clarity or hierarchy. The UI celebrates the work itself, using generous whitespace and a restrained color palette so that user-generated design content remains the focal point. Voice: conversational, inclusive, and action-oriented. Example: 'Explore thousands of designs from the world's leading creative professionals—or get hired to bring your vision to life.'

Colors

The color system prioritizes clarity and accessibility through a light-first surface stack anchored in near-white (#ffffff, #f3f3f6, #eeeeef) with a sophisticated dark text (#0d0c22) for maximum contrast and readability. Primary (#ea4c89) is the signature accent—a vibrant, warm pink reserved exclusively for CTAs, active states, and brand-critical moments; it appears on the search icon, 'Get Started' buttons, and link hovers to create visual momentum. Secondary (#454e9b) is a deep indigo used sparingly for secondary navigation and status indicators, providing a cool counterpoint. Tertiary (#3a3546) is a near-black used for headers and emphasis. The outline palette (#9e9ea7 for standard, #c4c4c8 for variant) defines subtle borders and dividers. Surface containers (lowest through highest) cre

Typography

The type system uses Mona Sans exclusively—a humanist sans-serif that balances geometric precision with warmth, reinforcing the brand's approachable-yet-professional tone. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700, -0.02em) is reserved for page titles and shot names; Headline-md (28px, 600, -0.01em) breaks up content sections; Title-lg (20px, 600) labels cards and subsections. Body-lg (18px, 400, 28px line-height) is used for long-form descriptions and artist bios, while Body-md (16px, 400, 24px line-height) serves as the default paragraph text. Label-md (14px, 600, 0.01em) is applied to button text and form labels, ensuring legibility at small sizes; Label-sm (12px, 500, 0.02em) is reserved for metadata, timestamps,

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) for micro-spacing within components; sm (12px) for internal padding and tight grouping; md (24px) for section separation and standard card padding; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. The container max-width (1280px) ensures content remains scannable and prevents line-length bloat on ultra-wide displays. Whitespace is generous and intentional—cards are separated by at least md spacing (24px), and major content blocks by lg spacing (40px)—creating visual breathing room that emphasizes the curated nature of the platform. The header uses

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container layering rather than aggressive drop shadows. Level 1 (Base): the surface itself (#ffffff) with no shadow. Level 2 (Cards, Modals): surface-container-low (#f3f3f6) with a subtle sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)) and a 1px border in outline-variant (#c4c4c8), creating a soft, barely-perceptible lift. Level 3 (Elevated Cards, Popovers): surface-container (#eeeeef) with md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and the same border, signaling stronger separation. On hover, cards transition to surface-container-high

Shapes

The shape philosophy is 'Soft-Technical'—combining geometric precision with humanist softness to reflect the balance between design craft and creative expression. Buttons and search bars use rounded-full (9999px border-radius), creating pill-shaped affordances that feel inviting and modern; this is the most distinctive shape in the system and signals primary interactivity. Cards and containers use rounded-md (0.75rem / 12px) for a subtle, professional corner that avoids sharp edges without appearing overly rounded. Input fields use rounded-DEFAULT (0.5rem / 8px), a middle ground that feels ref

Components

Action Elements Buttons are the primary interaction mechanism and use the full-radius (9999px) shape to maximize affordance. Primary buttons (#ea4c89 background, white text, 48px height, 12px 24px padding) are reserved for critical actions ('Get Started', 'Get in touch', 'Sign up'). On hover, the background darkens to #d63b7a and a soft pink shadow (0 4px 12px rgba(234, 76, 137, 0.24)) appears, with a 200ms ease-out transition. On active/press, the background further darkens to #c2185b and shadow reduces to 0 2px 6px rgba(234, 76, 137, 0.16), creating tactile feedback. Secondary buttons use surface-container-high (#e7e7e9) background with a 1px outline-variant border, allowing for multiple actions without visual chaos. Ghost buttons (transparent background, on-surface text) are used fo

Do's and Don'ts

**Do**

• Do use primary (#ea4c89) exclusively for CTAs, active states, and brand-critical moments—never use it for passive UI or backgrounds.
• Do maintain generous whitespace (md/lg spacing) between major content blocks to emphasize the curated, gallery-like nature of the platform.
• Do apply the full-radius shape (9999px) to all primary buttons and search bars to maximize affordance and visual consistency.
• Do use the surface-container stack (6 levels) to create depth through layering rather than aggressive shadows—keep shadows subtle (sm/md only).
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do use Mona Sans exclusively for all typography—never mix with system fonts or serif typefaces.

**Don't**

• Don't use primary (#ea4c89) for body text, backgrounds, or passive UI elements—reserve it for interactive affordances only.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—avoid arbitrary radii like 7px or 13px.
• Don't stack shadows deeper than md (0 4px 12px rgba(0, 0, 0, 0.08))—avoid lg shadows on standard cards or inputs.
• Don't use color alone to convey state changes—always pair color shifts with shadow or border changes for accessibility and clarity.
• Don't apply instant state changes without transitions—all interactive elements must use 200ms ease-out timing for visual continuity.
• Don't mix typography families or use system fonts—Mona Sans is the sole typeface; if unavailable, fall back to Helvetica Neue or Arial, never to generic sans-serif.