Brand
Guidelines

PERCEPTION V2

The Light-Mode Glass-Brutalist Visual Identity.

Perception combines the high-contrast structure of data interfaces with the polished tactile depth of light-mode surfaces. We reject standard, generic dark-mode templates in favor of a crisp, editorial feel designed for new finance.

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

We leverage Ronzino for structural authority, Newsreader serif italics for premium narrative cues, and Necto Mono for clean data display.

Ronzino - Display

Consolidate your media stack.

Newsreader - Reading Italic

see the narrative gap others miss

Necto Mono - Data display

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

Level	Font	Size Specs	Letter Spacing	Usage
Display Header	Ronzino	48px - 80px	tracking-tight (-0.035em)	Primary Hero headlines
Heading 1	Ronzino	36px - 44px	tracking-tight (-0.025em)	Section titles
Heading 2	Ronzino	24px - 30px	tracking-tight (-0.02em)	Subsection containers, cards
Reading / Cursive Accent	Newsreader Italic	Variable	Normal	Narrative highlights, cursive emphasis
Body Copy	Sans-Serif	16px - 18px	Normal	Descriptive paragraphs, benefits
Data Mono	Necto Mono	12px - 14px	tracking-wide (-0.02em)	Tabular values, metrics, labels

Geometry & Component Rules

Standardized border curvatures and shadows established across CTAs, cards, and primary content dossiers.

Action Buttons

Primary Action (rounded-[4px])

Secondary Action (rounded-[4px])

Styling Tokens

border-radius: 4px (default CTA buttons)
shadow: 0 4px 14px rgba(37,99,235,0.2) (primary hover shadows)

Tactile Dossier Cards

Tactile Card Frame

Highly curved container panels for dashboard mockups, client summaries, pricing cards, and dossier tabs.