Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Dribbble
DesignDribbble's design system balances creative playground energy with professional polish, using deep midnight navy (#0d0c22) as an anchor for sophisticated creative expression. The Mona Sans typography creates a friendly yet authoritative voice that speaks to both emerging creatives and established design professionals.
Design Identity
Signature Color
Dribbble Midnight
#0d0c22
creative sophistication - premium enough for professionals, approachable enough for emerging talent
Visual Identity
The distinctive left-right split layout with bold typography anchored by that deep midnight navy primary button - it's immediately recognizable as a creative platform that takes itself seriously.
Component Style
Rounded corners with moderate radius (likely 8-12px), clean shadows for depth, buttons feel substantial with 20px padding. Everything has a friendly polish - not sterile corporate, not playful startup, but craft-focused professional.
Spacing Philosophy
Generous breathing room between major sections creates gallery-like focus, while tighter internal spacing keeps components organized. The hero area uses dramatic whitespace to let content breathe and draw attention to the search functionality.
Design Principles
- Typography uses single font family (Mona Sans) across all elements for consistency
- Button padding standardized at 20px for substantial feel
- Shadows stay subtle with 6% to 15% opacity for depth without distraction
- Transitions kept snappy at .15s-.25s for responsive feel
- Pill-shaped elements use 9999px radius for perfect curves
Target Audience
Creative professionals and aspiring designers who value craft, portfolio presentation, and peer recognition - people who see design work as both art and business
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 28px | |
| h1 | 48px | 600 | 51.84px | |
| h2 | 16px | 400 | 21px | |
| h3 | 15px | 500 | 21px | |
| p | 16px | 450 | 28px | |
| a | 12px | 500 | 12px | |
| button | 13px | 600 | 13px | |
| input | 14px | 400 | 28px | |
| nav | 16px | 400 | 28px |
Color Palette
#ffffff#7b7194#0d0c22#3d3d4e
