Eventbrite Brand Design System Deep-Dive

1. Brand Overview

Eventbrite has a clear design voice: approachable, functional, and a little celebratory without being loud. This is a platform built for event organizers and attendees, so the interface has to work for two very different audiences — the people running the events (who need admin-like clarity) and the people browsing for something fun to do (who need a little emotional spark).

On the surface, the site feels clean, structured, and modern. The typography is contemporary and sans-serif heavy, the palette leans neutral with one strong accent hue, and the components are generous with whitespace. This isn't a maximalist brand — there's no neon overload — but it also isn't sterile. The accent blue (#3659e3) and occasional warm orange (#f05537) give just enough pop to break up the grays and deep purples.

What I notice immediately: Eventbrite is comfortable in its own skin. The brand doesn't rely on gimmicks or heavy gradients. Instead, it uses restrained color application, precise spacing (8px scale), and consistent corner treatments to tie everything together. The design feels trustworthy — important for a platform handling ticket purchases — but also flexible enough to showcase anything from a tech conference to a local food festival.

The vibe is utilitarian yet friendly. Interfaces are stripped of unnecessary complexity, with buttons and links that are easy to identify but not screaming for attention. Rounded elements (100px pill buttons) soften the structure, while typography keeps it grounded.

Overall philosophy: clarity over decoration, hierarchy over noise. Eventbrite is designed for speed — both in comprehension and in interaction. You can land on the page and immediately find what you need, whether that's a search bar, a category link, or the big “Find Events” CTA. That balance between usability and brand personality is hard to nail, but they’ve done it.

2. Color System

2.1 Primary Colors

