Skip to main content

BrandSurface

Implemented

ADR-031 accent surface atom — one of the three valid accent contexts. Tinted variant (10% accent fill + 50% border, radius-lg) for light backgrounds; pill variant (solid surface-card fill + 50% border + shadow, radius-full) for surfaces over images/photos where bare tints vanish (§89.1). Attaches a brand hue to a stable identity.

Categoryatoms
Sourcecomponents/atoms/BrandSurface/BrandSurface.tsx
AI HintDecorative accent surface for one brand hue. Tinted on light backgrounds, pill over images. Compose inside cards, sidebars, and meta rows.

ADR-031 accent surface atom — tinted surface for light backgrounds, solid pill for surfaces over images. FR-CA : Surface d’accent décorative (teinte légère ou pilule pleine).

BrandSurface

Display atom (Family 2 — Tier 1)

One of the three valid ADR-031 accent contexts. Attach the accent to a stable identity (fixed action, role, column, menu item).

Salle Wilfrid-Pelletier20 mars 2026ConcertÀ partir de 55 $

This component supports light and dark mode.

Usage

import { BrandSurface } from '@epasslive/design-system'

// Tinted — light background (help card icon tile)
<BrandSurface accent="teal" className="inline-flex h-10 w-10 items-center justify-center">
  <PhoneIcon />
</BrandSurface>

// Pill — over an event photo (solid fill + shadow stays readable)
<BrandSurface accent="indigo" variant="pill" as="span" className="px-3 py-1 text-ep-xs">
  {venueName}
</BrandSurface>

Accessibility

  • Brand hues on text are decorative-grade (ADR-031 §2) — only text-ep-text-teal may carry meaning-bearing text. Duplicate meaningful content accessibly (adjacent visible text or an aria-label on a wrapper).
  • Not aria-hidden by default — the surface can wrap meaningful content; decorative consumers decide.
  • Use variant="pill" over images/photos — bare 10-15% tints vanish (§89.1).

Props

Prop
Type
Default
Description
accent*
'teal' | 'indigo' | 'amber' | 'pink'
—

Brand accent — must attach to a stable identity, never index % 4 cycling.

variant
'tinted' | 'pill'
tinted

Tinted (10% fill + 50% border) for light surfaces; pill (solid surface-card + shadow) for surfaces over photos.

as
'div' | 'span'
div

Rendered element — span for inline chips.

className
string
—

Extra utility classes appended after the recipe classes.

children
React.ReactNode
—

Surface content.

Props

Preview

BrandSurface

Prop
Type
Required
Default
Description
accent
'teal' | 'indigo' | 'amber' | 'pink'
Required
—

Brand accent (ADR-031 §1). Must attach to a stable identity — fixed action, role, column, or menu item. Never index % 4 cycling over a dynamic collection (ADR-031 §3).

variant
'tinted' | 'pill'
Optional
'tinted'

tinted = 10% fill + 50% border for light surfaces; pill = solid surface-card + shadow for surfaces over photos.

as
'div' | 'span'
Optional
'div'

Rendered element — span for inline chips.

className
string
Optional
—

Extra utility classes appended after the recipe classes.

children
React.ReactNode
Optional
—

Surface content.

Quick use:<BrandSurface />

Accessibility

ARIA

1 rule

ADR-031 §2, ADR-019

Brand hues on text are decorative-grade — meaningful content must be duplicated accessibly (adjacent visible text or aria-label on a wrapper); only text-ep-text-teal may carry meaning-bearing text

a11y

1 rule

ADR-031 §4.1, mega-plan §89.1

Use variant='pill' over images/photos — bare 10-15% tints vanish over photos

Type

1 rule

ADR-031 §3

accent must map to a stable identity, never arbitrary cycling

Usage

Import

tsxSnippet
import { BrandSurface } from "@epasslive/design-system"

Example 1

tsxSnippet
<BrandSurface accent="teal" className="inline-flex h-10 w-10 items-center justify-center"><PhoneIcon /></BrandSurface>

Example 2

tsxSnippet
<BrandSurface accent="indigo" variant="pill" as="span" className="px-3 py-1 text-ep-xs">{venueName}</BrandSurface>

Anti-patterns

— Do not attach accents via index % 4 over dynamic collections — accent signals persistent identity

— Do not use a tinted variant over photos — use pill

— Do not put meaning-bearing text in a brand hue without an accessible duplicate

Design System v4.1.0 | ePassLive