Logo

Implemented

Original ePassLive logo with 4 elements: QR Code (mode-adaptive), Code Scanner Frame (mode-adaptive), Teal 'e' lettermark (brand-locked), PSSLIVE wordmark (mode-adaptive). Theme-aware via --logo-fg token.

Categoryatoms

Sourcepatterns/atoms/logo.html

AI HintOfficial ePassLive lockup (QR + scanner frame + brand-locked teal e + wordmark) at sm/md/lg. Theme-aware via currentColor except the teal e; renders as a link when href is set.

Logo component.

Logo

design-system

Logo component preview and API reference.

Props

Preview

Logo

Prop

Type

Required

Default

Description

size

'sm' | 'md' | 'lg'

Optional

'md'

No description.

href

string

Optional

—

No description.

ariaLabel

string

Optional

'ePassLive'

Synced from source — no interface JSDoc yet; document on `Logo.tsx`.

Quick use:<Logo />

Accessibility

ARIA roleimg

Usage

Import

tsxSnippet

import { Logo } from "@epasslive/design-system"

Example 1

tsxSnippet

<Logo />

Example 2

tsxSnippet

<Logo variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms