Brand
Guidelines

BRANDVisual Identity

Visual identity system for Perception.

The Intelligence Layer for New Finance. Our brand embodies precision, clarity, and sophisticated simplicity.

Color Palette

Built on sophisticated contrast between deep black and warm off-white. Click any swatch to copy the hex code.

Logo

The Perception logo is a geometric 'P' mark that represents data visualization and structured information. The negative space creates a window, symbolizing clarity and insight.

Dark (Inverted)

On dark/black backgrounds

Light

On light/white backgrounds

Usage Guidelines

Clear Space

Maintain minimum clear space equal to the height of the small pixel element (bottom-left square).

Minimum Size

Digital: 24px height minimum. Print: 8mm height minimum.

Logo Don'ts

xDo not rotate or skew the logo
xDo not change colors outside approved palette
xDo not add effects (shadows, gradients, outlines)
xDo not stretch or distort proportions

Dark (Inverted) PNG Light PNG

Typography

Inter is our primary typeface - a clean, geometric sans-serif that emphasizes clarity and professionalism.

DISPLAY

The Intelligence Layer

HEADING 1

Track sectors. Spot trends.

HEADING 2

From Monitoring to Deliverables

BODY TEXT

We monitor 1,000+ sources across Bitcoin, stablecoins, and tokenized finance. Track with watchlists, organize in Spaces, generate with Recipes.

Level	Size	Weight	Line Height	Usage
Display	48-72px	Bold (700)	1.1	Hero headlines, landing pages
H1	32-40px	Bold (700)	1.2	Page titles, section headers
H2	24-28px	Bold (700)	1.3	Subsection headers, card titles
H3	18-20px	Bold (700)	1.4	Minor headers, feature titles
Body	16-18px	Regular (400)	1.6	Paragraph text, descriptions
Small	12-14px	Regular (400)	1.5	Captions, labels, metadata

ASCII Art Patterns

Our most distinctive visual element. Generative patterns constructed from text characters that form abstract shapes, globes, and data visualizations.

Interactive Demo

Move your mouse to interact

Character Density Scale

Light

. . ' ` ,

Medium

- ~ : ; | /

Dense

# @ M W

Structural

[ ] ( ) < >

Color Treatment

✓Always render as Off White/Cream on Black background

✓Vary opacity between 30-100% for depth

✓Brighter characters = closer to focal point

xNever use colored ASCII art

xNever use on light backgrounds

Pattern Types & Semantic Meaning

Dot Matrix Globe

Global coverage, worldwide monitoring

Concentric Spirals

Trend analysis, ripple effects

Data Streams

Information flow, real-time monitoring

Particle Clouds

Data points, analysis

Waveforms

Signal detection

UI Components

Core components that define the Perception interface.

Buttons

Primary

Secondary

border-radius: 999px (full pill)
font-weight: 700
padding: 12px 24px

Badges & Pills

NEWAnnouncing Beta

USE CASEPRESS

Orange dot indicator for "new" items
ALL-CAPS labels with bold weight
letter-spacing: 0.05-0.1em

Underline Accents

The Intelligence Layer

Orange #FF6B35 underlines
Thickness: 2-3px
Use sparingly for emphasis

Spacing Scale

4pxMicro (icon padding)

8pxSmall (inline elements)

16pxBase unit

24pxMedium (between components)

32pxLarge (section padding)

48pxXL (major sections)

64-80pxXXL (page sections)

Downloads

Get all brand assets in one place.

Need additional assets or formats? Contact us

View pricing