Brand resources
NamePo Brand System
Canonical visual policy for designers, developers, and AI agents. Purple is identity; neutrals carry content; orange/gold is reserved for a single conversion signal per cluster. Outcomes depend on context, consistency, copy, and testingβnot on hue myths.
Version 2.0 Β· Anchor #6A4CFF
Brand idea
NamePo is domain-first digital identity: clear, premium, and restrained. Purple creates recognition and hierarchy. Teal is a controlled technical accent. Signal color activates purchase and searchβnever decorate every control with it.
Logos
Use approved wordmarks. Provide clear space equal to the height of the βNβ mark. Do not stretch, recolor arbitrarily, or place on busy photography without a solid panel.
Palette
Brand purple
#6A4CFF
Brand hover
#5838E5
Deep text
#1D102B
CTA light
#B54708
CTA gold
#FEC84B
Teal accent
#006A6B
Semantic tokens
Light and dark maps are explicitβnever inverted. Prefer semantic utilities such as bg-canvas, text-content-brand, and bg-cta.
Light mode
| Token | Value | Copy |
|---|---|---|
| --np-canvas | #F8F7FC | |
| --np-surface | #FFFFFF | |
| --np-surface-subtle | #F3F0F7 | |
| --np-surface-raised | #FFFFFF | |
| --np-surface-brand | #EEE9FF | |
| --np-content-primary | #1D102B | |
| --np-content-secondary | #3E354A | |
| --np-content-muted | #625A6E | |
| --np-content-subtle | #756D81 | |
| --np-content-brand | #6A4CFF | |
| --np-content-link | #472BB8 | |
| --np-border-default | #DED8E8 | |
| --np-border-strong | #8A7A9C | |
| --np-border-focus | #472BB8 | |
| --np-cta | #B54708 | |
| --np-cta-hover | #93370D | |
| --np-cta-active | #7A2E0E | |
| --np-cta-text | #FFFFFF | |
| --np-cta-on-brand | #FEC84B | |
| --np-cta-on-brand-hover | #FFD166 | |
| --np-cta-on-brand-active | #F2B627 | |
| --np-cta-on-brand-text | #1D102B | |
| --np-accent | #006A6B | |
| --np-status-success | #067647 | |
| --np-status-error | #B42318 | |
| --np-status-warning | #B54708 | |
| --np-status-info | #175CD3 |
Dark mode
| Token | Value | Copy |
|---|---|---|
| --np-canvas | #0F0718 | |
| --np-surface | #160B24 | |
| --np-surface-subtle | #12091D | |
| --np-surface-raised | #211132 | |
| --np-surface-brand | #271860 | |
| --np-content-primary | #F8F7FC | |
| --np-content-secondary | #E9E4F2 | |
| --np-content-muted | #C6B8D8 | |
| --np-content-subtle | #A293B4 | |
| --np-content-brand | #C5B5FF | |
| --np-content-link | #C5B5FF | |
| --np-border-default | #3A274D | |
| --np-border-strong | #756289 | |
| --np-border-focus | #FEC84B | |
| --np-cta | #FEC84B | |
| --np-cta-hover | #FFD166 | |
| --np-cta-active | #F2B627 | |
| --np-cta-text | #1D102B | |
| --np-cta-on-brand | #FEC84B | |
| --np-cta-on-brand-hover | #FFD166 | |
| --np-cta-on-brand-active | #F2B627 | |
| --np-cta-on-brand-text | #1D102B | |
| --np-accent | #67E2E2 | |
| --np-status-success | #6CE9A6 | |
| --np-status-error | #FFB4AB | |
| --np-status-warning | #FEC84B | |
| --np-status-info | #84CAFF |
Live components
Examples inherit the active theme. Toggle light/dark from the site theme control.
Buttons
Input & badges
On purple panels
Use gold signal CTA with deep text.
CTA matrix
- Light/neutral:
#B54708+ white text (#FFFFFF). - Purple/gradient/dark:
#FEC84B+#1D102Btext. - Never white text on
#FF7B3B. - One signal CTA per visual cluster; secondary actions stay outline/neutral.
- Purple for brand/non-purchase primary; orange/gold only for conversion.
Typography
Manrope
Display / headings Β· weight 750β800
Inter for body and UI. Default 16px, ~1.6 line-height, 65β72ch reading measure.
example.com Β· DNS / code uses monospace
Spacing & shape
- 4px base / 8px primary spacing rhythm
- Card radius 16px; featured 20β24px; buttons/inputs 12px
- Main container ~1200px with responsive gutters
Accessibility
- WCAG 2.2 AA: 4.5:1 normal text, 3:1 large text and UI/focus
- Important targets β₯ 44Γ44px; visible focus-visible rings
- Status always includes text and/or icon β never color alone
- Honor prefers-reduced-motion; support keyboard and zoom/reflow
Do / Donβt
Do
- Map colors to semantic roles
- One signal CTA per cluster
- Use Manrope + Inter consistently
Donβt
- Do not preserve legacy emerald/lime as NamePo identity
- Scatter raw hex through components
- Overload heroes with neon, glass, or generic AI clutter
AI-agent contract
- Treat this page and the Brand System v2.0 policy as authoritative.
- Prefer semantic tokens over raw hex.
- Do not invent NamePo production secrets or operational host details.
- Purple = brand action; orange/gold = conversion only.
Version
NamePo Brand System v2.0 Β· Purple anchor #6A4CFF