Brand

The official boodoo brand assets: the logo lockup, the abstract icon, color tokens, and usage guidelines. All assets live in boodoo-brand-assets/ and are also mirrored in this documentation site.

Logo lockup

Use the full lockup for websites, documentation, presentations, and marketing. It combines the abstract icon, the "boodoo" wordmark, and the "DESIGN FRAMEWORK" tagline.

boodoo-logo.svg · boodoo-logo-primary.png (white) · boodoo-logo-primary-transparent.png · boodoo-logo-primary-dark.png

<img src="../../assets/brand/boodoo-logo.svg" alt="boodoo logo lockup" class="img-fluid brand-logo-preview">
<p class="text-muted small mt-2 mb-0">boodoo-logo.svg · boodoo-logo-primary.png (white) ·
  boodoo-logo-primary-transparent.png · boodoo-logo-primary-dark.png</p>

Icon

The abstract "b" icon works alone for favicons, app icons, package avatars, GitHub avatars, and compact navigation. It's available as SVG and PNG from 16px to 512px.

<img src="../../assets/brand/boodoo-icon.svg" alt="boodoo icon" width="96" height="96">
<img src="../../assets/brand/boodoo-icon-32.png" alt="32px icon" width="32" height="32">
<img src="../../assets/brand/boodoo-icon-48.png" alt="48px icon" width="48" height="48">
<img src="../../assets/brand/boodoo-icon-64.png" alt="64px icon" width="64" height="64">
<img src="../../assets/brand/boodoo-icon-128.png" alt="128px icon" width="64" height="64">
<img src="../../assets/brand/boodoo-icon-192.png" alt="192px icon" width="80" height="80">
<img src="../../assets/brand/boodoo-icon-256.png" alt="256px icon" width="96" height="96">
<img src="../../assets/brand/boodoo-icon-512.png" alt="512px icon" width="128" height="128">

Brand colors

These tokens map to the framework's theme: --boodoo-primary: #7c3aed, --boodoo-secondary: #5b21e6, --boodoo-dark: #17135f, and the grays are derived from #11143d/#5c6280.

Banner & social

boodoo-banner.png (1600×400) · boodoo-og-image.png (1200×630, used for Open Graph / social previews)

<img src="../../assets/brand/boodoo-banner.png" alt="boodoo banner" class="img-fluid rounded">
<p class="text-muted small mt-2 mb-0">boodoo-banner.png (1600×400) · boodoo-og-image.png (1200×630, used for Open Graph /
  social previews)</p>

Usage guidelines

• Use the full lockup for websites, documentation, presentations, and marketing.
• Use the icon alone for favicon, app icon, npm/package avatar, GitHub avatar, and compact navigation.
• Keep clear space around the logo at least equal to the height of the icon's inner opening.
• Do not stretch, skew, rotate, recolor, or add effects to the logo.
• Typography: use a modern geometric sans-serif — Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif (which boodoo uses by default).

All assets