Cardbop brand system

Canonical logo, variants, and palette — the single source of truth used by the card renderer, the header, and the favicon. Three-card totem with the mint sparkle; card in white, bop in mint.

Variants

horizontal — header, lockups

mark — favicon, compact

stacked — card back

Sizes (horizontal)

20px

28px

40px

56px

On backgrounds (contrast check)

Note: the logo is designed light-on-dark. On light backgrounds the white cards lose contrast — use the mark sparingly there, or a dark container.

Favicon / app icon

16px

32px

48px

Served from src/app/icon.svg — appears next to the URL in the browser tab.

Palette

Background

#0D1117

Card surface

#161B22

Info panel (UI)

#1A2332

Card ink

#071014

Mint / teal

#4ECDC4

Text muted

#8B949E

Download (editable SVG)

Horizontal lockup — /brand/cardbop-logo-horizontal.svg
Mark only — /brand/cardbop-logo-mark.svg
Stacked — /brand/cardbop-logo-stacked.svg