Colors

The semantic color tokens that drive every UI surface in the ePassLive design system.

All 68 color tokens defined in packages/design-system/globals.css. Hex values are click-to-copy. The W/D badges show contrast against white (#FFFFFF) and dark (#1A2332) respectively. Re-run `pnpm --filter storefront docs:colors` after any token change.

Brand

ep-teal

W:3.1D:5.1

ep-blue

W:4.8D:3.3

ep-cyan

W:2.4D:6.5

ep-amber

W:3.2D:5.0

ep-indigo

W:4.2D:3.7

ep-pink

W:3.5D:4.5

Text

ep-text-heading

#F0F0F0

W:15.8D:1.0

ep-text-body

#D1D5DB

W:7.6D:2.1

ep-text-muted

#939393

W:5.5D:2.9

ep-text-inverse

W:1.0D:15.8

ep-text-teal

#009FCA

W:5.7D:2.8

ep-text-link

#009FCA

W:4.8D:3.3

Surfaces

ep-bg

#1A1A1A

W:1.0D:15.8

ep-bg-secondary

#1E293B

W:1.1D:15.1

ep-bg-tertiary

#0F172A

W:1.1D:14.4

ep-bg-3

#2D3748

W:1.2D:13.6

ep-bg-page-dark

W:19.8D:1.3

ep-surface-card

#1E293B

W:1.1D:15.1

ep-surface-elevated

#252525

W:1.0D:15.8

ep-surface-navy

W:15.8D:1.0

Borders

ep-border

#2D3748

W:1.2D:12.8

ep-border-subtle

#1E293B

W:1.1D:14.3

ep-border-strong

#3B4759

W:1.5D:10.7

Semantic

ep-success

#22C55E

W:3.3D:4.8

ep-warning

#FBBF24

W:3.2D:5.0

ep-error

#EF4444

W:4.8D:3.3

ep-info

#38BDF8

W:4.1D:3.9

ep-semantic-error

#EF4444

W:4.8D:3.3

ep-semantic-warning

#FBBF24

W:3.2D:5.0

Semantic tints

ep-semantic-success-tint

#123527

W:1.1D:13.9

ep-semantic-success-fg

#6EE7B7

W:5.5D:2.9

ep-semantic-success-tint-border

#1D4E38

W:1.3D:12.3

ep-semantic-warning-tint

#3A2A08

W:1.1D:14.2

ep-semantic-warning-fg

#FCD34D

W:7.1D:2.2

ep-semantic-warning-tint-border

#55400F

W:1.3D:12.7

ep-semantic-error-tint

#3B1516

W:1.2D:12.9

ep-semantic-error-fg

#FCA5A5

W:6.5D:2.4

ep-semantic-error-tint-border

#571E1F

W:1.4D:10.9

ep-semantic-info-tint

#122A4D

W:1.2D:12.9

ep-semantic-info-fg

#93C5FD

W:6.7D:2.4

ep-semantic-info-tint-border

#1E3A5F

W:1.4D:11.1

Semantic backgrounds

ep-semantic-success-bg

W:9.7D:1.6

ep-semantic-error-bg

W:10.0D:1.6

ep-semantic-info-bg

W:9.8D:1.6

Button primary

ep-btn-primary-bg

W:5.7D:2.8

ep-btn-primary-hover

#008095

W:8.3D:1.9

Neutral

ep-neutral-500

#9CA3AF

W:4.8D:3.3

Chart palette

chart-merch

W:2.1D:7.3

chart-ticket

W:4.8D:3.3

chart-package

W:4.2D:3.7

chart-pass

W:3.1D:5.1

chart-free

W:3.5D:4.5

Barcode

ep-barcode-fg

#FFFFFF

W:19.8D:1.3

ep-barcode-bg

#0A0A0A

W:1.0D:15.8

ep-barcode-quiet-zone

#0A0A0A

W:1.0D:15.8

Overlay

ep-overlay-scrim-light

W:19.8D:1.3

ep-overlay-trace

W:1.0D:15.8

ep-overlay-faint

W:1.0D:15.8

ep-overlay-soft

W:1.0D:15.8

ep-overlay-medium

W:1.0D:15.8

ep-overlay-scrim

W:19.8D:1.3

ep-overlay-border-subtle

W:1.0D:15.8

ep-overlay-border-medium

W:1.0D:15.8

ep-overlay-text-strong

W:1.0D:15.8

ep-overlay-text-muted

W:1.0D:15.8

ep-overlay-text-subtle

W:1.0D:15.8

ep-overlay-text-icon

W:1.0D:15.8

QR

ep-qr-bg

W:1.0D:15.8

Contrast Requirements

W = contrast against white (#FFFFFF), D = contrast against dark (#1A2332)
● Green = AA (4.5:1+) / AAA (7.0:1+)
● Yellow = AA large text only (3.0:1+)
● Red = Does not meet minimum

Swatches with a ◉ marker are theme-stable — the same hex value in light and dark mode by design (brand colors, semantic backgrounds, dark surfaces). Split swatches show light (left) vs dark (right) variants.

For the light/dark pair inventory with per-token WCAG notes, see the Dark Mode foundation page.

Brand Accent Surfaces

Four brand hues — teal, indigo, amber, pink — are used decoratively on accent surfaces. Every accent must attach to a stable identity: a fixed action, a role, a column, or a menu item. Formalized in ADR-031.

The AA rule — decorative is not meaning-bearing

ADR-031 rule 2: decorative latitude stops where meaning begins.

Meaning-bearing text: only text-ep-text-teal — the single accent-text token that passes WCAG AA.
Other brand hues on text: aria-hidden decorative use only, or a solid bg-ep-surface-card chip with the info duplicated accessibly.
Interactive CTAs use bg-ep-btn-primary (5.70:1 on white) — never raw bg-ep-teal (3.08:1).

Context 1 — BrandSurface

Tinted variant, for light backgrounds: bg-ep-{accent}/10 + a /50 border + accent foreground. Every opacity step must be registered via the alphaVariants() factory — an unregistered class compiles to nothing (ghost utility).

teal

indigo

amber

pink

Solid variant, for surfaces over photos: bg-ep-surface-card + accent border + shadow. Bare 10–15% tints vanish over event photos (the §89.1 readability blocker) — the solid pill stays readable over any image.

teal

indigo

amber

pink

Context 2 — BrandRibbon

4px — above the header

1px — top of the footer

aria-hidden, decorative bookend above the header / at the top of the footer.

Context 3 — AccentUnderline

Events

Support

Company

Newsletter

Stable identity attachments

Stable identity attachments
Identity	Accent
Header icon hovers
`search`	teal
`cart`	indigo
`theme`	amber
`user-chip`	pink
Homepage help cards
`phone`	teal
`email`	indigo
`hours`	amber
Footer columns
`events`	teal
`support`	indigo
`company`	amber
`newsletter`	pink
Sidebar menu items
`menu item [n]`	cycles per stable item position

Each accent must map to a stable identity. Index-cycling is permitted only when the items themselves are stable identities (sidebar menu items).

Do not do this

['teal','indigo','amber','pink'][idx % 4]
Arbitrary index-cycling over a dynamic collection — position is not an identity.
<CategoryCard accent={event.category} />
Accent attached to non-existent data — ep_event has no category field.
<button className="bg-ep-teal">Subscribe</button>
CTA button on raw bg-ep-teal — 3.08:1, fails WCAG AA.