---
title: "Eventbrite design system"
variant: extended
source: https://www.eventbrite.com/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/eventbrite-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Eventbrite · Design System

> A bright, compact guide to what’s happening nearby

**Theme:** light · **Industry:** entertainment · **Source:** https://www.eventbrite.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Eventbrite pairs a quiet, white interface with vivid event imagery to make local discovery feel immediate and browsable. A compact header, category shortcuts, event cards, and location links guide visitors from inspiration to practical options.

## North star

Keep the interface quiet and highly scannable so event photography and clear local discovery controls carry the visual energy.

## Overview

The page is built on a white canvas, with near-black and deep purple reserved for high-contrast text and the footer. A pale lavender-gray band distinguishes the destination directory from the main event feed, while fine gray rules quietly separate navigation and content. Saturated event thumbnails do most of the visual work; blue links and location controls provide small, functional points of emphasis, and the coral brand mark is a restrained accent. Founders Grotesk R supplies a consistent sans-serif voice across headings, listings, and controls, using stronger weights to establish hierarchy without decorative type. The layout prioritizes a wide, centered hero, then moves into evenly distributed category shortcuts and a compact two-column event feed. Rounded media and pill-shaped controls soften the dense browsing experience. Generous white space around section transitions keeps a large quantity of listings readable without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas for the header, hero surroundings, category navigation, and event feed. |
| Deep Event Purple | `#1e0a3c` | `--color-deep-event-purple` | brand | High-contrast headings and the solid footer establish the brand’s darkest visual anchor. |
| Muted Aubergine | `#3a3247` | `--color-muted-aubergine` | neutral | Secondary text and headings where softer contrast is preferable to black. |
| Lilac Mist | `#f8f7fa` | `--color-lilac-mist` | surface | Pale background band behind destination, city, and state link collections. |
| Listing Black | `#000000` | `--color-listing-black` | neutral | Strong text and control contrast, including dark button and link treatments. |
| Quiet Divider | `#dbdae3` | `--color-quiet-divider` | neutral | Thin borders around controls and subtle separators in navigation and footer. |
| Purple Veil | `#291546` | `--color-purple-veil` | semantic | Dark stop within the measured inverse-purple gradient; not a dominant flat page color. |
| Dusk Violet | `#6b5d7e` | `--color-dusk-violet` | semantic | Lighter measured gradient stop, supporting the purple overlay treatment. |
| Discovery Blue | `#3659e3` | `--color-discovery-blue` | accent | Interactive links and selected location or browsing states. |
| Slate Plum | `#585163` | `--color-slate-plum` | neutral | Muted navigation labels and supporting interface text. |
| Periwinkle Line | `#dee5ff` | `--color-periwinkle-line` | semantic | Pale blue border tone detected in interface details, not a major section fill. |
| Footer Silver | `#c2c2cc` | `--color-footer-silver` | neutral | Low-emphasis footer text against the dark purple footer. |
| Soft Rule | `#eeedf2` | `--color-soft-rule` | neutral | Subtle interface and navigation border tone. |
| Ink Violet | `#39364f` | `--color-ink-violet` | neutral | Search and location input text plus darker navigation and heading details. |
| Night Plum | `#261b36` | `--color-night-plum` | neutral | Occasional deep text tone; supports the dark type range rather than a large surface. |
| Signal Coral | `#f05537` | `--color-signal-coral` | accent | Small brand and interface accent; the coral event imagery is not the core palette. |
| Apricot Glow | `#f2bf8d` | `--color-apricot-glow` | accent | Warm accent observed in media; treat as imagery detail, not a page-wide UI color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1e0a3c` (Deep Event Purple) · `--color-surface-2` → `#f8f7fa` (Lilac Mist) · `--color-text` → `#000000` (Listing Black) · `--color-text-muted` → `#3a3247` (Muted Aubergine) · `--color-text-subtle` → `#585163` (Slate Plum) · `--color-border` → `#dbdae3` (Quiet Divider) · `--color-accent` → `#3659e3` (Discovery Blue) · `--color-accent-2` → `#f05537` (Signal Coral) · `--color-accent-3` → `#f2bf8d` (Apricot Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1e0a3c` | 1.16:1 | fail |
| `#000000` | `#f8f7fa` | 19.68:1 | AAA |
| `#3a3247` | `#ffffff` | 12.16:1 | AAA |
| `#3a3247` | `#1e0a3c` | 1.48:1 | fail |
| `#3a3247` | `#f8f7fa` | 11.39:1 | AAA |
| `#585163` | `#ffffff` | 7.58:1 | AAA |
| `#585163` | `#1e0a3c` | 2.38:1 | fail |
| `#585163` | `#f8f7fa` | 7.1:1 | AAA |
| `#3659e3` | `#ffffff` | 5.68:1 | AA |

