Foundations · Typography

Typography

Round 2 (locked): Ranade for display, Satoshi for body, JetBrains Mono for code.

Both Ranade and Satoshi are by Indian Type Foundry — the same studio. The alignment isn't decorative; it ties the brand's Indian heritage into the type system itself.

The pairing in use

Run your agency in rhythm.

Espanda is the operating system for digital agencies. One workspace, six modules, named AI agents inside each, a single shared context layer. Built to expand.

$ npx create-espanda-app my-agency

The three families

Display

Ranade

Fontshare (ITF)

Run your agency in rhythm.

400500600700
Download from Fontshare (ITF)
Body

Satoshi

Fontshare (ITF)

Espanda is the operating system for digital agencies.

400500600700
Download from Fontshare (ITF)
Mono

JetBrains Mono

Google Fonts

const espanda = createOS({ agency: true })

400500
Download from Google Fonts

Type scale

TokenSizeSample (display)
xs12pxThe quick brown fox
sm14pxThe quick brown fox
base16pxThe quick brown fox
lg18pxThe quick brown fox
xl20pxThe quick brown fox
2xl24pxThe quick brown fox
3xl30pxThe quick brown fox
4xl36pxThe quick brown fox
5xl48pxThe quick brown fox
6xl60pxThe quick brown fox

Display alternatives

Same headline, four typefaces. Use this view to validate the pick or override it. All four are free Fontshare typefaces from Indian Type Foundry.

Ranade

PickedITF · Fontshare
Fontshare

Your agency runs on 30 tools. It shouldn't.

The pick. Distinctive without being precious.

General Sans

ITF · Fontshare
Fontshare

Your agency runs on 30 tools. It shouldn't.

Cleaner cousin to Ranade. Familiar, less character.

Switzer

ITF · Fontshare
Fontshare

Your agency runs on 30 tools. It shouldn't.

Modern grotesque. Excellent at heavy weights, less personality.

Cabinet Grotesk

ITF · Fontshare
Fontshare

Your agency runs on 30 tools. It shouldn't.

Bolder, more condensed. Stronger headline punch.

To override the pick

Edit lib/tokens.ts, swap typography.family.display.name to one of the alternatives, and update the fontFamily.display stack in tailwind.config.ts. All four fonts are already loaded in app/globals.css, so the swap is instant.