Brand Guidelines & Assets

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

Original Black Logo

For use on pure white or light grey background panels

Download PNG

Original Light Logo

For use on dark backgrounds (e.g., footers or comparison grids)

Download PNG

Usage Guidelines & Don'ts

Clear Margin Rule

Always maintain a minimum spacing margin surrounding the logo equivalent to 50% of the logo's width to prevent element overlap.

Strict Logo Don'ts

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 display and reading hierarchy as a variable font from Thin (100) through Black (900). Necto Mono handles labels, indices, and data display. Ronzino remains in the fallback stack.

Geist - Display

Consolidate your media stack

Necto Mono - Data display

$17,400/yr savings | +14.85% share of voice

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 Action (rounded-[4px])

Secondary Action (rounded-[4px])

Styling Tokens

border-radius: 4px (default CTA buttons)
primary: bg-blue-600, hover bg-blue-700 (CTAButton primitive, no colored shadows)

Hairline Cards & Panels

Hairline Card Frame

Flat white surfaces with 1px slate-200 hairline borders for dashboard mockups, pricing cards, and content panels. Structure comes from hairline borders.