Eventbrite以干净明亮的界面搭配鲜明的活动图片，让本地活动一目了然、方便浏览。紧凑的顶部导航、分类入口、活动卡片和地点链接，帮助访客从灵感快速找到具体选择。
North star · Keep the interface quiet and highly scannable so event photography and clear local discovery controls carry the visual energy.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Deep Event Purple
#1e0a3c
High-contrast headings and the solid footer establish the brand’s darkest visual anchor.
强调色
Discovery Blue
#3659e3
Interactive links and selected location or browsing states.
Signal Coral
#f05537
Small brand and interface accent; the coral event imagery is not the core palette.
Apricot Glow
#f2bf8d
Warm accent observed in media; treat as imagery detail, not a page-wide UI color.
表层色
Gallery White
#ffffff
Primary canvas for the header, hero surroundings, category navigation, and event feed.
Lilac Mist
#f8f7fa
Pale background band behind destination, city, and state link collections.
中性色
Muted Aubergine
#3a3247
Secondary text and headings where softer contrast is preferable to black.
Listing Black
#000000
Strong text and control contrast, including dark button and link treatments.
Quiet Divider
#dbdae3
Thin borders around controls and subtle separators in navigation and footer.
Slate Plum
#585163
Muted navigation labels and supporting interface text.
Footer Silver
#c2c2cc
Low-emphasis footer text against the dark purple footer.
Soft Rule
#eeedf2
Subtle interface and navigation border tone.
Ink Violet
#39364f
Search and location input text plus darker navigation and heading details.
Night Plum
#261b36
Occasional deep text tone; supports the dark type range rather than a large surface.
功能色
Purple Veil
#291546
Dark stop within the measured inverse-purple gradient; not a dominant flat page color.
Dusk Violet
#6b5d7e
Lighter measured gradient stop, supporting the purple overlay treatment.
Periwinkle Line
#dee5ff
Pale blue border tone detected in interface details, not a major section fill.
文字 背景 对比度 WCAG #000000 Listing Black#ffffff Gallery White21:1 AAA #000000 Listing Black#1e0a3c Deep Event Purple1.16:1 不达标 #000000 Listing Black#f8f7fa Lilac Mist19.68:1 AAA #3a3247 Muted Aubergine#ffffff Gallery White12.16:1 AAA #3a3247 Muted Aubergine#1e0a3c Deep Event Purple1.48:1 不达标 #3a3247 Muted Aubergine#f8f7fa Lilac Mist11.39:1 AAA
字体 字号阶梯：Perfect Fourth（比例约 1.333，正文 18px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Founders Grotesk R 网络字体 · 字重 500 / 600 / 400 / 700 · 占比 100%
免费替代：Inter
Site-wide headings, body copy, navigation, event listings, links, and controls.
角色 示例 字号 字重 行高 字距 一级标题 Primary page or feed heading, such as the local events title.
Eventbrite
32px 600 1.25 0 二级标题 Section headings for destination and discovery groups.
The quick brown fox 敏捷的狐狸
24px 600 1.33 0.01em 正文 Event titles, listing details, and primary supporting copy.
The quick brown fox 敏捷的狐狸
18px 500 1.33 0.014em 辅助文字 Compact event metadata, category labels, and secondary details.
The quick brown fox 敏捷的狐狸
14px 600 normal 0 按钮 Search, location, and other actionable control labels.
The quick brown fox 敏捷的狐狸
14px 600 normal 0 导航 Header links and category or browsing navigation.
The quick brown fox 敏捷的狐狸
14px 500 1.43 0 链接 Blue linked categories, locations, and destination names.
The quick brown fox 敏捷的狐狸
14px 600 normal 0
间距与布局 基准单位 4px · 密度：紧凑
36px 版块间距
8px 元素间距
— 卡片内边距
1272px 内容最大宽度
1px
4px
7px
8px
10px
12px
16px
24px
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.
圆角与层次 没有测到阴影：页面是扁平的，层次靠底色和描边区分。
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 4 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 | ` | `--color-gallery-white` | surface | Primary canvas for the header, hero surroundings, category navigation, and event feed. |
| Deep Event Purple | ` | `--color-deep-event-purple` | brand | High-contrast headings and the solid footer establish the brand’s darkest visual anchor. |
| Muted Aubergine | ` | `--color-muted-aubergine` | neutral | Secondary text and headings where softer contrast is preferable to black. |
| Lilac Mist | ` | `--color-lilac-mist` | surface | Pale background band behind destination, city, and state link collections. |
| Listing Black | ` | `--color-listing-black` | neutral | Strong text and control contrast, including dark button and link treatments. |
| Quiet Divider | ` | `--color-quiet-divider` | neutral | Thin borders around controls and subtle separators in navigation and footer. |
| Purple Veil | ` | `--color-purple-veil` | semantic | Dark stop within the measured inverse-purple gradient; not a dominant flat page color. |
| Dusk Violet | ` | `--color-dusk-violet` | semantic | Lighter measured gradient stop, supporting the purple overlay treatment. |
| Discovery Blue | ` | `--color-discovery-blue` | accent | Interactive links and selected location or browsing states. |
| Slate Plum | ` | `--color-slate-plum` | neutral | Muted navigation labels and supporting interface text. |
| Periwinkle Line | ` | `--color-periwinkle-line` | semantic | Pale blue border tone detected in interface details, not a major section fill. |
| Footer Silver | ` | `--color-footer-silver` | neutral | Low-emphasis footer text against the dark purple footer. |
| Soft Rule | ` | `--color-soft-rule` | neutral | Subtle interface and navigation border tone. |
| Ink Violet | ` | `--color-ink-violet` | neutral | Search and location input text plus darker navigation and heading details. |
| Night Plum | ` | `--color-night-plum` | neutral | Occasional deep text tone; supports the dark type range rather than a large surface. |
| Signal Coral | ` | `--color-signal-coral` | accent | Small brand and interface accent; the coral event imagery is not the core palette. |
| Apricot Glow | ` | `--color-apricot-glow` | accent | Warm accent observed in media; treat as imagery detail, not a page-wide UI color. |
### Semantic aliases
`--color-canvas` → ` (Gallery White) · `--color-surface` → ` (Deep Event Purple) · `--color-surface-2` → ` (Lilac Mist) · `--color-text` → ` (Listing Black) · `--color-text-muted` → ` (Muted Aubergine) · `--color-text-subtle` → ` (Slate Plum) · `--color-border` → ` (Quiet Divider) · `--color-accent` → ` (Discovery Blue) · `--color-accent-2` → ` (Signal Coral) · `--color-accent-3` → ` (Apricot Glow)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 21:1 | AAA |
| ` | ` | 1.16:1 | fail |
| ` | ` | 19.68:1 | AAA |
| ` | ` | 12.16:1 | AAA |
| ` | ` | 1.48:1 | fail |
| ` | ` | 11.39:1 | AAA |
| ` | ` | 7.58:1 | AAA |
| ` | ` | 2.38:1 | fail |
| ` | ` | 7.1:1 | AAA |
| ` | ` | 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 ### Event cards
Compact image-led listings with promotional thumbnail, title, date, venue, price, and occasional small status or save controls.
### Destination directory
Lilac Mist ### Footer
Deep Event Purple ### Measured component styles
- **Primary button** (“Alabama”): background ## 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 (## 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: 
