csh/playbook
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📦 deps(thirdparty): update snapshots

Browse Source
This commit is contained in:
ci[bot]
2026-08-14 17:16:04 +08:00
parent ad5eeaaf5b
commit 14e7209e78
283 changed files with 201717 additions and 13469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui-ux-pro-max/cli/assets/data/typography.csv
+8 -8
View File
@@ -18,7 +18,7 @@ No,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best Fo
17,Brutalist Raw,Mono + Mono,Space Mono,Space Mono,"brutalist, raw, technical, monospace, minimal, stark","Brutalist designs, developer portfolios, experimental, tech art",https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');,"fontFamily: { mono: ['Space Mono', 'monospace'] }",All-mono for raw brutalist aesthetic. Limited weights.
18,Fashion Forward,Sans + Sans,Syne,Manrope,"fashion, avant-garde, creative, bold, artistic, edgy","Fashion brands, creative agencies, art galleries, design studios",https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');,"fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }",Syne's unique character for headlines. Manrope for readability.
19,Soft Rounded,Sans + Sans,Varela Round,Nunito Sans,"soft, rounded, friendly, approachable, warm, gentle","Children's products, pet apps, friendly brands, wellness, soft UI",https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap,@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');,"fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }",Both rounded and friendly. Perfect for soft UI designs.
20,Premium Sans,Sans + Sans,Satoshi,General Sans,"premium, modern, clean, sophisticated, versatile, balanced","Premium brands, modern agencies, SaaS, portfolios, startups",https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');,"fontFamily: { sans: ['DM Sans', 'sans-serif'] }",Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative.
20,Premium Sans (DM Sans),Sans + Sans,DM Sans,DM Sans,"premium, modern, clean, sophisticated, versatile, balanced","Premium brands, modern agencies, SaaS, portfolios, startups",https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');,"fontFamily: { sans: ['DM Sans', 'sans-serif'] }",Single importable Google family with balanced weights for premium sans layouts.
21,Vietnamese Friendly,Sans + Sans,Be Vietnam Pro,Noto Sans,"vietnamese, international, readable, clean, multilingual, accessible","Vietnamese sites, multilingual apps, international products",https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');,"fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }",Be Vietnam Pro excellent Vietnamese support. Noto as fallback.
22,Japanese Elegant,Serif + Sans,Noto Serif JP,Noto Sans JP,"japanese, elegant, traditional, modern, multilingual, readable","Japanese sites, Japanese restaurants, cultural sites, anime/manga",https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');,"fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }",Noto fonts excellent Japanese support. Traditional + modern feel.
23,Korean Modern,Sans + Sans,Noto Sans KR,Noto Sans KR,"korean, modern, clean, professional, multilingual, readable","Korean sites, K-beauty, K-pop, Korean businesses, multilingual",https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');,"fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }",Clean Korean typography. Single font with weight variations.
@@ -37,7 +37,7 @@ No,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best Fo
36,Crypto/Web3,Sans + Sans,Orbitron,Exo 2,"crypto, web3, futuristic, tech, blockchain, digital","Crypto platforms, NFT, blockchain, web3, futuristic tech",https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap');,"fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] }",Orbitron for futuristic headers. Exo 2 for readable body.
37,Gaming Bold,Display + Sans,Russo One,Chakra Petch,"gaming, bold, action, esports, competitive, energetic","Gaming, esports, action games, competitive sports, entertainment",https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap,@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap');,"fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] }",Russo One for impact. Chakra Petch for techy body text.
38,Indie/Craft,Display + Sans,Amatic SC,Cabin,"indie, craft, handmade, artisan, organic, creative","Craft brands, indie products, artisan, handmade, organic products",https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap');,"fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] }",Amatic for handwritten feel. Cabin for readable body.
39,Startup Bold,Sans + Sans,Clash Display,Satoshi,"startup, bold, modern, innovative, confident, dynamic","Startups, pitch decks, product launches, bold brands",https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');,"fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }",Note: Clash Display on Fontshare. Outfit as Google alternative.
39,Startup Bold (Outfit + Rubik),Sans + Sans,Outfit,Rubik,"startup, bold, modern, innovative, confident, dynamic","Startups, pitch decks, product launches, bold brands",https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');,"fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] }",Importable Google pairing: Outfit for display headings and Rubik for body text.
40,E-commerce Clean,Sans + Sans,Rubik,Nunito Sans,"ecommerce, clean, shopping, product, retail, conversion","E-commerce, online stores, product pages, retail, shopping",https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap');,"fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }",Clean readable fonts perfect for product descriptions.
41,Academic/Research,Serif + Sans,Crimson Pro,Atkinson Hyperlegible,"academic, research, scholarly, accessible, readable, educational","Universities, research papers, academic journals, educational",https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap');,"fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] }",Crimson for scholarly headlines. Atkinson for accessibility.
42,Dashboard Data,Mono + Sans,Fira Code,Fira Sans,"dashboard, data, analytics, code, technical, precise","Dashboards, analytics, data visualization, admin panels",https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');,"fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] }","Fira family cohesion. Code for data, Sans for labels."
@@ -57,19 +57,19 @@ No,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best Fo
56,Kinetic Motion,Display + Mono,Syncopate,Space Mono,"kinetic, motion, futuristic, speed, wide, tech","Music festivals, automotive, high-energy brands",https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap');,"fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] }",Syncopate's wide stance works well with motion effects.
57,Gen Z Brutal,Display + Sans,Anton,Epilogue,"brutal, loud, shouty, meme, internet, bold","Gen Z marketing, streetwear, viral campaigns",https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap');,"fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] }",Anton is impactful and condensed. Good for stickers/badges.
58,Bauhaus Geometric,Geometric Sans + Single Weight,Outfit,Outfit,"bauhaus, geometric, constructivist, bold, uppercase, architectural, mechanical, poster, tactile","Bauhaus mobile apps, bold editorial mobile, design-forward branding apps, art/culture platforms",https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap,@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap');,"fontFamily: { display: ['Outfit', 'sans-serif'], body: ['Outfit', 'sans-serif'] }",Single-family system: Outfit 900 uppercase tracking-tighter for heroes; Outfit 700 uppercase for buttons/nav; Outfit 500 for body. Scale aggressively: text-4xl–text-5xl headlines on mobile.
59,Minimalist Monochrome Editorial,Serif + Serif + Mono (Triple Stack),Playfair Display,Source Serif 4,"monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile","Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics","https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400|Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap');","fontFamily: { display: ['Playfair Display', 'serif'], body: ['Source Serif 4', 'serif'], mono: ['JetBrains Mono', 'monospace'] }",Triple stack: Playfair Display 900 tracking-tighter leading-[0.9] for heroes (text-5xl–text-6xl breaks words graphically). Source Serif 4 300–600 for body legibility. JetBrains Mono 400–500 uppercase tracking-widest for tags/dates/labels. NO UI sans-serif — 100% serif/mono.
59,Minimalist Monochrome Editorial,Serif + Serif + Mono (Triple Stack),Playfair Display,Source Serif 4,"monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile","Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics","https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap');","fontFamily: { display: ['Playfair Display', 'serif'], body: ['Source Serif 4', 'serif'], mono: ['JetBrains Mono', 'monospace'] }",Triple stack: Playfair Display 900 tracking-tighter leading-[0.9] for heroes (text-5xl–text-6xl breaks words graphically). Source Serif 4 300–600 for body legibility. JetBrains Mono 400–500 uppercase tracking-widest for tags/dates/labels. NO UI sans-serif — 100% serif/mono.
60,Modern Dark Cinema (Inter System),Sans + Mono,Inter,Inter,"dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility","Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end productivity apps",https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');,"fontFamily: { sans: ['Inter', 'sans-serif'] }","Single-family precision system: Inter 700 (-1.5 tracking) for Display 48pt; Inter 600 (-0.5 tracking) for H1 32pt / H2 24pt; Inter 400 for body 16pt; Inter 500 uppercase +1.2 tracking for labels/mono. Gradient text via mask-view + react-native-linear-gradient (#FFFFFF → rgba(255,255,255,0.7)) on major headers."
61,SaaS Mobile Boutique (Calistoga + Inter),Display Serif + Sans + Mono,Calistoga,Inter,"saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth","B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms",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,@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');,"fontFamily: { display: ['Calistoga', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }","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."
62,Terminal CLI Monospace,Mono + Mono (Single Family),JetBrains Mono,JetBrains Mono,"terminal, cli, hacker, monospace, matrix, developer, retro-future, command line, precision, OLED","Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, security tools, geek-culture portfolios","https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400","@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');","fontFamily: { mono: ['JetBrains Mono', 'monospace'] }",Single monospace system: use ONLY JetBrains Mono (or SpaceMono-Regular as system fallback). Strict sizes: 12pt / 14pt / 16pt only — no in-between. Weight: 400 normal (bold ruins mono character). Line height: 1.2x font size for information density. Letter spacing: normal (monospaced auto-spacing). All UI labels uppercase. ASCII borders and text-based progress bars.
63,Kinetic Brutalism (Space Grotesk),Geometric Sans (Single Dominant),Space Grotesk,Space Grotesk,"kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine","Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops",https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');,"fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Dominant single-family system: Space Grotesk 700–900 for ALL display. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use Inter as fallback. Font scale must use PixelRatio helper for responsive sizing."
63,Kinetic Brutalism (Space Grotesk),Geometric Sans (Single Dominant),Space Grotesk,Space Grotesk,"kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine","Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops",https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');,"fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Dominant single-family system: Space Grotesk 700 for display, with 400–600 available for body and supporting hierarchy. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use a sans-serif system fallback. Font scale must use PixelRatio helper for responsive sizing."
64,Flat Design Mobile (System Bold),Sans + Sans,Inter,Inter,"flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive","Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces",https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap,@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');,"fontFamily: { sans: ['Inter', 'sans-serif'] }","System-first strategy: Inter as primary, falls back to system SF/Roboto on iOS/Android. Scale: Headlines fontWeight 800 letterSpacing -0.5; Subheadings fontWeight 600 fontSize 18; Body fontWeight 400 lineHeight 24; Labels fontWeight 700 uppercase letterSpacing 1. Thick weights carry all hierarchy since there are no shadows. Use aggressive size contrast (poster rule: body 16pt vs headline 40pt+). Avoid italic."
65,Material You MD3 (Roboto System),Sans (System Default),Roboto,Roboto,"material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive","Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile","https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400","@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');","fontFamily: { sans: ['Roboto', 'sans-serif'] }",MD3 type scale: Display Large 56px/400/64px. Headline Large 32px/500/40px. Title Large 22px/500/28px. Body Large 16px/400/24px. Label Medium 12px/500/16px. Buttons and Labels: letterSpacing 0.1px. Use system Roboto on Android; load from Google Fonts for iOS parity. Never use custom weights beyond 300–700.
66,Neo Brutalism Mobile (Space Grotesk Heavy),Geometric Sans (Bold-Only),Space Grotesk,Space Grotesk,"neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z","Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps",https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');,"fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Strictly 700 (Bold) and 900 (Black/Heavy) ONLY — never Regular or Light. Display: 48–64px. Heading: 24–32px. Body: 18–20px (stays heavy for brutalist density). Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. System bold as fallback. No italic, no thin weights."
67,Bold Typography Mobile (Inter-Tight Poster),Sans + Serif (Display) + Mono,Inter,Playfair Display,"bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast","Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences","https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400|JetBrains+Mono:wght@400|Playfair+Display:ital@1","@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap');","fontFamily: { display: ['Inter', 'sans-serif'], quote: ['Playfair Display', 'serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Inter 600–800 for all UI (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic ONLY for pull quotes. JetBrains Mono for labels and stats. Scale: 12px labels, 16px body, 22px sub, 32px section, 40px H2, 56px H1, 72px Hero Statement. 5:1 ratio H1:Body is mandatory. lineHeight 1.1 headlines, 1.6 body. Underlines (2–3pt accent) replace buttons for interactions."
68,Academia Mobile (Cormorant + Crimson + Cinzel),Serif + Book Serif + Engraved (Triple Stack),Cormorant Garamond,Crimson Pro,"academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather","Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms","https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500|Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Crimson Pro', 'serif'], display: ['Cinzel', 'serif'] }","Triple-stack: Cormorant Garamond Medium for all headings (32–40px tight leading). Crimson Pro Regular for body reading text (16–18px, lineHeight 24–26px). Cinzel SemiBold for ALL-CAPS labels, overlines, section prefixes (10–12px, letterSpacing 2–3px). Drop caps: first letter 60px Cinzel in Brass #C9A962. Section prefix: VOLUME I/II/III in Cinzel 10px. NO sans-serif anywhere."
66,Neo Brutalism Mobile (Space Grotesk Bold),Geometric Sans (Bold-Only),Space Grotesk,Space Grotesk,"neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z","Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps",https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');,"fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] }","Single-weight system using the loaded Space Grotesk 700 (Bold). Display: 48–64px. Heading: 24–32px. Body: 18–20px for deliberate brutalist density. Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. Use a bold sans-serif system fallback. No italic or thin weights."
67,Bold Typography Mobile (Inter Poster),Sans + Serif (Display) + Mono,Inter,Playfair Display,"bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast","Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences","https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1","@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap');","fontFamily: { display: ['Inter', 'sans-serif'], quote: ['Playfair Display', 'serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Inter 600–800 for UI and display type (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic only for pull quotes. JetBrains Mono for labels and stats. Suggested scale: 12px labels, 16px body, 22px subhead, 32px section, 40px H2, 56px H1, 72px hero statement. Use lineHeight 1.1 for headlines and 1.6 for body. Keep text links visibly identifiable; do not replace button semantics with styled underlines."
68,Academia Mobile (Cormorant + Crimson + Cinzel),Serif + Book Serif + Engraved (Triple Stack),Cormorant Garamond,Crimson Pro,"academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather","Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms","https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Crimson Pro', 'serif'], display: ['Cinzel', 'serif'] }","Triple-stack: Cormorant Garamond Medium for all headings (32–40px tight leading). Crimson Pro Regular for body reading text (16–18px, lineHeight 24–26px). Cinzel SemiBold for ALL-CAPS labels, overlines, section prefixes (10–12px, letterSpacing 2–3px). Drop caps: first letter 60px Cinzel in Brass #C9A962. Section prefix: VOLUME I/II/III in Cinzel 10px. NO sans-serif anywhere."
69,Cyberpunk Mobile (Orbitron + JetBrains Mono),Tech Display + Mono,Orbitron,JetBrains Mono,"cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, magenta, chamfered, tactical","Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cyberpunk narrative games",https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap,@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap');,"fontFamily: { heading: ['Orbitron', 'sans-serif'], body: ['JetBrains Mono', 'monospace'] }","Dual-stack: Orbitron 700–900 for H1 (42px uppercase letterSpacing 4, fontWeight 900). JetBrains Mono 400–500 for all body/data text (14px letterSpacing 1). Labels: 10px uppercase opacity 0.7. Heading scale aggressive: H1 42px, H2 28px, Section 20px. Body 14px monospace only. NO mixed sans-serif. Fallback: monospace system font. Orbitron requires loading — use NativeWind or useFonts hook."
70,Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono),Geometric Sans + Sans + Mono (Triple),Space Grotesk,Inter,"web3, bitcoin, defi, digital gold, fintech, crypto, trustless, luminescent, precision, dark","DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech brand landing pages",https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap,@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');,"fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }","Tri-stack: Space Grotesk 600–700 for headings (geometric, technical character). Inter 400–600 for all body and UI text (high legibility). JetBrains Mono Medium for all data/stats/prices/hashes (technical accuracy). Buttons: Inter Bold uppercase letterSpacing 1.5. Balance figures use MaskedView gradient text (orange→gold). Heading scale: H1 36–42px, H2 24–28px, body 16–18px, mono labels 12–14px."
71,Claymorphism Mobile (Nunito + DM Sans),Display Rounded + Geometric Sans,Nunito,DM Sans,"claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans","Children education apps, teen social, brand mascot apps, creative tools, fintech gamification","https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400|Nunito:ital,wght@0,700;0,800;0,900;1,700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');","fontFamily: { display: ['Nunito', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }",Dual-stack: Nunito Black (900) or ExtraBold (800) for ALL headings — rounded terminals are mandatory. DM Sans Medium (500) for body text — clean and geometric. Scale: Hero 48px lineHeight 52 letterSpacing -1. Section Title 32px lineHeight 38. Card Title 22px lineHeight 28. Body 16px lineHeight 24. Never use Nunito for body text (too decorative at small sizes). Never use weights below 700 for any heading. includeFontPadding: false on all Nunito Text components for vertical centering in rounded buttons.
71,Claymorphism Mobile (Nunito + DM Sans),Display Rounded + Geometric Sans,Nunito,DM Sans,"claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans","Children education apps, teen social, brand mascot apps, creative tools, fintech gamification","https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');","fontFamily: { display: ['Nunito', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }",Dual-stack: Nunito Black (900) or ExtraBold (800) for ALL headings — rounded terminals are mandatory. DM Sans Medium (500) for body text — clean and geometric. Scale: Hero 48px lineHeight 52 letterSpacing -1. Section Title 32px lineHeight 38. Card Title 22px lineHeight 28. Body 16px lineHeight 24. Never use Nunito for body text (too decorative at small sizes). Never use weights below 700 for any heading. includeFontPadding: false on all Nunito Text components for vertical centering in rounded buttons.
72,Enterprise SaaS Mobile (Plus Jakarta Sans),Geometric Sans (Single Family),Plus Jakarta Sans,Plus Jakarta Sans,"enterprise, saas, b2b, professional, indigo, modern, approachable, legible, ios dynamic type, android scaling","B2B SaaS apps, productivity tools, government and finance mobile apps, admin dashboards, enterprise onboarding","https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single-family system: Plus Jakarta Sans balances professional authority with mobile approachability. Weight scale: ExtraBold 800 for screen titles/hero (line height 1.1–1.2). Bold 700 for section headers. SemiBold 600 for card titles and buttons. Regular 400 for body text (line height 1.4–1.5). Must support iOS Dynamic Type and Android font scaling — never hardcode pixel sizes without respecting system font scale. Button text: uppercase, letterSpacing 0.5. Caption: 12px Regular. Muted: Slate 500 #64748B."
73,Sketch Hand-Drawn Mobile (Kalam + Patrick Hand),Handwritten + Handwritten (Dual),Kalam,Patrick Hand,"sketch, hand-drawn, handwriting, human, imperfect, organic, paper, kalam, patrick hand, education, journal, creative","Journaling apps, prototype tools, children's picturebook apps, creative platforms, gamified puzzle apps",https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap,@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');,"fontFamily: { heading: ['Kalam', 'cursive'], body: ['Patrick Hand', 'cursive'] }","Dual handwritten stack: Kalam Bold (700) for all headings — high visual weight, felt-tip marker aesthetic, conveys intentional messiness. Patrick Hand Regular for all body text — highly legible at mobile sizes while remaining distinctly human. Scale: Heading 28–36px with lineHeight adjusted for descenders. Body 16–18px lineHeight 1.5. Labels 14px. Vary font sizes slightly between adjacent elements for spontaneous feel. Avoid alignment: 'center' for long body text — left-aligned reads more naturally. Both fonts require useFonts loading in Expo. Never use these fonts for financial figures or legal text."
74,Neumorphism Mobile (Plus Jakarta Sans + System),Geometric Sans (System Fallback),Plus Jakarta Sans,Plus Jakarta Sans,"neumorphism, soft ui, monochromatic, cool grey, minimal, physical, depth, ceramic, system font, utility","Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand showcase pages","https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single-family or System fallback: Plus Jakarta Sans Bold/Medium pairs beautifully with the monochromatic #E0E5EC surface — subtle geometry without competing with the depth effect. Heading: 24–32px Bold (700), letterSpacing -0.5 for modern premium feel. Body: 16px Medium (500), lineHeight 1.4. Caption: 12px Regular (400). Use Text Primary #3D4852 (7.5:1 contrast against #E0E5EC) for all primary text. Use Text Muted #6B7280 (4.6:1 contrast) for secondary text. Accent color #6C63FF only on active labels or focus indicators. Never use italic or thin weights — they lose legibility against the embossed background. System (SF Pro / Roboto) is an acceptable fallback for performance-sensitive implementations."
1 No Font Pairing Name Category Heading Font Body Font Mood/Style Keywords Best For Google Fonts URL CSS Import Tailwind Config Notes
18 17 Brutalist Raw Mono + Mono Space Mono Space Mono brutalist, raw, technical, monospace, minimal, stark Brutalist designs, developer portfolios, experimental, tech art https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap'); fontFamily: { mono: ['Space Mono', 'monospace'] } All-mono for raw brutalist aesthetic. Limited weights.
19 18 Fashion Forward Sans + Sans Syne Manrope fashion, avant-garde, creative, bold, artistic, edgy Fashion brands, creative agencies, art galleries, design studios https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap'); fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] } Syne's unique character for headlines. Manrope for readability.
20 19 Soft Rounded Sans + Sans Varela Round Nunito Sans soft, rounded, friendly, approachable, warm, gentle Children's products, pet apps, friendly brands, wellness, soft UI https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap'); fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] } Both rounded and friendly. Perfect for soft UI designs.
21 20 Premium Sans Premium Sans (DM Sans) Sans + Sans Satoshi DM Sans General Sans DM Sans premium, modern, clean, sophisticated, versatile, balanced Premium brands, modern agencies, SaaS, portfolios, startups https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap'); fontFamily: { sans: ['DM Sans', 'sans-serif'] } Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative. Single importable Google family with balanced weights for premium sans layouts.
22 21 Vietnamese Friendly Sans + Sans Be Vietnam Pro Noto Sans vietnamese, international, readable, clean, multilingual, accessible Vietnamese sites, multilingual apps, international products https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap'); fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] } Be Vietnam Pro excellent Vietnamese support. Noto as fallback.
23 22 Japanese Elegant Serif + Sans Noto Serif JP Noto Sans JP japanese, elegant, traditional, modern, multilingual, readable Japanese sites, Japanese restaurants, cultural sites, anime/manga https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap'); fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] } Noto fonts excellent Japanese support. Traditional + modern feel.
24 23 Korean Modern Sans + Sans Noto Sans KR Noto Sans KR korean, modern, clean, professional, multilingual, readable Korean sites, K-beauty, K-pop, Korean businesses, multilingual https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap'); fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] } Clean Korean typography. Single font with weight variations.
37 36 Crypto/Web3 Sans + Sans Orbitron Exo 2 crypto, web3, futuristic, tech, blockchain, digital Crypto platforms, NFT, blockchain, web3, futuristic tech https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700&display=swap'); fontFamily: { display: ['Orbitron', 'sans-serif'], body: ['Exo 2', 'sans-serif'] } Orbitron for futuristic headers. Exo 2 for readable body.
38 37 Gaming Bold Display + Sans Russo One Chakra Petch gaming, bold, action, esports, competitive, energetic Gaming, esports, action games, competitive sports, entertainment https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&family=Russo+One&display=swap'); fontFamily: { display: ['Russo One', 'sans-serif'], body: ['Chakra Petch', 'sans-serif'] } Russo One for impact. Chakra Petch for techy body text.
39 38 Indie/Craft Display + Sans Amatic SC Cabin indie, craft, handmade, artisan, organic, creative Craft brands, indie products, artisan, handmade, organic products https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Cabin:wght@400;500;600;700&display=swap'); fontFamily: { display: ['Amatic SC', 'sans-serif'], sans: ['Cabin', 'sans-serif'] } Amatic for handwritten feel. Cabin for readable body.
40 39 Startup Bold Startup Bold (Outfit + Rubik) Sans + Sans Clash Display Outfit Satoshi Rubik startup, bold, modern, innovative, confident, dynamic Startups, pitch decks, product launches, bold brands https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap'); fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Rubik', 'sans-serif'] } Note: Clash Display on Fontshare. Outfit as Google alternative. Importable Google pairing: Outfit for display headings and Rubik for body text.
41 40 E-commerce Clean Sans + Sans Rubik Nunito Sans ecommerce, clean, shopping, product, retail, conversion E-commerce, online stores, product pages, retail, shopping https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700&display=swap'); fontFamily: { heading: ['Rubik', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] } Clean readable fonts perfect for product descriptions.
42 41 Academic/Research Serif + Sans Crimson Pro Atkinson Hyperlegible academic, research, scholarly, accessible, readable, educational Universities, research papers, academic journals, educational https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap'); fontFamily: { serif: ['Crimson Pro', 'serif'], sans: ['Atkinson Hyperlegible', 'sans-serif'] } Crimson for scholarly headlines. Atkinson for accessibility.
43 42 Dashboard Data Mono + Sans Fira Code Fira Sans dashboard, data, analytics, code, technical, precise Dashboards, analytics, data visualization, admin panels https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap'); fontFamily: { mono: ['Fira Code', 'monospace'], sans: ['Fira Sans', 'sans-serif'] } Fira family cohesion. Code for data, Sans for labels.
57 56 Kinetic Motion Display + Mono Syncopate Space Mono kinetic, motion, futuristic, speed, wide, tech Music festivals, automotive, high-energy brands https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syncopate:wght@400;700&display=swap'); fontFamily: { display: ['Syncopate', 'sans-serif'], mono: ['Space Mono', 'monospace'] } Syncopate's wide stance works well with motion effects.
58 57 Gen Z Brutal Display + Sans Anton Epilogue brutal, loud, shouty, meme, internet, bold Gen Z marketing, streetwear, viral campaigns https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Anton&family=Epilogue:wght@400;500;600;700&display=swap'); fontFamily: { display: ['Anton', 'sans-serif'], body: ['Epilogue', 'sans-serif'] } Anton is impactful and condensed. Good for stickers/badges.
59 58 Bauhaus Geometric Geometric Sans + Single Weight Outfit Outfit bauhaus, geometric, constructivist, bold, uppercase, architectural, mechanical, poster, tactile Bauhaus mobile apps, bold editorial mobile, design-forward branding apps, art/culture platforms https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&display=swap'); fontFamily: { display: ['Outfit', 'sans-serif'], body: ['Outfit', 'sans-serif'] } Single-family system: Outfit 900 uppercase tracking-tighter for heroes; Outfit 700 uppercase for buttons/nav; Outfit 500 for body. Scale aggressively: text-4xl–text-5xl headlines on mobile.
60 59 Minimalist Monochrome Editorial Serif + Serif + Mono (Triple Stack) Playfair Display Source Serif 4 monochrome, editorial, austere, typographic, pocket manifesto, luxury, high contrast, brutalist mobile Luxury fashion mobile apps, editorial publications, digital exhibitions, portfolio apps, high-contrast e-reader aesthetics https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400|Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300 https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300&display=swap'); fontFamily: { display: ['Playfair Display', 'serif'], body: ['Source Serif 4', 'serif'], mono: ['JetBrains Mono', 'monospace'] } Triple stack: Playfair Display 900 tracking-tighter leading-[0.9] for heroes (text-5xl–text-6xl breaks words graphically). Source Serif 4 300–600 for body legibility. JetBrains Mono 400–500 uppercase tracking-widest for tags/dates/labels. NO UI sans-serif — 100% serif/mono.
61 60 Modern Dark Cinema (Inter System) Sans + Mono Inter Inter dark, cinematic, technical, precision, clean, premium, developer, professional, high-end utility Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end productivity apps https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); fontFamily: { sans: ['Inter', 'sans-serif'] } Single-family precision system: Inter 700 (-1.5 tracking) for Display 48pt; Inter 600 (-0.5 tracking) for H1 32pt / H2 24pt; Inter 400 for body 16pt; Inter 500 uppercase +1.2 tracking for labels/mono. Gradient text via mask-view + react-native-linear-gradient (#FFFFFF → rgba(255,255,255,0.7)) on major headers.
62 61 SaaS Mobile Boutique (Calistoga + Inter) Display Serif + Sans + Mono Calistoga Inter saas, boutique, electric, warm, editorial, bold, premium, fintech, business, dual font, human warmth B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations platforms 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 @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'); fontFamily: { display: ['Calistoga', 'serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] } 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.
63 62 Terminal CLI Monospace Mono + Mono (Single Family) JetBrains Mono JetBrains Mono terminal, cli, hacker, monospace, matrix, developer, retro-future, command line, precision, OLED Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, security tools, geek-culture portfolios https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap'); fontFamily: { mono: ['JetBrains Mono', 'monospace'] } Single monospace system: use ONLY JetBrains Mono (or SpaceMono-Regular as system fallback). Strict sizes: 12pt / 14pt / 16pt only — no in-between. Weight: 400 normal (bold ruins mono character). Line height: 1.2x font size for information density. Letter spacing: normal (monospaced auto-spacing). All UI labels uppercase. ASCII borders and text-based progress bars.
64 63 Kinetic Brutalism (Space Grotesk) Geometric Sans (Single Dominant) Space Grotesk Space Grotesk kinetic, brutalist, aggressive, uppercase, oversized, display, motion, street, bold, high-energy, zine Music/culture apps, sports platforms, brand flagship mobile, performance dashboards, underground product drops https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap'); fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] } Dominant single-family system: Space Grotesk 700–900 for ALL display. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use Inter as fallback. Font scale must use PixelRatio helper for responsive sizing. Dominant single-family system: Space Grotesk 700 for display, with 400–600 available for body and supporting hierarchy. Scale: Hero 60–120pt (windowWidth/375*size), Section 40–50pt, Card titles 28–32pt, Body 18–20pt, Labels 12pt. ALL display/buttons/nav: UPPERCASE, letterSpacing -1 (large) / +2 (labels), lineHeight 0.9–1.1x. Use a sans-serif system fallback. Font scale must use PixelRatio helper for responsive sizing.
65 64 Flat Design Mobile (System Bold) Sans + Sans Inter Inter flat, clean, system, bold, geometric, cross-platform, icon, poster, minimal, functional, responsive Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informational apps, icon-heavy interfaces https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap'); fontFamily: { sans: ['Inter', 'sans-serif'] } System-first strategy: Inter as primary, falls back to system SF/Roboto on iOS/Android. Scale: Headlines fontWeight 800 letterSpacing -0.5; Subheadings fontWeight 600 fontSize 18; Body fontWeight 400 lineHeight 24; Labels fontWeight 700 uppercase letterSpacing 1. Thick weights carry all hierarchy since there are no shadows. Use aggressive size contrast (poster rule: body 16pt vs headline 40pt+). Avoid italic.
66 65 Material You MD3 (Roboto System) Sans (System Default) Roboto Roboto material design 3, md3, android, google, tonal, friendly, rounded, accessible, adaptive Android apps, cross-platform tools, productivity software, data-heavy B2B dashboards, enterprise mobile https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); fontFamily: { sans: ['Roboto', 'sans-serif'] } MD3 type scale: Display Large 56px/400/64px. Headline Large 32px/500/40px. Title Large 22px/500/28px. Body Large 16px/400/24px. Label Medium 12px/500/16px. Buttons and Labels: letterSpacing 0.1px. Use system Roboto on Android; load from Google Fonts for iOS parity. Never use custom weights beyond 300–700.
67 66 Neo Brutalism Mobile (Space Grotesk Heavy) Neo Brutalism Mobile (Space Grotesk Bold) Geometric Sans (Bold-Only) Space Grotesk Space Grotesk neo brutalism, pop art, loud, bold, heavy, stickers, mechanical, high contrast, cream, gen-z Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolios, collage-style apps https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap'); fontFamily: { display: ['Space Grotesk', 'sans-serif'], body: ['Space Grotesk', 'sans-serif'] } Strictly 700 (Bold) and 900 (Black/Heavy) ONLY — never Regular or Light. Display: 48–64px. Heading: 24–32px. Body: 18–20px (stays heavy for brutalist density). Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. System bold as fallback. No italic, no thin weights. Single-weight system using the loaded Space Grotesk 700 (Bold). Display: 48–64px. Heading: 24–32px. Body: 18–20px for deliberate brutalist density. Labels: 14px ALL CAPS letterSpacing 2. All buttons and navigation: uppercase. Use a bold sans-serif system fallback. No italic or thin weights.
68 67 Bold Typography Mobile (Inter-Tight Poster) Bold Typography Mobile (Inter Poster) Sans + Serif (Display) + Mono Inter Playfair Display bold typography, editorial, poster, near-black, vermillion, luxury, type-as-hero, manifesto, high-contrast Creative brand flagships, reading platforms, event apps, flash pages, luxury mobile experiences https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400|JetBrains+Mono:wght@400|Playfair+Display:ital@1 https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400&family=Playfair+Display:ital@1&display=swap'); fontFamily: { display: ['Inter', 'sans-serif'], quote: ['Playfair Display', 'serif'], mono: ['JetBrains Mono', 'monospace'] } Tri-stack: Inter 600–800 for all UI (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic ONLY for pull quotes. JetBrains Mono for labels and stats. Scale: 12px labels, 16px body, 22px sub, 32px section, 40px H2, 56px H1, 72px Hero Statement. 5:1 ratio H1:Body is mandatory. lineHeight 1.1 headlines, 1.6 body. Underlines (2–3pt accent) replace buttons for interactions. Tri-stack: Inter 600–800 for UI and display type (letterSpacing -1.5px heroes, -0.5px subheads). Playfair Display Italic only for pull quotes. JetBrains Mono for labels and stats. Suggested scale: 12px labels, 16px body, 22px subhead, 32px section, 40px H2, 56px H1, 72px hero statement. Use lineHeight 1.1 for headlines and 1.6 for body. Keep text links visibly identifiable; do not replace button semantics with styled underlines.
69 68 Academia Mobile (Cormorant + Crimson + Cinzel) Serif + Book Serif + Engraved (Triple Stack) Cormorant Garamond Crimson Pro academia, library, mahogany, parchment, brass, scholarly, prestige, antique, victorian, leather Knowledge management apps, scholarly reading tools, personal brand portfolios, RPG games, cultural community platforms https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500|Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400 https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,500;0,700;1,300;1,500&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap'); fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Crimson Pro', 'serif'], display: ['Cinzel', 'serif'] } Triple-stack: Cormorant Garamond Medium for all headings (32–40px tight leading). Crimson Pro Regular for body reading text (16–18px, lineHeight 24–26px). Cinzel SemiBold for ALL-CAPS labels, overlines, section prefixes (10–12px, letterSpacing 2–3px). Drop caps: first letter 60px Cinzel in Brass #C9A962. Section prefix: VOLUME I/II/III in Cinzel 10px. NO sans-serif anywhere.
70 69 Cyberpunk Mobile (Orbitron + JetBrains Mono) Tech Display + Mono Orbitron JetBrains Mono cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, magenta, chamfered, tactical Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cyberpunk narrative games https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap'); fontFamily: { heading: ['Orbitron', 'sans-serif'], body: ['JetBrains Mono', 'monospace'] } Dual-stack: Orbitron 700–900 for H1 (42px uppercase letterSpacing 4, fontWeight 900). JetBrains Mono 400–500 for all body/data text (14px letterSpacing 1). Labels: 10px uppercase opacity 0.7. Heading scale aggressive: H1 42px, H2 28px, Section 20px. Body 14px monospace only. NO mixed sans-serif. Fallback: monospace system font. Orbitron requires loading — use NativeWind or useFonts hook.
71 70 Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono) Geometric Sans + Sans + Mono (Triple) Space Grotesk Inter web3, bitcoin, defi, digital gold, fintech, crypto, trustless, luminescent, precision, dark DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech brand landing pages https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap'); fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] } Tri-stack: Space Grotesk 600–700 for headings (geometric, technical character). Inter 400–600 for all body and UI text (high legibility). JetBrains Mono Medium for all data/stats/prices/hashes (technical accuracy). Buttons: Inter Bold uppercase letterSpacing 1.5. Balance figures use MaskedView gradient text (orange→gold). Heading scale: H1 36–42px, H2 24–28px, body 16–18px, mono labels 12–14px.
72 71 Claymorphism Mobile (Nunito + DM Sans) Display Rounded + Geometric Sans Nunito DM Sans claymorphism, clay, rounded, playful, candy, bubbly, soft, 3d, children, education, tactile, spring, nunito, dm sans Children education apps, teen social, brand mascot apps, creative tools, fintech gamification https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400|Nunito:ital,wght@0,700;0,800;0,900;1,700 https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap'); fontFamily: { display: ['Nunito', 'sans-serif'], body: ['DM Sans', 'sans-serif'] } Dual-stack: Nunito Black (900) or ExtraBold (800) for ALL headings — rounded terminals are mandatory. DM Sans Medium (500) for body text — clean and geometric. Scale: Hero 48px lineHeight 52 letterSpacing -1. Section Title 32px lineHeight 38. Card Title 22px lineHeight 28. Body 16px lineHeight 24. Never use Nunito for body text (too decorative at small sizes). Never use weights below 700 for any heading. includeFontPadding: false on all Nunito Text components for vertical centering in rounded buttons.
73 72 Enterprise SaaS Mobile (Plus Jakarta Sans) Geometric Sans (Single Family) Plus Jakarta Sans Plus Jakarta Sans enterprise, saas, b2b, professional, indigo, modern, approachable, legible, ios dynamic type, android scaling B2B SaaS apps, productivity tools, government and finance mobile apps, admin dashboards, enterprise onboarding https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap'); fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] } Single-family system: Plus Jakarta Sans balances professional authority with mobile approachability. Weight scale: ExtraBold 800 for screen titles/hero (line height 1.1–1.2). Bold 700 for section headers. SemiBold 600 for card titles and buttons. Regular 400 for body text (line height 1.4–1.5). Must support iOS Dynamic Type and Android font scaling — never hardcode pixel sizes without respecting system font scale. Button text: uppercase, letterSpacing 0.5. Caption: 12px Regular. Muted: Slate 500 #64748B.
74 73 Sketch Hand-Drawn Mobile (Kalam + Patrick Hand) Handwritten + Handwritten (Dual) Kalam Patrick Hand sketch, hand-drawn, handwriting, human, imperfect, organic, paper, kalam, patrick hand, education, journal, creative Journaling apps, prototype tools, children's picturebook apps, creative platforms, gamified puzzle apps https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap'); fontFamily: { heading: ['Kalam', 'cursive'], body: ['Patrick Hand', 'cursive'] } Dual handwritten stack: Kalam Bold (700) for all headings — high visual weight, felt-tip marker aesthetic, conveys intentional messiness. Patrick Hand Regular for all body text — highly legible at mobile sizes while remaining distinctly human. Scale: Heading 28–36px with lineHeight adjusted for descenders. Body 16–18px lineHeight 1.5. Labels 14px. Vary font sizes slightly between adjacent elements for spontaneous feel. Avoid alignment: 'center' for long body text — left-aligned reads more naturally. Both fonts require useFonts loading in Expo. Never use these fonts for financial figures or legal text.
75 74 Neumorphism Mobile (Plus Jakarta Sans + System) Geometric Sans (System Fallback) Plus Jakarta Sans Plus Jakarta Sans neumorphism, soft ui, monochromatic, cool grey, minimal, physical, depth, ceramic, system font, utility Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand showcase pages https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap'); fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] } Single-family or System fallback: Plus Jakarta Sans Bold/Medium pairs beautifully with the monochromatic #E0E5EC surface — subtle geometry without competing with the depth effect. Heading: 24–32px Bold (700), letterSpacing -0.5 for modern premium feel. Body: 16px Medium (500), lineHeight 1.4. Caption: 12px Regular (400). Use Text Primary #3D4852 (7.5:1 contrast against #E0E5EC) for all primary text. Use Text Muted #6B7280 (4.6:1 contrast) for secondary text. Accent color #6C63FF only on active labels or focus indicators. Never use italic or thin weights — they lose legibility against the embossed background. System (SF Pro / Roboto) is an acceptable fallback for performance-sensitive implementations.