Dribbble

Dribbble's aesthetic is an 'organized showcase' — a high-contrast, functionally transparent environment designed to highlight creative work without visual interference. Dominant achromatic tones in the background and foreground create a neutral canvas, allowing the showcased content to provide the primary visual interest. Subtle but consistent border radii unify interactive elements and content containers, creating a sense of approachable professionalism. Prioritize Mona Sans for all text elements to maintain a unified, modern aesthetic. Use Arctic White (#ffffff) as the primary page background and Canvas Light (#f3f3f6) for subtle section differentiation. Apply a 10000px border radius to all primary action buttons (e.g., 'Auth Button') to establish a consistent soft, approachable shape. Employ Stormy Night (#0d0c22) for main body text and Anchor Black (#060318) for headlines to ensure strong legibility against light backgrounds. Use Ghost Gray (#6e6d7a) for secondary text and disabled states to create hierarchy and reduce visual noise. Integrate Dribbble Pink (#ea4c89) sparingly for key accents like 'New' badges or interactive element highlights to draw attention. Ensure input fields have a 12px border radius and 24px left padding for consistency. Do not introduce sharp corners on interactive elements; maintain the established border radii for buttons (10000px) and inputs (12px). Avoid using highly saturated colors for large background areas; stick to the neutral palette to ensure content remains the focus. Do not deviate from the Mona Sans typeface; no other font families should be introduced. Refrain from using strong drop shadows or complex gradients; the system relies on flat colors and subtle borders for depth. Do not use white text on white backgrounds or similar low-contrast combinations; maintain WCAG AAA contrast ratio where possible (e.g. Stormy Night on Arctic White). Avoid excessive use of Dribbble Pink (#ea4c89); it should be reserved for specific branding or high-priority calls to action. Do not use inconsistent padding values around elements; adhere to the 4px base unit and established token values for internal spacing.