Eventbrite

Eventbrite

Preview image. Unlock full-res

Event listing, vibrant and clear

Industrymedia
Palette
#ffffff
#f8f7fa
#dbdae3
#eeedf2
#39364f
#585163
#6f7287
#3659e3
#1e0a3c
#f05537

Eventbrite employs a lively discovery-platform aesthetic, featuring a bright, almost white canvas punctuated by a single vivid blue for interaction and branding. Typography is direct and legible, supporting a clear hierarchy without being overt. Components are lightweight with subtle borders and generous rounded corners, emphasizing content flow and event visibility over heavy chrome. Use Canvas White (#ffffff) as the primary page background to create an expansive, light environment. Apply Oceanic Blue (#3659e3) exclusively for interactive elements like links, outlined buttons, and input borders to signal functionality. Ensure all cards use a radius of 16px, except for hero-style cards which use 40px 40px 0px 0px for a distinct top edge. Prioritize Neue Plak family for all text elements, using condensed weights and sizes above 18px for headlines and Neue Plak Text 600 for navigation. Maintain a comfortable density with 12px for elementGap and cardPadding within components to ensure readability. Implement Pill Buttons with a 360px radius for a fully rounded, distinct interactive shape. Use Lavender Ash (#dbdae3) for hairline borders on lists and cards to keep surfaces clean yet structured. Avoid using highly saturated colors for large background areas, keeping the interface neutral and accent-driven. Do not introduce strong box-shadows on cards or containers; flatness is preferred to maintain a lightweight feel. Do not deviate from the Neue Plak family for primary text; it sets the brand's typographic tone. Do not use generic square buttons; opt for rounded (360px) or ghost buttons as per the design system. Avoid arbitrary uses of Terracotta (#f05537); reserve it for specific illustrative branding rather than widespread UI elements. Do not vary from the established spacing units; maintain the 4px base for consistent rhythm and hierarchy. Do not clutter card content with excessive internal padding; content should define the card's boundaries, not excessive internal whitespace.

More like this