### Gradients

- `linear-gradient(135deg, rgba(30, 10, 60, 0.95) 0%, rgba(30, 10, 60, 0.65) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Founders Grotesk R | `--font-body` | webfont | 500, 600, 400, 700 | Site-wide headings, body copy, navigation, event listings, links, and controls. | Inter |

- **Founders Grotesk R:** Use a clean sans-serif throughout; measured weights span 400–700, with heavier headings and concise, compact interface labels.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1.25 | 0 | — | Founders Grotesk R | Primary page or feed heading, such as the local events title. |
| h2 | 24px | 600 | 1.33 | 0.01em | — | Founders Grotesk R | Section headings for destination and discovery groups. |
| body | 18px | 500 | 1.33 | 0.014em | — | Founders Grotesk R | Event titles, listing details, and primary supporting copy. |
| caption | 14px | 600 | normal | 0 | — | Founders Grotesk R | Compact event metadata, category labels, and secondary details. |
| button | 14px | 600 | normal | 0 | — | Founders Grotesk R | Search, location, and other actionable control labels. |
| nav | 14px | 500 | 1.43 | 0 | — | Founders Grotesk R | Header links and category or browsing navigation. |
| link | 14px | 600 | normal | 0 | — | Founders Grotesk R | Blue linked categories, locations, and destination names. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 7, 8, 10, 12, 16, 24 px.
- Section rhythm 36px · element gap 8px · card padding — · max content width 1272px.

A centered content area uses the measured 1272px maximum width, with a compact full-width header above a wide hero. Category shortcuts form an evenly spaced horizontal row, followed by local filters and a dense two-column event feed. The final destination directory switches to a pale background and a twelve-column link layout. Sections are separated by comfortable vertical pauses, while listing interiors stay compact and left-aligned.

## Shape & elevation

- Radius: button `9999px` · media `40px` · nav `9999px` · xs `1px` · sm `4px` · md `8px` · lg `16px` · xl `40px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.24s cubic-bezier(0.4, 0, 0.3, 1)` on interactive elements.

The page is predominantly flat, with no measured shadow system. Separation comes from white space, pale section backgrounds, and thin gray borders around controls. Rounded hero and card media provide the main depth cues; avoid adding heavy elevation or layered panels.

## Imagery

A wide, rounded hero photograph shows a live music performance with promotional text integrated into the artwork. Event listings rely on vivid, varied promotional thumbnails, each cropped into consistent card media; destination cards use city photography. Category shortcuts use thin, simple line icons. Treat the photography as the main source of color and personality, rather than expanding its warm colors into the surrounding UI.

## Components

### Global header

Compact white navigation with the Eventbrite mark, pill-like event and location search, coral search action, and right-aligned account and discovery links.

### Featured hero

Wide, rounded live-music image with embedded promotional typography and a light pill CTA; imagery supplies the dominant color.

### Category shortcuts

Eight evenly distributed categories, each pairing a restrained line icon in a fine circular outline with a compact label.

### Local discovery controls

Location context followed by concise browsing tabs; selected location and active state use Discovery Blue #3659e3.

### Event cards

Compact image-led listings with promotional thumbnail, title, date, venue, price, and occasional small status or save controls.

### Destination directory

Lilac Mist #f8f7fa section with destination photography and dense, grouped city and state links.

### Footer

Deep Event Purple #1e0a3c footer with a compact row of low-emphasis legal and utility links.

### Measured component styles

- **Primary button** (“Alabama”): background #ffffff · text #000000 · radius 20px · padding 0px 12px · 600 14px Founders Grotesk R
- **Secondary button** (“Save this event: 18+ SUNDAY ABOUT LAST N”): transparent background · text #4b4d63 · border 1px solid #dbdae3 · radius 40px · padding 7px · 400 16px Founders Grotesk R
- **Link** (“Music”): transparent background · text #3659e3 · radius 0px · padding 0px · 400 16px Founders Grotesk R
- **Input** (“Los Angeles”): transparent background · text #39364f · radius 0px · padding 12px · 400 16px Founders Grotesk R
- **Navigation item** (“Search events”): transparent background · text #585163 · radius 0px · padding 0px · 400 16px Founders Grotesk R

## Do

- Keep the main canvas white and uncluttered.
- Use event photography as the strongest source of color.
- Make local search and location context easy to scan.
- Use blue for interactive links and selected browsing states.
- Keep listing metadata compact beneath clear event titles.
- Separate the destination directory with the pale lavender-gray surface.

## Don't

- Do not turn the whole interface into a dark theme.
- Do not use promotional thumbnail colors as broad UI fills.
- Do not add heavy shadows or stacked card treatments.
- Do not crowd the header with oversized navigation.
- Do not replace the consistent sans-serif with decorative display type.
- Do not make category icons more visually prominent than their labels.

## Agent prompt

Build a new Eventbrite-style discovery page with a quiet white canvas (#ffffff), Founders Grotesk R or a close sans-serif substitute, and a compact, practical header. Use Deep Event Purple (#1e0a3c) for strong headings and dark footer surfaces; keep supporting text in muted plum neutrals. Give location and category links a restrained Discovery Blue (#3659e3), and reserve Signal Coral (#f05537) for small brand accents. Organize the page around a wide image-led hero, evenly spaced category shortcuts, clear local browsing controls, and compact event listings with vivid thumbnails. Use Lilac Mist (#f8f7fa) to distinguish a destination-link directory. Favor thin borders, rounded media, pill controls, generous section breaks, and dense but legible listing details. Avoid heavy shadows and decorative UI treatments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, centered promotional image beneath the global navigation. | Promotional CTA, Live-event discovery | Rounded hero media, Embedded headline, Pill button |
| 2 | category-nav | Eight evenly spaced category shortcuts in a single horizontal row. | Browse by interest, Direct category links | Line icons, Circular outlines, Compact labels |
| 3 | content-feed | Locality and filter controls lead into a dense, image-led two-column event feed. | Location-based discovery, Filter tabs, Save event | Event thumbnails, Compact metadata, Blue active state |
| 4 | recommendations | Pale full-width directory band with destination cards followed by grouped link grids. | Explore destinations, Browse by city or state | City photography, Grouped text links, Carousel controls |

## Source CSS custom properties (selected)

```css
--marm-typography-themed-font-family-body: "Founders Grotesk R";
--marm-typography-themed-font-family-head: "Founders Grotesk R";
--marm-typography-themed-font-family-title: "Founders Grotesk R";
--marm-typography-themed-font-family-display: "Founders Grotesk R";
--marm-typography-themed-font-family-signal: "Founders Grotesk R";
--vk-text-weight-regular: 400;
--vk-text-weight-text-semibold: 500;
--vk-text-weight-bold: 600;
--vk-text-weight-black: 700;
--marm-text-weight-regular: 400;
--marm-text-weight-text-semibold: 500;
--marm-text-weight-bold: 600;
--marm-text-weight-black: 700;
--marm-text-weight-condensed: 700;
--ButtonBorderRadius: 4px;
--ButtonBorderWidth: 2px;
--ButtonBorderColor: #a9a8b3;
--ButtonTextColor: #1e0a3c;
--ButtonBackgroundColor: #fff;
--ButtonBackgroundColorHover: #f8f7fa;
--ButtonBorderColorHover: #6f7287;
--ButtonBackgroundColorActive: #eeedf2;
--ButtonBorderColorActive: #6f7287;
--ButtonPrimaryBackgroundColor: #d1410c;
--ButtonPrimaryTextColor: #fff;
--ButtonPrimaryBackgroundColorHover: #9f2c15;
--ButtonPrimaryBackgroundColorActive: #bd3a20;
--ButtonPrimaryBackgroundColorDisabled: #f8f7fa;
--ButtonTextColorDisabled: #a9a8b3;
--ButtonSecondaryBackgroundColorDisabled: #fff;
--ButtonSecondaryBorderColorDisabled: #eeedf2;
--ButtonGhostTextColor: #3659e3;
--ButtonGhostTextColorHover: #3659e3;
--ButtonGhostTextColorActive: #304fc9;
--ButtonGhostBackgroundColorHover: #f8f7fa;
--ButtonGhostBackgroundColorActive: #eeedf2;
--ButtonGhostBorderColorHover: #f8f7fa;
--ButtonGhostBorderColorActive: #eeedf2;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/eventbrite-com