Typography

Type system using Geist Sans and Geist Mono. Light weights, tight tracking.

Font Families

Geist Sans

Primary typeface for all UI text. Clean, modern, highly readable at any size.

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Specificationfont-family: var(--font-geist-sans) fallback: system-ui, -apple-system, sans-serif Usage: Headlines, body text, UI labels, navigation

Geist Mono

Monospace typeface for code, data, and technical content.

const flowly = new Flowly()

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 { } [ ] ( ) < > = + - * / % & | ! ?

Specificationfont-family: var(--font-geist-mono) fallback: ui-monospace, Menlo, Monaco, monospace Usage: Code blocks, inline code, terminal output, data tables

Headings

Headings use normal weight (400) with tight letter-spacing for a refined look.

Hero / Display

Largest text for hero sections and landing pages.

The financial brain

Specificationfont-size: 72px (text-7xl) font-weight: 400 (normal) letter-spacing: -0.025em (tracking-tight) line-height: 1.0 Mobile: 48px (text-5xl)

Page Title (H1)

Primary heading for page titles.

Documentation

Specificationfont-size: 36px (text-4xl) font-weight: 400 (normal) letter-spacing: -0.025em (tracking-tight) line-height: 1.1 margin-bottom: 16px

Section Title (H2)

Major section divisions within a page.

Getting Started

Specificationfont-size: 22px (custom, between text-xl and text-2xl) font-weight: 500 (medium) letter-spacing: -0.015em line-height: 1.3 margin-top: 48px margin-bottom: 24px

Subsection (H3)

Nested sections within major sections.

Installation

Specificationfont-size: 16px (text-base) font-weight: 500 (medium) letter-spacing: normal line-height: 1.5 margin-top: 32px margin-bottom: 12px color: oklch(0.2 0 0) — slightly darker than body

Card Title

Titles within cards and content blocks.

Multi-Rail Router

Specificationfont-size: 18px (text-lg) font-weight: 500 (medium) letter-spacing: normal line-height: 1.4 margin-bottom: 8px

Body Text

Large Body

Introductory paragraphs, lead text.

Learn how to integrate Flowly into your AI agents with multi-rail routing, persistent memory, and portable identity.

Specificationfont-size: 20px (text-xl) font-weight: 400 (normal) line-height: 1.7 (leading-relaxed) color: var(--muted-foreground)

Standard Body

Main content, documentation text.

Flowly is financial authorization infrastructure for AI agents. It ensures that autonomous agents can safely interact with the economy while respecting programmable budgets, permissions, and policies.

Specificationfont-size: 16px (text-base) font-weight: 400 (normal) line-height: 1.7 (leading-relaxed) color: var(--muted-foreground) oklch(0.556 0 0)

Small Body

Secondary information, descriptions, helper text.

Route payments to the optimal rail based on cost, speed, and availability.

Specificationfont-size: 14px (text-sm) font-weight: 400 (normal) line-height: 1.6 color: var(--muted-foreground)

Caption

Labels, metadata, fine print.

On this page

Specificationfont-size: 12px (text-xs) font-weight: 400-500 line-height: 1.4 letter-spacing: 0.1em (tracking-widest) when uppercase color: var(--muted-foreground)

Font Weights

We use only three weights to maintain visual consistency.

Normal (400)font-normal
Medium (500)font-medium
Light (300)font-light — numbers only
Weight Usage400 (normal) — Headlines and page titles — Body text — Most UI text 500 (medium) — Button labels — Card titles — Navigation items — Section headings (H2, H3) — Labels and captions 300 (light) — Large statistics and numbers — Hero numbers — Never for body text NEVER USE: 600, 700, 800, 900 (bold weights) Heavy weights conflict with our refined aesthetic.

Spacing & Rhythm

Vertical rhythm based on an 8px grid.

Vertical SpacingHeading Stack H1 margin-bottom: 16px (mb-4) H2 margin-top: 48px (mt-12), margin-bottom: 24px (mb-6) H3 margin-top: 32px (mt-8), margin-bottom: 12px (mb-3) Paragraph Spacing Between paragraphs: 16px (space-y-4) After intro paragraph: 40px (mb-10) Section Spacing Between major sections: 48px (mt-12) Between subsections: 32px (mt-8)
Line Height ScaleHeadings Hero/H1: 1.0-1.1 (leading-none to leading-tight) H2/H3: 1.3 (leading-snug) Body Text Standard: 1.6-1.7 (leading-relaxed) Compact: 1.5 (leading-normal) UI Elements Buttons, labels: 1.0-1.2

Usage Examples

Documentation Page

Quick Start

Get up and running with Flowly in 5 minutes.

Installation

Install the SDK using your package manager.

Feature Card

Multi-Rail Router

Route payments to the optimal rail automatically.

Statistic

$1.2M

Total Volume