Dribbble

Overview

Dribbble is a community platform where designers showcase work, connect with peers, and discover opportunities. The design system embodies 'Refined Minimalism'—a philosophy that prioritizes clarity and intentionality through generous whitespace, precise typography, and strategic use of a vibrant pink accent (#ea4c89) that energizes key interactions without overwhelming the interface. The aesthetic is contemporary yet timeless, balancing a predominantly neutral palette (deep navy #0d0c22 for text, soft grays #f3f3f6 to #dbdbde for surfaces) with moments of bold color that guide users toward meaningful actions.

The brand voice is approachable, professional, and encouraging—speaking to both seasoned designers and emerging talent. Dribbble uses language that celebrates creativity while remaining grounded in practical outcomes: 'Share your work,' 'Get hired,' 'Browse briefs.' The tone avoids hype; instead, it emphasizes community, opportunity, and craft. Example: 'Generate your brief and receive proposals—for free' conveys value without breathlessness.

Colors

The color system is anchored by a deep navy primary text (#0d0c22, rgb(13, 12, 34)) that ensures legibility across all surfaces, paired with a clean white background (#ffffff). The signature accent color is a vibrant pink (#ea4c89, rgb(234, 76, 137)), used exclusively on primary call-to-action buttons, active states, and brand-critical interactive elements. This pink appears in the hero headline ('mobile design' in the hero is rendered in #ea4c89), creating visual hierarchy and drawing focus to key messaging.

The surface stack progresses from #ffffff (base) through #f3f3f6 (container-lowest), #ecebf0 (container), and #dbdbde (container-highest), providing subtle depth without relying on shadows alone. Supporting neutrals include #6e6d7a (on-surface-variant, used for secondary text and dis

Typography

The typography system is built on Mona Sans, a contemporary geometric sans-serif that conveys both approachability and professionalism. The hierarchy spans from display (60px, 700 weight, -0.04em tracking) for hero statements down to label-sm (12px, 700 weight, 0.05em tracking) for metadata and tags. Headlines use 600 weight with negative letter-spacing (-0.02em to -0.04em) to create visual compression and impact; body text (16–18px, 400 weight) maintains 24–28px line-height for comfortable reading. The system uses weight and size, not color, to establish hierarchy—avoiding the temptation to lighten text, which would reduce contrast and accessibility.

When small labels appear over busy backgrounds (e.g., tags on image thumbnails), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with 40px (lg spacing) padding on left/right, creating breathing room on desktop while maintaining readability on tablet (959px breakpoint). Section separation uses 64px (xl spacing) vertical margin between major content blocks; within sections, 24px (md spacing) separates cards and list items.

The container philosophy is 'fluid-to-fixed': on mobile, content expands to fill available space with 24px gutters; at 1200px and above, the container locks at 1280px and centers. Whitespace is intentional—the hero headline has 40px margin-bottom before the supporting bullet list, and 24px margin-bottom before the CTA button. Cards use 24px internal padding (md spacing) with

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. The base level (surface) is pure white (#ffffff) with no shadow. Level 1 (cards, input fields) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the element floats 4–8px above the surface. Level 2 (modals, dropdowns, elevated cards on hover) uses box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2), indicating greater separation and importance.

Cards transition from Level 1 to Level 2 on hover (200ms ease-out timing), with both shadow and ba

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the interface without sacrificing clarity or appearing playful. Buttons use full border-radius (9999px), creating pill-shaped affordances that feel modern and inviting while remaining professional. Cards and containers use 12px (lg radius), a moderate curve that suggests depth and containment without excessive rounding. Input fields and smaller UI elements use 6px (DEFAULT radius), a subtle curve that maintains the geometric precision of the grid.

Tags and badges use 6px radius (DEFAULT) for consistency

Components

Action Elements Buttons are the primary interaction pattern. The primary button (Sign up, Start Your Project Brief) uses #ea4c89 background with white text, 12px padding on left/right, 48px height, and full border-radius (9999px). On hover, the background darkens to #d63a7a (a 15% darkening) with a 200ms ease-out transition. On active/pressed state, it darkens further to #c2185b. The secondary button (Log in) uses a transparent background with a 1px border in #cacaca (outline-variant), 12px padding, and the same 48px height and full radius. On hover, the background becomes #e7e7e9 (surface-container-high) and the border shifts to #6e6d7a (on-surface-variant). All buttons use label-md typography (14px, 600 weight) and include a 0.1s ease-in-out transition on color to feel responsive wit