Brand Guidelines
Design system for building consistent experiences

Logo & Wordmark

Our brand identity assets and usage guidelines

Primary Logo

Primary Logo

Uses className "Dark:invert"

Primary Logo

Wordmark

Uses className "Dark:invert"

B
Brand

Wordmark

Combined logo and text for horizontal layouts

B

Icon Mark

Standalone icon for app icons and favicons

Color Palette

A high contrast, accessible color system

Primary

Main brand color for primary actions

Lightoklch(0.15 0 0)
Darkoklch(0.95 0 0)

Background

Page and component backgrounds

Lightoklch(0.99 0 0)
Darkoklch(0.08 0 0)

Foreground

Primary text and content

Lightoklch(0.15 0 0)
Darkoklch(0.95 0 0)

Muted

Subtle backgrounds and borders

Lightoklch(0.96 0 0)
Darkoklch(0.15 0 0)

Accent

Highlighted elements and emphasis

Lightoklch(0.15 0 0)
Darkoklch(0.95 0 0)

Typography

Specifically designed for developers and designers

Geist Sans

Primary typeface

Heading 1
Heading 2
Heading 3
Body text regular
Small text muted

Geist Sans

Used for headings, body text, and UI elements. Available in multiple weights.

Geist Mono

Monospace typeface

const greeting = "Hello";
function example() {
return true;
}

Geist Mono

Used for code snippets, technical content, and data display.

Type Scale

3xlThe quick brown fox
2xlThe quick brown fox
xlThe quick brown fox
lgThe quick brown fox
baseThe quick brown fox
smThe quick brown fox
xsThe quick brown fox

Product Screenshots

Visual examples of our product in action

Dashboard View
Web App

Dashboard View

Main application dashboard with analytics

Mobile Experience
Mobile

Mobile Experience

Responsive mobile interface design

Settings Panel
Web App

Settings Panel

User preferences and configuration

Data Visualization
Components

Data Visualization

Charts and analytics components