Style Library

SaaS Mobile Boutique (Calistoga + Inter)

Font pairingdisplay serif + sans + mono

Calistoga + Inter — saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth

FontsCalistoga headingsInter body

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output. Fonts from Google Fonts: Calistoga, Inter.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Font pairing — SaaS Mobile Boutique (Calistoga + Inter)

Headings: Calistoga · Body: Inter
Mood: saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth
Best for: B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms

Tri-stack: Calistoga (adds human warmth) for heroes 36–42pt leading-1.1; Inter 400–600 for body/UI 16–18pt; JetBrains Mono 12pt uppercase tracking-[1.5] for data labels and section badges. Scale: Hero 36–42pt, Section H2 28–32pt, Body 16–18pt, Label 12pt. Avoid italic Calistoga except editorial callouts.

```css
@import url('https://fonts.googleapis.com/css2?family=Calistoga:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
```

Tailwind: `fontFamily: { display: ['Calistoga', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }`
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From UI/UX Pro Max (MIT, commit 477bcb2).View source