RAPIDA UI

Logo

The RAPIDA logomark and wordmark system. Inline SVG for zero HTTP requests — critical for low-bandwidth crisis zones.

Variants

Mark Only

variant="mark"

Full

RAPIDA
variant="full"

Responsive

variant="responsive"

Text hidden on mobile

Size Scale

size="xs"

20px — Inline, badges

size="sm"

24px — Compact header

size="md"

32px — Default header

size="lg"

40px — Dashboard

size="xl"

56px — Onboarding

size="2xl"

80px — Splash

Color Usage

The logo inherits currentColor. Apply color via the parent's text class.

RAPIDA
Light background
RAPIDA
Dark background
RAPIDA
Page background
RAPIDA
Success context

Favicon

SVG favicon at /icons/favicon.svg. Uses rapida-blue-700 (#2e6689) baked in.

RAPIDA favicon RAPIDA favicon RAPIDA favicon 32px · 24px · 16px

Low-Bandwidth Performance

  • Inline SVG — zero HTTP requests, renders immediately with the HTML
  • ~500 bytes total — smaller than a single icon font glyph
  • currentColor inheritance — no separate color assets needed
  • Vector — renders crisp at any resolution, any pixel density
  • No JavaScript dependency — renders even if scripts fail to load

Usage

<x-atoms.logo size="md" variant="responsive" class="text-rapida-blue-700" />

<x-atoms.logo size="2xl" variant="full" class="text-rapida-blue-900" />

<x-atoms.logo size="lg" variant="full" class="text-white" />

<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">