Logo System
Primary (navy/orange), secondary (indigo/periwinkle), and inverse mark variants, symbol/wordmark/lockup usage, clear space, minimum size, and favicon/app-icon guidance. New/proposed — not yet through DS governance review; see the page for full status.
Owner decision — 2026-08-21 (updated same day)
Navy/orange is governed primary
Indigo/periwinkle was chosen first, then reversed the same day after the live nexwell-website header logo was found to already use navy/orange — matching the hue family of the existing color.brand.primary/color.brand.accent tokens. Indigo/periwinkle is now the governed secondary/alternate. See docs/foundations/logo-system/README.md and docs/foundations/logo-system/token-followup.md in the repository for the full provenance, fidelity, and token-reconciliation notes — this page summarizes the governed usage rules and shows the live component.
Status: new / proposed — not yet through DS governance review (typed component spec, checkpoint review, dual approval). The ring/dot glyph seen in some reference exports is intentionally excluded pending provenance confirmation.
Live component
Primary, secondary, and inverse
Primary (default)
Secondary / alternate
Inverse (dark background)
Symbol only
Wordmark only
Monochrome (currentColor)
import { Logo } from "@nexwellaifactory/components";
<Logo variant="primary" lockup="full" tagline size="large" />Static SVG masters
Asset matrix
Every cell below is a real file in packages/components/src/logo/assets/ — use these for raw-file consumers (email templates, native app-icon exporters); prefer the Logo component everywhere inside React apps.
| Asset | Primary (navy/orange) | Secondary (indigo/periwinkle) | Inverse (white/periwinkle) |
|---|---|---|---|
| Symbol | nexwell-symbol-primary.svg | nexwell-symbol-secondary.svg | nexwell-symbol-inverse.svg |
| Symbol (favicon, bold stroke) | nexwell-symbol-favicon.svg | — | — |
| Wordmark only | nexwell-wordmark-primary.svg | nexwell-wordmark-secondary.svg | nexwell-wordmark-inverse.svg |
| Lockup, no tagline | nexwell-lockup-primary.svg | nexwell-lockup-secondary.svg | nexwell-lockup-inverse.svg |
| Lockup, with tagline | nexwell-lockup-primary-tagline.svg | nexwell-lockup-secondary-tagline.svg | nexwell-lockup-inverse-tagline.svg |
| Monochrome (currentColor) | nexwell-symbol-monochrome.svg — all contexts, set color on the consumer | ||
Governed rules
Clear space, minimum size, favicon
- Clear space on all sides ≥ the symbol ring's stroke width — roughly 10% of the rendered logo's own height as a floor.
- Minimum rendered size: full lockup 24px tall, symbol-only 16px (use
nexwell-symbol-favicon.svg, not the standard symbol asset, at 16–32px), wordmark-only 16px tall. - Favicon:
app/icon.svgin this docs app already uses the favicon-optimized navy/orange symbol. Apple touch icon and PWA manifest PNGs are not generated yet — see the README for exact follow-up. - Never stretch, skew, rotate, or recolor outside the four governed variants; never modify the symbol's proportions.