Brand · Logo
Bloom mark
v1.1 · Locked · HabañeroSix petals at 60° intervals, alternating large and small, tilted 12°. No outer ring. A soft luminous bindu. Locked palette: Habañero.
Hover any mark to download as SVG. Brand assets for production (path-based wordmark, favicon set, app icons) are bundled below.
Primary mark · Habañero
The locked mark. Use this everywhere by default.
Size showcase
The mark at every size. Use the simplified favicon mark for ≤ 32 px contexts.
Monochrome variants
For stamps, watermarks, single-colour print, dark-mode applications.
Wordmark
“Espanda” rendered live in Ranade Bold for the design-system website. Path-based versions (font-independent) are in the brand-assets section below.
Lockups
Bloom + wordmark, horizontal and vertical.
Brand · Motion library →
Nine motion variants
The full motion library lives here — four entrance one-shots, five ambient loops, plus duration / easing tokens, the library stack, motion principles, and the iconography pairing.
Brand assets · production
Locked production files. Path-based wordmark for portability, full favicon set for the product. All living in public/brand/.
Path-based wordmark
Glyphs converted to real SVG paths via scripts/wordmark-to-paths.py. No web font required to render. The current build uses Nimbus Sans Bold as a substitute. Re-run the script with your local Ranade .otf file to swap to the authentic typography.
wordmark-ink.svg SVGPath-based wordmark, ink colour. ~2.4 KB.
wordmark-cream.svg SVGPath-based wordmark, cream colour. For dark surfaces.
# Re-generate the wordmark with your local Ranade font: python3 scripts/wordmark-to-paths.py \ --font /path/to/Ranade-Bold.otf \ --text Espanda \ --output public/brand/wordmark-ink.svg \ --color "#0F1729" --size 96
Favicon & app-icon set
Full bloom for ≥ 64 px (apple-touch-icon, android-chrome). Simplified three-petal mark for ≤ 48 px (favicon-16/32/48, .ico). Generated via scripts/generate-favicons.py.
| Preview | File | Size | Use | Download |
|---|---|---|---|---|
 | favicon.svg | Vector | Master scalable mark — full bloom in Habañero. Use for modern browsers. | SVG/PNG |
 | favicon-simplified.svg | Vector | Three-petal simplified mark — for the smallest sizes (16, 32 px). | SVG/PNG |
| favicon.ico | Multi | Multi-resolution Windows / legacy-browser icon (16, 32, 48 px combined). | SVG/PNG | |
 | favicon-16.png | 16 × 16 | PNG variant for browser-tab fallback at 16 px. | SVG/PNG |
 | favicon-32.png | 32 × 32 | PNG variant for browser-tab fallback at 32 px. | SVG/PNG |
 | favicon-48.png | 48 × 48 | PNG variant for high-DPI legacy browsers. | SVG/PNG |
 | apple-touch-icon.png | 180 × 180 | iOS home-screen icon. Full bloom in Habañero. | SVG/PNG |
 | android-chrome-192.png | 192 × 192 | Android home-screen icon. Full bloom. | SVG/PNG |
 | android-chrome-512.png | 512 × 512 | Android splash-screen / PWA icon. Full bloom. | SVG/PNG |
HTML — drop into your <head>
<link rel="icon" type="image/svg+xml" href="/brand/favicon.svg" /> <link rel="icon" type="image/png" sizes="32x32" href="/brand/favicon-32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/brand/favicon-16.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/brand/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
The design-system website itself is now wired to use these via the Next.js app/layout.tsx metadata. Look at your browser tab.
Alternative palettes · not for daily use
Habañero is the locked default. The three alternatives below stay available as design-exploration tools (e.g. for special campaigns, internal moods, or future palette refreshes) — they don't ship as production brand assets.
Strawberry
Moody pink-and-navy. Editorial weight.
Aurora
Highest brand-energy. Royal magenta + lilac.
Warm Earth
Burning Flame + Truffle. Grounded, editorial.
Logo locked at v1.1
Habañero palette · 6-petal bloom · 12° tilt · soft bindu · path-based wordmark · full favicon set. Next chapter: components, one primitive at a time.
To regenerate any asset locally: npm run wordmark (re-extracts the wordmark from your chosen font), npm run favicons (rebuilds the entire favicon set).