# Brand Systems

> SKILL — Brand Systems

- Skill: `nickgallick/brand-systems` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nickgallick/brand-systems`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nickgallick/brand-systems/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nickgallick (https://skillmd.com/u/nickgallick)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/nickgallick/brand-systems

---

# SKILL — Brand Systems

Pixel's brand knowledge. Each brand has a distinct visual identity that must be maintained across every screen and component.

---

## Perlantir

### Identity
**Tagline vibe**: Bloomberg meets Apple — data-dense but elegant.

Perlantir is a professional, data-heavy platform that feels premium despite its density. Think financial terminals redesigned by a luxury brand. Every pixel serves a purpose, every data point is accessible, and the interface feels effortlessly powerful.

### Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Background | `#0A1628` | Page background, darkest surface |
| Surface | `#111D30` | Cards, panels, containers |
| Surface Elevated | `#1A2740` | Dropdowns, popovers, active items |
| Surface Top | `#243350` | Tooltips, overlays |
| Border | `rgba(255,255,255,0.08)` | Dividers, card borders |
| Text Primary | `#E5E7EB` | Primary text (off-white) |
| Text Secondary | `#9CA3AF` | Secondary text, captions |
| Text Muted | `#6B7280` | Disabled text, placeholders |

Primary accent is context-specific per feature (defined per project).

### Typography
| Level | Font | Weight | Size |
|-------|------|--------|------|
| Display | Space Grotesk | 700 | 48px |
| H1 | Space Grotesk | 700 | 36px |
| H2 | Space Grotesk | 600 | 30px |
| H3 | Space Grotesk | 600 | 24px |
| H4 | Space Grotesk | 600 | 20px |
| Body | DM Sans | 400 | 16px |
| Body Small | DM Sans | 400 | 14px |
| Caption | DM Sans | 400 | 12px |
| Code/Data | JetBrains Mono | 400 | 14px |

### Design Characteristics
- Dense but organized — lots of data, clear hierarchy
- Subtle borders, minimal shadows (dark theme shadows don't work well)
- Monospace for data values and financial numbers
- Compact spacing for tables and data grids
- Premium feel — no clutter, generous padding on key elements
- Charts and visualizations are first-class citizens

---

## UberKiwi

### Identity
**Tagline vibe**: Dark-mode forward, bold, energetic.

UberKiwi is modern, unapologetic, and high-energy. The brand doesn't whisper — it speaks with confidence. Electric green on dark backgrounds creates a distinctive, ownable look. The interface should feel alive and responsive.

### Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Background | `#0D0D0D` | Page background |
| Surface | `#1A1A1A` | Cards, containers |
| Surface Elevated | `#262626` | Dropdowns, active items |
| Surface Top | `#333333` | Tooltips, overlays |
| Primary | Electric Green (project-specific) | CTAs, active states, highlights |
| Border | `rgba(255,255,255,0.1)` | Dividers, borders |
| Text Primary | `#F5F5F5` | Primary text |
| Text Secondary | `#A3A3A3` | Secondary text |
| Text Muted | `#737373` | Disabled, placeholders |

### Typography
| Level | Font | Weight | Size |
|-------|------|--------|------|
| Display | Satoshi | 700 | 48px |
| H1 | Satoshi | 700 | 36px |
| H2 | Satoshi | 600 | 30px |
| H3 | Satoshi | 600 | 24px |
| H4 | Satoshi | 600 | 20px |
| Body | Outfit | 400 | 16px |
| Body Small | Outfit | 400 | 14px |
| Caption | Outfit | 400 | 12px |

### Design Characteristics
- Bold use of the electric green accent — but not everywhere
- High contrast between interactive and static elements
- Rounded corners (12px–16px for cards, 8px for inputs)
- Generous spacing — the interface breathes
- Subtle animations that feel snappy, not slow
- Typography is punchy — shorter headlines, direct language

---

## NERVE

### Identity
**Tagline vibe**: Cinematic, immersive, performance-driven.

NERVE is intense and focused. The interface feels like a mission control center — every element is precisely placed, every interaction is deliberate. Cyan on near-black creates a sci-fi atmosphere that's still usable. Think movie UI done right.

### Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Background | `#080C18` | Page background, deepest |
| Surface | `#0F1629` | Cards, panels |
| Surface Elevated | `#161E35` | Dropdowns, popovers |
| Surface Top | `#1E2842` | Tooltips, overlays |
| Primary | `#00D4FF` (Cyan) | CTAs, active states, key data |
| Primary Muted | `rgba(0,212,255,0.15)` | Active backgrounds, highlights |
| Border | `rgba(0,212,255,0.12)` | Borders (subtle cyan tint) |
| Text Primary | `#E2E8F0` | Primary text |
| Text Secondary | `#94A3B8` | Secondary text |
| Text Muted | `#64748B` | Disabled, placeholders |

### Typography
| Level | Font | Weight | Size |
|-------|------|--------|------|
| Display | Outfit | 700 | 48px |
| H1 | Outfit | 700 | 36px |
| H2 | Outfit | 600 | 30px |
| H3 | Outfit | 600 | 24px |
| H4 | Outfit | 600 | 20px |
| Body | Plus Jakarta Sans | 400 | 16px |
| Body Small | Plus Jakarta Sans | 400 | 14px |
| Caption | Plus Jakarta Sans | 400 | 12px |
| Code/Data | JetBrains Mono | 400 | 14px |

### Design Characteristics
- Cyan glow effects (subtle — box-shadow with cyan at low opacity)
- Borders with cyan tint for active/selected states
- Monospace for data, metrics, and technical values
- Grid-aligned layouts — everything snaps to a strict grid
- Minimal decoration — every element earns its place
- Data visualization is bold with cyan as the primary chart color
- Performance metrics and real-time data are common patterns
- Motion is precise and fast (150ms–200ms transitions)

---

## Client Projects Template

When designing for a new brand/client, establish these before any design work:

```
## Brand: [Name]

### Identity
Vibe: [One-line description]
Personality: [3-5 adjectives]

### Color Palette
| Token | Hex | Usage |
|-------|-----|-------|
| Background | | |
| Surface | | |
| Surface Elevated | | |
| Primary | | |
| Secondary | | |
| Border | | |
| Text Primary | | |
| Text Secondary | | |
| Text Muted | | |
| Success | | |
| Warning | | |
| Error | | |

### Typography
| Level | Font | Weight | Size |
|-------|------|--------|------|
| Heading | | | |
| Body | | | |
| Code (if needed) | | | |

### Design Characteristics
- [Characteristic 1]
- [Characteristic 2]
- [Characteristic 3]

### Reference
- Inspiration: [websites, apps, design references]
- Competitors: [what they look like, how we differentiate]
```