Logo
The Naluma logo is a circular wave mark paired with the brand name set in Literata. The wave mark carries the full weight of the Visual Identity Direction in a single symbol: concentric bands of color that settle outward from a center, like a sound finding its place. The name itself — nada (primordial sound) and luma (settling, luminance) — describes the same arc, and the logo makes it visible.
The Wave Mark
Section titled “The Wave Mark”Four organic bands flow across a circular field, moving from warm gold at the top through burnt orange, dusk indigo, and soft steel at the base. The progression is deliberate: it mirrors the journey the brand exists to support. Warm, acute intensity at the top gradually settling into cool, open calm. The circle contains and grounds these layers — the experience is bounded, not infinite.
The wave shapes are organic curves, not geometric arcs. This follows the Brand Personality position at 80% Warm: the mark should feel handmade and human, not clinical or precise. The bands flow and overlap naturally, as if painted rather than constructed.
64px 48px 32px 24px 16px #E8B15F Top band — warmth, the starting point of the journey #C9653F Second band — intensity, the acute experience #59618D Third band — depth, the transition toward calm #9AA3BF Bottom band — settled calm, the sound finding its place Logo Colors
Section titled “Logo Colors”The wave mark uses four colors that exist outside the design token system. This is intentional. The token palette is coherently warm-earth — burnt sienna, warm gold, charcoal. The logo is the one place where Naluma’s warmth meets cool blue, representing the full emotional arc from acute distress to settled calm. Adding the blue tones to the token system would imply they’re available for UI use, which they are not. The logo’s cool colors are reserved for the brand mark alone.
The warm colors in the logo (#E8B15F, #C9653F) are close to existing tokens like warm-gold and deep-terracotta but intentionally distinct. The logo lives in the same color family without being constrained to token-exact values.
| Band | Color | Hex | Meaning |
|---|---|---|---|
| Top | Warm Gold | #E8B15F | Warmth, the starting point of the journey |
| Second | Burnt Orange | #C9653F | Intensity, the acute experience |
| Third | Dusk Indigo | #59618D | Depth, the transition toward calm |
| Bottom | Soft Steel | #9AA3BF | Settled calm, the sound finding its place |
Full Logo
Section titled “Full Logo”The full logo places the wave mark to the left of the “Naluma” wordmark set in Literata at bold weight (700). Two color variants exist for the wordmark:
- Light backgrounds:
--primitive-color-burnt-sienna-deep-active(#80442B) — the default, used innaluma-full.svgandnaluma-wordmark.svg - Dark backgrounds:
--primitive-color-warm-gold(#F2C087) — used innaluma-full-dark.svgandnaluma-wordmark-dark.svg
The wave mark icon is identical in both variants — its colors have sufficient contrast on both light and dark surfaces.
Proportion rule: The wordmark cap height aligns approximately with the center of the wave mark. The gap between icon and wordmark equals 15–20% of the icon diameter.
Note: The current wordmark SVG uses a <text> element with Literata as the specified font. For portable use (email signatures, partner materials, social cards), the text should be converted to outlined paths in a vector editor. The <text> version works correctly wherever Literata is loaded — the documentation site, the WordPress theme, and any environment that imports Google Fonts.
Monochrome Versions
Section titled “Monochrome Versions”When full color isn’t available — one-color print, watermarks, loading states, partner co-branding with color restrictions — use the monochrome variant. The four bands are rendered as varying opacities of a single currentColor, preserving the wave structure without introducing brand colors into a restricted palette.
The monochrome icon inherits its color from the parent element’s color property. On a light background it reads as dark bands; on dark backgrounds it inverts automatically. No separate “reversed” asset is needed — currentColor handles both.
Clear Space and Minimum Size
Section titled “Clear Space and Minimum Size”Clear space
Section titled “Clear space”The minimum clear space around the wave mark equals 25% of the icon’s diameter on all sides. For the full logo, extend the same clear space from the rightmost edge of the wordmark. No other visual element — text, imagery, UI chrome — should intrude into this zone.
Minimum size
Section titled “Minimum size”The wave mark remains legible down to 24px on screen — below this, the band structure collapses and the mark reads as a solid dot. For print, the minimum is 10mm diameter.
The full logo (icon + wordmark) requires at least 120px width on screen to keep the wordmark legible. In contexts where that width isn’t available, use the wave mark alone.
Favicon and Meta Assets
Section titled “Favicon and Meta Assets”The documentation site’s favicon is the wave mark, served as SVG for sharp rendering at any resolution. The design system also generates PNG variants for contexts that require raster images:
| Asset | File | Size | Use |
|---|---|---|---|
| SVG favicon | favicon.svg | Vector | Browser tabs, bookmarks |
| Apple touch icon | apple-touch-icon.png | 180 x 180 | iOS home screen |
| Android icons | android-chrome-*.png | 192 + 512 | Android PWA / home screen |
| Favicon PNG | favicon-32x32.png | 32 x 32 | Legacy browser fallback |
| OG image | og-image.png | 1200 x 630 | Social link previews |
Asset Inventory
Section titled “Asset Inventory”All logo assets are available in the repository under assets/logo/ (source files) and served from /images/logo/ on the documentation site.
| File | Type | Size | Description |
|---|---|---|---|
naluma-icon.svg | SVG | Vector | Wave mark, 4 color bands |
naluma-icon.png | PNG | 512 x 512 | Wave mark, 4 color bands |
naluma-icon-mono.svg | SVG | Vector | Wave mark, monochrome with opacity layers |
naluma-icon-mono.png | PNG | 512 x 512 | Wave mark, monochrome |
naluma-full.svg | SVG | Vector | Wave mark + Naluma wordmark |
naluma-full.png | PNG | 1200 x 240 | Wave mark + Naluma wordmark |
naluma-full-mono.svg | SVG | Vector | Full logo, monochrome |
naluma-full-mono.png | PNG | 1200 x 240 | Full logo, monochrome |
naluma-wordmark.svg | SVG | Vector | Naluma wordmark in Literata |
naluma-wordmark.png | PNG | 880 x 200 | Naluma wordmark |
naluma-full-dark.svg | SVG | Vector | Full logo, dark-background variant |
naluma-full-dark.png | PNG | 1200 x 240 | Full logo, dark-background variant |
naluma-wordmark-dark.svg | SVG | Vector | Wordmark, dark-background variant |
naluma-wordmark-dark.png | PNG | 880 x 200 | Wordmark, dark-background variant |
favicon.svg | SVG | Vector | Browser tabs, bookmarks |
favicon.png | PNG | 128 x 128 | Favicon raster export |
apple-touch-icon.png | PNG | 180 x 180 | iOS home screen |
android-chrome-192x192.png | PNG | 192 x 192 | Android PWA / home screen |
android-chrome-512x512.png | PNG | 512 x 512 | Android PWA / home screen |
favicon-32x32.png | PNG | 32 x 32 | Legacy browser fallback |
og-image.png | PNG | 1200 x 630 | Social link previews |
Misuse
Section titled “Misuse”The logo is a fixed asset. Do not modify it.
- Don’t rotate or skew the wave mark — the bands represent a specific directional flow (warm above, cool below).
- Don’t substitute colors — the four-band palette is the logo’s identity. Do not recolor individual bands or apply brand token colors to the mark.
- Don’t add effects — no drop shadows, glows, gradients, bevels, or outlines. The mark is designed to stand on flat surfaces.
- Don’t stretch or distort — always scale proportionally.
- Don’t place on busy backgrounds — the wave mark needs a clean surface. If placing over photography, ensure sufficient contrast with a solid or semi-transparent backing.
- Don’t crop the circle — the circular boundary is part of the mark. Partial crops break the containment metaphor.
- Don’t animate the bands — the logo represents arrival and stillness, not motion.