VibeMint Knowledge Base

VibeMint Documentation

Everything you need to know about creating, customizing, and launching your crypto project website with VibeMint. Get started in minutes with our comprehensive guides.

Typography

Typography

Font pairings in VibeMint are pre-matched — heading fonts and body fonts are selected together for visual harmony. Every pairing is loaded from Google Fonts via edge CDN with zero CLS impact.

Font Pairings

Outfit
Paired with Inter
DefaultVersatile

Our default pairing. Outfit's geometric display style with Inter's neutral readability — clean, modern, and professional for any project type.

Inter
Paired with Inter
DeveloperMinimal

The de-facto SaaS standard. Full Inter gives a tight, unified system feel — ideal for DeFi protocols, AI agent dashboards, and technical audiences.

Space Grotesk
Paired with Plus Jakarta Sans
TechFuturistic

Tech-forward geometric with a slightly quirky edge. Jakarta Sans as body adds warmth. Great for AI agent and futuristic meme projects.

Playfair Display
Paired with Plus Jakarta Sans
PremiumInstitutional

Elegant serif display heading for premium, institutional projects. Conveys authority and long-term credibility. Pairs with Jakarta for warmth.

Poppins
Paired with Poppins
CommunityMeme Friendly

Friendly, rounded, and approachable. Full Poppins creates a unified social feel — excellent for community-first meme coins and gaming tokens.

Montserrat
Paired with Inter
BoldHigh Impact

Bold, impactful uppercase energy. Montserrat headlines with Inter body create a high-impact presale landing page aesthetic.

Type Scale

VibeMint applies a fluid, responsive type scale across all blocks. Sizes adapt automatically between mobile and desktop viewports — no manual breakpoint overrides needed.

ScaleSize RangeUsed For
Display / Hero H1text-4xl → text-7xlHero headlines, section headers, large stat numbers
Section Heading H2text-2xl → text-4xlTokenomics titles, roadmap phases, feature headings
Card Heading H3text-lg → text-2xlBlock card titles, milestone labels, FAQ questions
Body Largetext-base → text-lgPrimary content paragraphs, section descriptions
Body Defaulttext-sm → text-baseGeneral content text, button labels, navigation
Caption / Metatext-xs → text-smTimestamps, badge labels, footnote text, hex codes

Typography Best Practices

✓ Use display fonts only for H1 hero headlines and large stat callouts
✓ Keep hero headlines under 10 words for maximum scannability
✓ Use body fonts at minimum text-sm (14px) for readable content blocks
✓ Apply font weight variation to create visual hierarchy (regular → semibold → bold → black)
✗ Mix more than 2 font families — stick to the curated pairing
✗ Use all-caps for long paragraphs — reserve it for labels and badges only
✗ Override font sizes manually on individual elements unless necessary
✗ Use light (300) font weights on dark backgrounds — readability suffers

How to Change Your Font Pairing

  1. 1Open your project in the Founder Dashboard.
  2. 2Navigate to the "Design" tab in the editor sidebar.
  3. 3Select "Typography" from the design options panel.
  4. 4Click your preferred font pairing — the preview updates live.
  5. 5Click "Save & Apply" — fonts are rebuilt and deployed in seconds.
Color ThemesSections & Blocks