Typography system
Poppins as the polished voice of VibeIRL, with readable fallbacks for engineering.
This page translates the provided Poppins token set into practical UI guidance. The goal is to preserve the sleek, airy look from the event, profile, and messaging references while keeping headings readable on liquid-glass surfaces and body copy calm enough for actual product use.
Primary family
Poppins
Secondary family
Inter
Scale roles
11 mapped styles
Principles
Typography should feel cinematic, but it still has to survive glass.
The reference screens lean on thin, expressive headings and soft metadata. These rules keep that look premium without sacrificing readability once glow, blur, and imagery sit behind the text.
Readable under glow
Poppins keeps the UI sleek and futuristic, but glass surfaces still need strong contrast. Save the lightest weights for hero moments and let body copy stay calmer.
Editorial, not generic
The product screenshots lean on airy event titles, slim profile headlines, and compact metadata. Use that rhythm to make VibeIRL feel designed instead of templated.
One family, disciplined roles
Use Poppins as the primary voice for headlines, labels, and interface moments. Keep Inter as the utilitarian fallback for dense engineering text or exported code.
Scale
Poppins scale, mapped from the supplied tokens.
These samples use the provided sizes, weights, and line heights directly. The cards below show how each role should feel in the product, not just how it measures in code.
H1 / Hero Title
House Party 2024
Size
H1 / Hero Title
Weight
Poppins weight
Line height
Token ratio
Feature hero moments, landing event titles, and large onboarding statements.
H2 / Feature Title
Events / Meetups / Groups
Size
H2 / Feature Title
Weight
Poppins weight
Line height
Token ratio
Section-level product headlines and large card titles.
H3 / Card Title
Jadyn Hampton
Size
H3 / Card Title
Weight
Poppins weight
Line height
Token ratio
Profile names, modal headers, and hero stats on glass.
H4 / Module Header
Portfolio Overview
Size
H4 / Module Header
Weight
Poppins weight
Line height
Token ratio
Dashboard modules, lab previews, and secondary hero cards.
H5 / Inline Header
Trending Vibes
Size
H5 / Inline Header
Weight
Poppins weight
Line height
Token ratio
List headers, feed shelves, and compact content modules.
H6 / UI Label
Connections
Size
H6 / UI Label
Weight
Poppins weight
Line height
Token ratio
Subheaders, grouped field labels, and compact callouts.
Body / Standard Copy
This is a party at Parth's house and everyone's welcome to come.
Size
Body / Standard Copy
Weight
Poppins weight
Line height
Token ratio
Paragraphs, event descriptions, and message content.
Blockquote / Editorial Pull
Hi I am Jadyn and I am a raver / techno enthusiast DJ in Los Angeles.
Size
Blockquote / Editorial Pull
Weight
Poppins weight
Line height
Token ratio
Bios, highlighted quotes, and artist intros.
Caption / Soft Meta
March 3rd 5:34 PM 2025
Size
Caption / Soft Meta
Weight
Poppins weight
Line height
Token ratio
Timestamps, helper copy, and quiet supporting context.
Endnote / Strong Meta
Public 10K+ Connections
Size
Endnote / Strong Meta
Weight
Poppins weight
Line height
Token ratio
Counts, badges, and emphasized metadata.
Footnote / Dense Utility
Read details, location, and pinned status
Size
Footnote / Dense Utility
Weight
Poppins weight
Line height
Token ratio
Fine-print helper text and tightly packed utility labels.
Product usage
Examples inspired by the event, profile, and messaging references.
These examples show how the same type family stretches from hero event titles to softer bios and aggressive callouts, while still staying within one system.
Event hero stack
House Party 2024
Use airy weights and wide vertical spacing so oversized titles still breathe over imagery.
Profile headline
Jadyn Hampton
Medium-weight Poppins works well for names, then smaller lighter metadata keeps the glass feeling premium.
Messaging emphasis
HAHAHAHA YOUR AN IDIOT!!!
Reserve all-caps heavier weights for playful or high-energy callouts, not default chat copy.
Feed shelf labels
Trending Vibes
Small but expressive headers help content shelves feel curated instead of plain list sections.
Quick rules
Default usage guidance
If engineers or designers are moving quickly, these rules keep the product typography coherent.
Hero titles
Event cards, splash moments
Names / headers
Profiles, cards, modals
Body copy
Descriptions, chat, details
Metadata
Dates, counts, utility labels
Engineering snippets
Dense docs and exported code
Implementation
Load the family once, then use role-based tokens instead of ad hoc sizes.
The app now exposes Poppins as the display family and Inter as the utility family. Keep the token mapping intact so future pages inherit a consistent voice.
/* Google font import */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500&display=swap");
:root {
--font-display: "Poppins", "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
--font-body: "Inter", "IBM Plex Sans", "Segoe UI", sans-serif;
}