Color palette
The site's brand palette, drawn from the issuer's mark and live site. Every text/background pairing clears WCAG AA contrast. Swatches read the live --color-* tokens, so a rebrand updates this page automatically.
primary-700
—
Primary brand — links, headings, primary buttons
primary-800
—
Darker brand — headings on light
primary-900
—
Hero / footer / dark sections
primary-50
—
Pale background tint
accent-500
—
Accent — fills, accents (white text)
accent-700
—
Accent for text on white (AA)
gold-500
—
Warm highlight — featured / decorative
ink
—
Default body text
ink-700
—
Strong body / sub-headlines
ink-500
—
Secondary text, captions, meta
Typography
One sans family across the board, bundled (no network request). Calm chrome so the content and photography carry the energy.
Buttons
Primary, secondary, and on-dark variants. Consistent radius, weight, and hover lift across the site.
Primary actions
Secondary
On dark
Badges & chips
For categories, status, and inline metadata.
Eyebrow labels
Tiny uppercase labels above a headline — used on every hero, section, and card.
Accent label
Accent
Primary label
Primary
Gold label
Gold on dark
Cards
The hover-lift card (used for news, events, listings) plus the tinted info card.
Category · Date
Hover-lift content card
Image-topped card with a lift + border-color change on hover. The standard for news, events, and listing tiles.
Default card
White surface, subtle border. For content blocks and sidebar panels.
Tinted info card
Pale-tint surface for notices and contextual help — calmer than a full alert.
Form fields
Text, email, select, and textarea inputs. Label-aligned, required marker auto-renders, consistent focus ring.
Icons
Lucide icon set throughout — open-source, consistent stroke width, accessible naming. No emoji, no mixed icon families.
Live component patterns
The composed patterns — header, footer, hero, breadcrumbs, the AI assistant — appear in context across the live site. Replace the links below with the issuer's real pages.
Accessibility
Every component on this page passes axe-core's WCAG 2.2 AA rule set. Every color combination clears 4.5:1 contrast (most clear 7:1 AAA). The site-wide accessibility panel — text size, contrast, underline links, reduce motion — opens from the floating accessibility button.