The primary brand hue in use is rgb(111, 114, 135) (#6f7287) as the semantic “primary,” but in real-world application, the eye is drawn to rgb(54, 89, 227) (#3659e3). This blue is the link color, the interactive anchor. Psychologically, blue evokes trust, reliability, and calm — perfect for a ticketing platform. Compared to competitors like Ticketmaster (bright blue) or Meetup (red), Eventbrite’s blue is slightly muted, less aggressive, and fits the more neutral, trustworthy tone.

The secondary semantic color is rgb(255, 255, 255) (#ffffff), which acts as the main background and surface color.

2.2 Complete Palette

2.3 Color Relationships

The palette is built around high-contrast neutrals with one main accent (blue) and a secondary accent (orange). Blue-on-white meets WCAG AA easily. Blue-on-deep-purple (#3659e3 on #39364f) is borderline for small text — better reserved for larger headings or bold links.

The deep purple (#39364f) works as a dark neutral, pairing well with white and soft grays for clear separation. Orange (#f05537) is used sparingly to avoid overwhelming the calm tone.

2.4 Usage Guide

• Use #3659e3 for all interactive primary actions — links, buttons, and focus states.
• Limit #f05537 to promotional or high-emphasis actions — it’s a strong warm hue that can shift the tone if overused.
• Use #dbdae3 and #c2c2cc for dividers, muted text, and low-priority UI — they help maintain hierarchy without clutter.
• Avoid pairing #3659e3 directly with #f05537 unless the goal is maximum contrast — it can feel jarring.
• Maintain white (#ffffff) as the default background to keep the airy feel.

3. Typography

3.1 Font Families

Eventbrite uses Neue Plak for headings, buttons, and links, with Neue Plak Text for captions and smaller labels. The fallback stack is a standard system sans-serif: -apple-system, system-ui, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial. No Google Fonts or Adobe Fonts — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The type scale is tight — only a few big jumps (32px to 24px to 18px) for headings. This keeps content feeling cohesive and avoids visual noise. Weights shift from 400 to 700 to denote importance, but the font family remains consistent, anchoring the visual language. Captions and microtext are still in Neue Plak, keeping UI cohesion.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common values:

4.2 Layout

Breakpoints span from 360px mobile up to 1608px desktop max. The list is granular — they’re clearly optimizing for multiple device widths, not just the standard 3-tier responsive approach.

5. Visual Elements

Border Radius

Eventbrite’s corner system is consistent:

Shadows

Only one shadow style:
rgba(40, 44, 53, 0.1) 0px 1px 20px 0px, rgba(40, 44, 53, 0.1) 0px 2px 5px 0px — subtle, soft, for depth without heavy contrast.

Borders

Several combinations, mostly thin solid lines in grays and blues. Notably:

• 2px solid #dddae3 for buttons
• 1px solid #dee5ff for div containers
• 0px 0px 2px solid for tab indicators

6. Components

6.1 Buttons

Icon Button (default):

• Background: white (#ffffff)
• Text color: deep purple (#39364f)
• Padding: 1px 6px
• Border radius: 360px (pill)
• Border: 2px solid #dddae3
• Font: Neue Plak, 16px, weight 400

States:

• Hover: Background #f8f7fa, text #1e0a3c
• Active: Background #f8f7fa, text #3d64ff
• Focus: Outline #39364f solid 3px, background #f8f7fa, text #3d64ff, box-shadow #eeedf2 0px 0px 0px 2px

6.2 Links

Multiple styles:

6.3 Forms

Search Input:

• Background: transparent
• Text: #39364f
• Padding: 12px 8px 12px 0px
• No border

Text Input:

• Text: #3659e3
• Padding: 12px 0px 6px
• No border

Select-One:

• Padding: 12px
• Focus: Background #f8f7fa, text #39364f

7. Design Tokens

:root {
  /* Colors */
  --color-deep-purple: #39364f;
  --color-primary-blue: #3659e3;
  --color-soft-gray: #dbdae3;
  --color-white: #ffffff;
  --color-mid-gray: #c2c2cc;
  --color-charcoal-purple: #585163;
  --color-black: #000000;
  --color-dark-indigo: #1e0a3c;
  --color-semantic-primary: #6f7287;
  --color-dark-plum: #261b36;
  --color-accent-orange: #f05537;
  --color-bright-blue-hover: #3d64ff;

  /* Typography */
  --font-heading: "Neue Plak", -apple-system, system-ui, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial;
  --font-caption: "Neue Plak Text", "Neue Plak";
  
  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-36: 36px;
  --space-40: 40px;
  --space-74: 74px;
  --space-80: 80px;

  /* Radius */
  --radius-1: 1px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-40-top: 40px 40px 0px 0px;
  --radius-100: 100px;
  --radius-360: 360px;
  --radius-50pct: 50%;

  /* Shadows */
  --shadow-soft: rgba(40, 44, 53, 0.1) 0px 1px 20px 0px, rgba(40, 44, 53, 0.1) 0px 2px 5px 0px;
}

8. AI Coding Assistant Prompt

# Eventbrite Design System Specification

You are an Eventbrite design expert. Build UIs matching their visual language exactly.

## Brand Context
Eventbrite’s design is clear, functional, and approachable. It uses a restrained neutral palette with one primary blue accent and occasional warm orange for emphasis. Typography is consistent, sans-serif, and built on the Neue Plak family. Spacing follows an 8px grid with generous use of pill-shaped buttons.

## Color Palette
- Deep Purple: #39364f — navigation text, headers
- Primary Blue: #3659e3 — links, CTAs, focus states
- Soft Gray: #dbdae3 — dividers, backgrounds
- White: #ffffff — main background
- Mid Gray: #c2c2cc — muted text
- Charcoal Purple: #585163 — input text
- Black: #000000 — high contrast text
- Dark Indigo: #1e0a3c — section headers, city links
- Semantic Primary: #6f7287 — neutral accent
- Dark Plum: #261b36 — overlays
- Accent Orange: #f05537 — promotional highlights
- Bright Blue Hover: #3d64ff — hover states

## Typography
- Headings: "Neue Plak", -apple-system, system-ui, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial
- Captions: "Neue Plak Text", "Neue Plak"

| Level      | Size | Weight | Line Height | Use For |
|------------|------|--------|-------------|---------|
| H1         | 32px | 700    | 1.25        | Page titles |
| H2         | 24px | 700    | 1.33        | Section headings |
| H3         | 18px | 600    | 1.33        | Subheadings |
| Body       | 16px | 400    | 1.25        | Body copy |
| Link-sm    | 14px | 600    | —           | UI labels |
| Caption    | 12px | 400/600| 1.33        | Small text |
| Micro      | 10px | 600    | 1.20        | Microtext |

## Spacing & Grid
Base: 8px.  
Scale: 1px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 24px, 36px, 40px, 74px, 80px.

## Border Radius
- 1px — dividers
- 4px — inputs, small cards
- 8px — badges
- 16px — cards
- 20px — larger containers
- 40px top — image blocks
- 100px — pill buttons
- 360px — carousel scroll buttons
- 50% — circular avatars

## Shadows & Depth
- Soft shadow: rgba(40, 44, 53, 0.1) 0px 1px 20px, rgba(40, 44, 53, 0.1) 0px 2px 5px

## Component Specifications

### Primary Button
Default:
- Background: #ffffff
- Color: #39364f
- Padding: 1px 6px
- Radius: 360px
- Border: 2px solid #dddae3
- Font: Neue Plak 16px, weight 400

Hover:
- Background: #f8f7fa
- Color: #1e0a3c

Active:
- Background: #f8f7fa
- Color: #3d64ff

Focus:
- Outline: 3px solid #39364f
- Background: #f8f7fa
- Color: #3d64ff
- Box-shadow: #eeedf2 0px 0px 0px 2px

### Links
- Primary Link: #3659e3, weight 600, hover color #39364f
- Secondary Link: #39364f, weight 600, no hover change
- Accent Link: #1e0a3c, hover underline

### Input Fields
Search:
- Transparent background
- Text: #39364f
- Padding: 12px 8px 12px 0px

Text:
- Transparent background
- Text: #3659e3
- Padding: 12px 0px 6px

Select:
- Transparent background
- Text: #39364f
- Padding: 12px
- Focus background: #f8f7fa

## Layout & Responsive Rules
Breakpoints: 360px, 400px, 479px, 480px, 600px, 659px, 660px, 661px, 687px, 768px, 791px, 792px, 803px, 821px, 860px, 959px, 960px, 961px, 1079px, 1080px, 1151px, 1152px, 1271px, 1272px, 1488px, 1607px, 1608px.

## Interaction Rules
- Transition: 150ms ease
- Focus indicators: 3px outline in #39364f
- No motion-heavy animations

## DO List
- Use ONLY colors from the palette
- Maintain 8px-based spacing
- Keep button radii consistent (100px pills)
- Use Neue Plak for all headings and UI text
- Apply shadows only as specified

## DON'T List
- Don't introduce new colors
- Don't mix sharp and rounded corners
- Don't remove focus outlines
- Don't overuse accent orange

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #39364f;
  padding: 1px 6px;
  border-radius: 360px;
  border: 2px solid #dddae3;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f8f7fa;
  color: #1e0a3c;
}
.btn-primary:focus {
  outline: 3px solid #39364f;
  background: #f8f7fa;
  color: #3d64ff;
  box-shadow: #eeedf2 0px 0px 0px 2px;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
```

### Input
```css
.input-search {
  background: transparent;
  color: #39364f;
  padding: 12px 8px 12px 0px;
  border: none;
}
.input-search:focus {
  outline: none;
}
```

9. Summary

TL;DR — Eventbrite’s design system is neutral-first, with blue for action and orange for emphasis. Neue Plak keeps typography consistent. Spacing is on an 8px grid. Corners are mostly rounded, with pill shapes for buttons. Shadows are subtle. This is a system built for clarity and trust.

Brand Keywords: neutral-functional, approachable-modern, blue-accented, pill-cornered, space-conscious