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