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

0123456789 · 8 Sep 2026 · 24h

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

Use sentence case for descriptive headings and controls. Preserve proper names and acronyms. Keep type upright, copy concise, and each product example focused on one useful task.

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 and panels

Example frame

Place one readable product window on a quiet blue-to-neutral gradient. Use white surfaces, a fine border, and restrained depth. Show a question, a useful result, and its sources.