Skip to main content

Global Design System

Card system

Canonical cards per module — extracted, deduplicated, reusable everywhere.

Complete

One canonical card per module. Extracted from the listing surface. Reused everywhere the module entity appears — including cross-module Related Ecosystem Signals. One update to a canonical card cascades to every surface that renders it.

The 7 canonical cards

<app-event-card variant="…">
Calendar events. 8 variants: featured / editorial-pick / deadline / country / related / coverage / compact / default.
<app-founder-card>
Founder profiles. Identity avatar + role + featured + badge stack. Optional `elevated` for spotlight context.
<app-opportunity-card>
Opportunities. Status-tinted strip + deadline pill + organizer + Apply CTA.
<app-founder-file-card>
Founder Files. 3:4 cover with editorial SVG fallback + Best For block + Sponsor mini-row + Download CTA.
<app-startup-card>
Startup Showcase. 16:9 logo canvas + sector/stage chips + verified badge.
<app-editorial-card>
Editorial article. Type eyebrow + title + dek + author + reading time.
<app-coverage-card>
Events Coverage. 16:9 cover + coverage-kind chip + author/date. Anchors back to its parent event.

Visual contract — applies to ALL cards

  • Sharp `rounded-md` corners (6px). No `rounded-xl`, `rounded-2xl`, or `rounded-3xl`.
  • 1px `border-border` default. `translateY(-1px)` + `border-primary/40` on hover.
  • No shadows by default. Hover may add a soft purple-tinted shadow at 12% opacity max.
  • Card body padding: `p-4 sm:p-5` (16px → 20px responsive). Smaller padding only for compact variants.
  • Image aspect ratios documented per card (see Image Ratios topic).