Brand
guidelines
Color palette
Standardized around Perception Royal Blue, deep slate typography, and clean, high-contrast light backdrops. Click any swatch to copy the hex code directly.
The logo system
Our signature geometric P-mark is balanced with structured monospace alignment, representing precision data streams and early signal tracking.
Verified Logo Assets
Usage Guidelines & Don'ts
Always maintain a minimum spacing margin surrounding the logo equivalent to 50% of the logo's width to prevent element overlap.
- xNever rotate, skew, or flip the geometric P-mark
- xNever add dropshadows, borders, or color fills to the logo
- xNever stretch or distort the proportions of the typography mark
- xNever use unapproved legacy colors like orange or lime on logo variations
Typography scale
Geist carries the entire display and reading hierarchy at medium weight with tight tracking. Necto Mono handles labels, indices, and data display.
Consolidate your media stack
| Level | Font | Size Specs | Letter Spacing | Usage |
|---|---|---|---|---|
| Display Header | Geist Medium (500) | 36px - 68px | tracking-[-0.03em] | Primary hero headlines |
| Heading 1 | Geist Medium (500) | 36px - 48px | tracking-[-0.03em] | Section titles |
| Heading 2 | Geist Medium (500) | 18px - 30px | tracking-[-0.02em] | Subsection containers, cards |
| Body Copy | Geist Regular (400) | 14px - 18px | Normal | Descriptive paragraphs, benefits |
| Mono Labels & Data | Necto Mono | 10px - 14px | tracking-[0.2em] uppercase (labels) | Section eyebrows, indices, tabular values |
Geometry & component rules
Standardized radii and hairline borders across CTAs, cards, and content panels. 3px chips, 4px buttons, 6px cards, 8px panels.
Action Buttons
primary: bg-slate-950, hover bg-slate-800 (no colored shadows)
Hairline Cards & Panels
Flat white surfaces with 1px slate-200 hairline borders for dashboard mockups, pricing cards, and content panels. Structure comes from borders, not shadows.
border: 1px solid #E2E8F0 | hover: border-slate-400