@design-ai/cli 4.55.0

package/knowledge/typography/font-pairings.md

@@ -0,0 +1,332 @@
+---
+title: Curated font pairings
+source: refs/ui-ux-pro-max/src/ui-ux-pro-max/data/typography.csv
+upstream: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
+extracted_at: 2026-05-19
+applies_to: [google-fonts, web-typography]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Curated font pairings
+
+Tested heading + body combinations grouped by mood. Pick by **best-for** and **mood keywords**, not by aesthetic guess.
+
+| # | Pairing | Type | Heading | Body | Mood | Best for |
+| --- | --- | --- | --- | --- | --- | --- |
+| 1 | **Classic Elegant** | Serif + Sans | Playfair Display | Inter | elegant, luxury, sophisticated, timeless, premium, editorial | Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce |
+| 2 | **Modern Professional** | Sans + Sans | Poppins | Open Sans | modern, professional, clean, corporate, friendly, approachab | SaaS, corporate sites, business apps, startups, professional services |
+| 3 | **Tech Startup** | Sans + Sans | Space Grotesk | DM Sans | tech, startup, modern, innovative, bold, futuristic | Tech companies, startups, SaaS, developer tools, AI products |
+| 4 | **Editorial Classic** | Serif + Serif | Cormorant Garamond | Libre Baskerville | editorial, classic, literary, traditional, refined, bookish | Publishing, blogs, news sites, literary magazines, book covers |
+| 5 | **Minimal Swiss** | Sans + Sans | Inter | Inter | minimal, clean, swiss, functional, neutral, professional | Dashboards, admin panels, documentation, enterprise apps, design systems |
+| 6 | **Playful Creative** | Display + Sans | Fredoka | Nunito | playful, friendly, fun, creative, warm, approachable | Children's apps, educational, gaming, creative tools, entertainment |
+| 7 | **Bold Statement** | Display + Sans | Bebas Neue | Source Sans 3 | bold, impactful, strong, dramatic, modern, headlines | Marketing sites, portfolios, agencies, event pages, sports |
+| 8 | **Wellness Calm** | Serif + Sans | Lora | Raleway | calm, wellness, health, relaxing, natural, organic | Health apps, wellness, spa, meditation, yoga, organic brands |
+| 9 | **Developer Mono** | Mono + Sans | JetBrains Mono | IBM Plex Sans | code, developer, technical, precise, functional, hacker | Developer tools, documentation, code editors, tech blogs, CLI apps |
+| 10 | **Retro Vintage** | Display + Serif | Abril Fatface | Merriweather | retro, vintage, nostalgic, dramatic, decorative, bold | Vintage brands, breweries, restaurants, creative portfolios, posters |
+| 11 | **Geometric Modern** | Sans + Sans | Outfit | Work Sans | geometric, modern, clean, balanced, contemporary, versatile | General purpose, portfolios, agencies, modern brands, landing pages |
+| 12 | **Luxury Serif** | Serif + Sans | Cormorant | Montserrat | luxury, high-end, fashion, elegant, refined, premium | Fashion brands, luxury e-commerce, jewelry, high-end services |
+| 13 | **Friendly SaaS** | Sans + Sans | Plus Jakarta Sans | Plus Jakarta Sans | friendly, modern, saas, clean, approachable, professional | SaaS products, web apps, dashboards, B2B, productivity tools |
+| 14 | **News Editorial** | Serif + Sans | Newsreader | Roboto | news, editorial, journalism, trustworthy, readable, informat | News sites, blogs, magazines, journalism, content-heavy sites |
+| 15 | **Handwritten Charm** | Script + Sans | Caveat | Quicksand | handwritten, personal, friendly, casual, warm, charming | Personal blogs, invitations, creative portfolios, lifestyle brands |
+| 16 | **Corporate Trust** | Sans + Sans | Lexend | Source Sans 3 | corporate, trustworthy, accessible, readable, professional,  | Enterprise, government, healthcare, finance, accessibility-focused |
+| 17 | **Brutalist Raw** | Mono + Mono | Space Mono | Space Mono | brutalist, raw, technical, monospace, minimal, stark | Brutalist designs, developer portfolios, experimental, tech art |
+| 18 | **Fashion Forward** | Sans + Sans | Syne | Manrope | fashion, avant-garde, creative, bold, artistic, edgy | Fashion brands, creative agencies, art galleries, design studios |
+| 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 |
+| 20 | **Premium Sans** | Sans + Sans | Satoshi | General Sans | premium, modern, clean, sophisticated, versatile, balanced | Premium brands, modern agencies, SaaS, portfolios, startups |
+| 21 | **Vietnamese Friendly** | Sans + Sans | Be Vietnam Pro | Noto Sans | vietnamese, international, readable, clean, multilingual, ac | Vietnamese sites, multilingual apps, international products |
+| 22 | **Japanese Elegant** | Serif + Sans | Noto Serif JP | Noto Sans JP | japanese, elegant, traditional, modern, multilingual, readab | Japanese sites, Japanese restaurants, cultural sites, anime/manga |
+| 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 |
+| 24 | **Chinese Traditional** | Serif + Sans | Noto Serif TC | Noto Sans TC | chinese, traditional, elegant, cultural, multilingual, reada | Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets |
+| 25 | **Chinese Simplified** | Sans + Sans | Noto Sans SC | Noto Sans SC | chinese, simplified, modern, professional, multilingual, rea | Simplified Chinese sites, mainland China market, business apps |
+| 26 | **Arabic Elegant** | Serif + Sans | Noto Naskh Arabic | Noto Sans Arabic | arabic, elegant, traditional, cultural, RTL, readable | Arabic sites, Middle East market, Islamic content, bilingual sites |
+| 27 | **Thai Modern** | Sans + Sans | Noto Sans Thai | Noto Sans Thai | thai, modern, readable, clean, multilingual, accessible | Thai sites, Southeast Asia, tourism, Thai restaurants |
+| 28 | **Hebrew Modern** | Sans + Sans | Noto Sans Hebrew | Noto Sans Hebrew | hebrew, modern, RTL, clean, professional, readable | Hebrew sites, Israeli market, Jewish content, bilingual sites |
+| 29 | **Legal Professional** | Serif + Sans | EB Garamond | Lato | legal, professional, traditional, trustworthy, formal, autho | Law firms, legal services, contracts, formal documents, government |
+| 30 | **Medical Clean** | Sans + Sans | Figtree | Noto Sans | medical, clean, accessible, professional, healthcare, trustw | Healthcare, medical clinics, pharma, health apps, accessibility |
+| 31 | **Financial Trust** | Sans + Sans | IBM Plex Sans | IBM Plex Sans | financial, trustworthy, professional, corporate, banking, se | Banks, finance, insurance, investment, fintech, enterprise |
+| 32 | **Real Estate Luxury** | Serif + Sans | Cinzel | Josefin Sans | real estate, luxury, elegant, sophisticated, property, premi | Real estate, luxury properties, architecture, interior design |
+| 33 | **Restaurant Menu** | Serif + Sans | Playfair Display SC | Karla | restaurant, menu, culinary, elegant, foodie, hospitality | Restaurants, cafes, food blogs, culinary, hospitality |
+| 34 | **Art Deco** | Display + Sans | Poiret One | Didact Gothic | art deco, vintage, 1920s, elegant, decorative, gatsby | Vintage events, art deco themes, luxury hotels, classic cocktails |
+| 35 | **Magazine Style** | Serif + Sans | Libre Bodoni | Public Sans | magazine, editorial, publishing, refined, journalism, print | Magazines, online publications, editorial content, journalism |
+| 36 | **Crypto/Web3** | Sans + Sans | Orbitron | Exo 2 | crypto, web3, futuristic, tech, blockchain, digital | Crypto platforms, NFT, blockchain, web3, futuristic tech |
+| 37 | **Gaming Bold** | Display + Sans | Russo One | Chakra Petch | gaming, bold, action, esports, competitive, energetic | Gaming, esports, action games, competitive sports, entertainment |
+| 38 | **Indie/Craft** | Display + Sans | Amatic SC | Cabin | indie, craft, handmade, artisan, organic, creative | Craft brands, indie products, artisan, handmade, organic products |
+| 39 | **Startup Bold** | Sans + Sans | Clash Display | Satoshi | startup, bold, modern, innovative, confident, dynamic | Startups, pitch decks, product launches, bold brands |
+| 40 | **E-commerce Clean** | Sans + Sans | Rubik | Nunito Sans | ecommerce, clean, shopping, product, retail, conversion | E-commerce, online stores, product pages, retail, shopping |
+| 41 | **Academic/Research** | Serif + Sans | Crimson Pro | Atkinson Hyperlegible | academic, research, scholarly, accessible, readable, educati | Universities, research papers, academic journals, educational |
+| 42 | **Dashboard Data** | Mono + Sans | Fira Code | Fira Sans | dashboard, data, analytics, code, technical, precise | Dashboards, analytics, data visualization, admin panels |
+| 43 | **Music/Entertainment** | Display + Sans | Righteous | Poppins | music, entertainment, fun, energetic, bold, performance | Music platforms, entertainment, events, festivals, performers |
+| 44 | **Minimalist Portfolio** | Sans + Sans | Archivo | Space Grotesk | minimal, portfolio, designer, creative, clean, artistic | Design portfolios, creative professionals, minimalist brands |
+| 45 | **Kids/Education** | Display + Sans | Baloo 2 | Comic Neue | kids, education, playful, friendly, colorful, learning | Children's apps, educational games, kid-friendly content |
+| 46 | **Wedding/Romance** | Script + Serif | Great Vibes | Cormorant Infant | wedding, romance, elegant, script, invitation, feminine | Wedding sites, invitations, romantic brands, bridal |
+| 47 | **Science/Tech** | Sans + Sans | Exo | Roboto Mono | science, technology, research, data, futuristic, precise | Science, research, tech documentation, data-heavy sites |
+| 48 | **Accessibility First** | Sans + Sans | Atkinson Hyperlegible | Atkinson Hyperlegible | accessible, readable, inclusive, WCAG, dyslexia-friendly, cl | Accessibility-critical sites, government, healthcare, inclusive design |
+| 49 | **Sports/Fitness** | Sans + Sans | Barlow Condensed | Barlow | sports, fitness, athletic, energetic, condensed, action | Sports, fitness, gyms, athletic brands, competition |
+| 50 | **Luxury Minimalist** | Serif + Sans | Bodoni Moda | Jost | luxury, minimalist, high-end, sophisticated, refined, premiu | Luxury minimalist brands, high-end fashion, premium products |
+| 51 | **Tech/HUD Mono** | Mono + Mono | Share Tech Mono | Fira Code | tech, futuristic, hud, sci-fi, data, monospaced, precise | Sci-fi interfaces, developer tools, cybersecurity, dashboards |
+| 52 | **Pixel Retro** | Display + Sans | Press Start 2P | VT323 | pixel, retro, gaming, 8-bit, nostalgic, arcade | Pixel art games, retro websites, creative portfolios |
+| 53 | **Neubrutalist Bold** | Display + Sans | Lexend Mega | Public Sans | bold, neubrutalist, loud, strong, geometric, quirky | Neubrutalist designs, Gen Z brands, bold marketing |
+| 54 | **Academic/Archival** | Serif + Serif | EB Garamond | Crimson Text | academic, old-school, university, research, serious, traditi | University sites, archives, research papers, history |
+| 55 | **Spatial Clear** | Sans + Sans | Inter | Inter | spatial, legible, glass, system, clean, neutral | Spatial computing, AR/VR, glassmorphism interfaces |
+| 56 | **Kinetic Motion** | Display + Mono | Syncopate | Space Mono | kinetic, motion, futuristic, speed, wide, tech | Music festivals, automotive, high-energy brands |
+| 57 | **Gen Z Brutal** | Display + Sans | Anton | Epilogue | brutal, loud, shouty, meme, internet, bold | Gen Z marketing, streetwear, viral campaigns |
+| 58 | **Minimalist Monochrome Editorial** | Serif + Serif + Mono (Triple Stack) | Playfair Display | Source Serif 4 | monochrome, editorial, austere, typographic, pocket manifest | Luxury fashion mobile apps, editorial publications, digital exhibitions, portfol |
+| 59 | **Modern Dark Cinema (Inter System)** | Sans + Mono | Inter | Inter | dark, cinematic, technical, precision, clean, premium, devel | Developer tools, fintech/trading, AI dashboards, streaming platforms, high-end p |
+| 60 | **SaaS Mobile Boutique (Calistoga + Inter)** | Display Serif + Sans + Mono | Calistoga | Inter | saas, boutique, electric, warm, editorial, bold, premium, fi | B2B SaaS mobile, fintech apps, analytics dashboards, marketing tools, operations |
+| 61 | **Terminal CLI Monospace** | Mono + Mono (Single Family) | JetBrains Mono | JetBrains Mono | terminal, cli, hacker, monospace, matrix, developer, retro-f | Developer tools, Web3/blockchain apps, hacker aesthetic, sci-fi games, ARG, secu |
+| 62 | **Kinetic Brutalism (Space Grotesk)** | Geometric Sans (Single Dominant) | Space Grotesk | Space Grotesk | kinetic, brutalist, aggressive, uppercase, oversized, displa | Music/culture apps, sports platforms, brand flagship mobile, performance dashboa |
+| 63 | **Flat Design Mobile (System Bold)** | Sans + Sans | Inter | Inter | flat, clean, system, bold, geometric, cross-platform, icon,  | Cross-platform apps, dashboards, system UI, onboarding, marketing pages, informa |
+| 64 | **Material You MD3 (Roboto System)** | Sans (System Default) | Roboto | Roboto | material design 3, md3, android, google, tonal, friendly, ro | Android apps, cross-platform tools, productivity software, data-heavy B2B dashbo |
+| 65 | **Neo Brutalism Mobile (Space Grotesk Heavy)** | Geometric Sans (Bold-Only) | Space Grotesk | Space Grotesk | neo brutalism, pop art, loud, bold, heavy, stickers, mechani | Creative tools, Gen-Z marketing, e-commerce for youth culture, content portfolio |
+| 66 | **Bold Typography Mobile (Inter-Tight Poster)** | Sans + Serif (Display) + Mono | Inter | Playfair Display | bold typography, editorial, poster, near-black, vermillion,  | Creative brand flagships, reading platforms, event apps, flash pages, luxury mob |
+| 67 | **Academia Mobile (Cormorant + Crimson + Cinzel)** | Serif + Book Serif + Engraved (Triple Stack) | Cormorant Garamond | Crimson Pro | academia, library, mahogany, parchment, brass, scholarly, pr | Knowledge management apps, scholarly reading tools, personal brand portfolios, R |
+| 68 | **Cyberpunk Mobile (Orbitron + JetBrains Mono)** | Tech Display + Mono | Orbitron | JetBrains Mono | cyberpunk, neon, glitch, hud, sci-fi, dark, matrix green, ma | Gaming companion apps, fintech/crypto, data visualization, dark brand apps, cybe |
+| 69 | **Web3 Bitcoin DeFi (Space Grotesk + Inter + Mono)** | Geometric Sans + Sans + Mono (Triple) | Space Grotesk | Inter | web3, bitcoin, defi, digital gold, fintech, crypto, trustles | DeFi protocols and wallets, NFT platforms, metaverse social apps, high-tech bran |
+| 70 | **Claymorphism Mobile (Nunito + DM Sans)** | Display Rounded + Geometric Sans | Nunito | DM Sans | claymorphism, clay, rounded, playful, candy, bubbly, soft, 3 | Children education apps, teen social, brand mascot apps, creative tools, fintech |
+| 71 | **Enterprise SaaS Mobile (Plus Jakarta Sans)** | Geometric Sans (Single Family) | Plus Jakarta Sans | Plus Jakarta Sans | enterprise, saas, b2b, professional, indigo, modern, approac | B2B SaaS apps, productivity tools, government and finance mobile apps, admin das |
+| 72 | **Sketch Hand-Drawn Mobile (Kalam + Patrick Hand)** | Handwritten + Handwritten (Dual) | Kalam | Patrick Hand | sketch, hand-drawn, handwriting, human, imperfect, organic,  | Journaling apps, prototype tools, children's picturebook apps, creative platform |
+| 73 | **Neumorphism Mobile (Plus Jakarta Sans + System)** | Geometric Sans (System Fallback) | Plus Jakarta Sans | Plus Jakarta Sans | neumorphism, soft ui, monochromatic, cool grey, minimal, phy | Smart home controls, minimal tools, aesthetic dashboards, health monitors, brand |
+
+## Implementation
+
+### Classic Elegant
+
+- **Heading**: Playfair Display
+- **Body**: Inter
+- **Mood**: elegant, luxury, sophisticated, timeless, premium, editorial
+- **Best for**: Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce
+- _Notes_: High contrast between elegant heading and clean body. Perfect for luxury/premium.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
+```
+
+### Modern Professional
+
+- **Heading**: Poppins
+- **Body**: Open Sans
+- **Mood**: modern, professional, clean, corporate, friendly, approachable
+- **Best for**: SaaS, corporate sites, business apps, startups, professional services
+- _Notes_: Geometric Poppins for headings, humanist Open Sans for readability.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+```
+
+### Tech Startup
+
+- **Heading**: Space Grotesk
+- **Body**: DM Sans
+- **Mood**: tech, startup, modern, innovative, bold, futuristic
+- **Best for**: Tech companies, startups, SaaS, developer tools, AI products
+- _Notes_: Space Grotesk has unique character, DM Sans is highly readable.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+```
+
+### Editorial Classic
+
+- **Heading**: Cormorant Garamond
+- **Body**: Libre Baskerville
+- **Mood**: editorial, classic, literary, traditional, refined, bookish
+- **Best for**: Publishing, blogs, news sites, literary magazines, book covers
+- _Notes_: All-serif pairing for traditional editorial feel.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');
+```
+
+### Minimal Swiss
+
+- **Heading**: Inter
+- **Body**: Inter
+- **Mood**: minimal, clean, swiss, functional, neutral, professional
+- **Best for**: Dashboards, admin panels, documentation, enterprise apps, design systems
+- _Notes_: Single font family with weight variations. Ultimate simplicity.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+```
+
+### Playful Creative
+
+- **Heading**: Fredoka
+- **Body**: Nunito
+- **Mood**: playful, friendly, fun, creative, warm, approachable
+- **Best for**: Children's apps, educational, gaming, creative tools, entertainment
+- _Notes_: Rounded, friendly fonts perfect for playful UIs.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');
+```
+
+### Bold Statement
+
+- **Heading**: Bebas Neue
+- **Body**: Source Sans 3
+- **Mood**: bold, impactful, strong, dramatic, modern, headlines
+- **Best for**: Marketing sites, portfolios, agencies, event pages, sports
+- _Notes_: Bebas Neue for large headlines only. All-caps display font.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
+```
+
+### Wellness Calm
+
+- **Heading**: Lora
+- **Body**: Raleway
+- **Mood**: calm, wellness, health, relaxing, natural, organic
+- **Best for**: Health apps, wellness, spa, meditation, yoga, organic brands
+- _Notes_: Lora's organic curves with Raleway's elegant simplicity.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');
+```
+
+### Developer Mono
+
+- **Heading**: JetBrains Mono
+- **Body**: IBM Plex Sans
+- **Mood**: code, developer, technical, precise, functional, hacker
+- **Best for**: Developer tools, documentation, code editors, tech blogs, CLI apps
+- _Notes_: JetBrains for code, IBM Plex for UI. Developer-focused.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+```
+
+### Retro Vintage
+
+- **Heading**: Abril Fatface
+- **Body**: Merriweather
+- **Mood**: retro, vintage, nostalgic, dramatic, decorative, bold
+- **Best for**: Vintage brands, breweries, restaurants, creative portfolios, posters
+- _Notes_: Abril Fatface for hero headlines only. High-impact vintage feel.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');
+```
+
+### Geometric Modern
+
+- **Heading**: Outfit
+- **Body**: Work Sans
+- **Mood**: geometric, modern, clean, balanced, contemporary, versatile
+- **Best for**: General purpose, portfolios, agencies, modern brands, landing pages
+- _Notes_: Both geometric but Outfit more distinctive for headings.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');
+```
+
+### Luxury Serif
+
+- **Heading**: Cormorant
+- **Body**: Montserrat
+- **Mood**: luxury, high-end, fashion, elegant, refined, premium
+- **Best for**: Fashion brands, luxury e-commerce, jewelry, high-end services
+- _Notes_: Cormorant's elegance with Montserrat's geometric precision.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
+```
+
+### Friendly SaaS
+
+- **Heading**: Plus Jakarta Sans
+- **Body**: Plus Jakarta Sans
+- **Mood**: friendly, modern, saas, clean, approachable, professional
+- **Best for**: SaaS products, web apps, dashboards, B2B, productivity tools
+- _Notes_: Single versatile font. Modern alternative to Inter.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
+```
+
+### News Editorial
+
+- **Heading**: Newsreader
+- **Body**: Roboto
+- **Mood**: news, editorial, journalism, trustworthy, readable, informative
+- **Best for**: News sites, blogs, magazines, journalism, content-heavy sites
+- _Notes_: Newsreader designed for long-form reading. Roboto for UI.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
+```
+
+### Handwritten Charm
+
+- **Heading**: Caveat
+- **Body**: Quicksand
+- **Mood**: handwritten, personal, friendly, casual, warm, charming
+- **Best for**: Personal blogs, invitations, creative portfolios, lifestyle brands
+- _Notes_: Use Caveat sparingly for accents. Quicksand for body.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');
+```
+
+### Corporate Trust
+
+- **Heading**: Lexend
+- **Body**: Source Sans 3
+- **Mood**: corporate, trustworthy, accessible, readable, professional, clean
+- **Best for**: Enterprise, government, healthcare, finance, accessibility-focused
+- _Notes_: Lexend designed for readability. Excellent accessibility.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');
+```
+
+### Brutalist Raw
+
+- **Heading**: Space Mono
+- **Body**: Space Mono
+- **Mood**: brutalist, raw, technical, monospace, minimal, stark
+- **Best for**: Brutalist designs, developer portfolios, experimental, tech art
+- _Notes_: All-mono for raw brutalist aesthetic. Limited weights.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
+```
+
+### Fashion Forward
+
+- **Heading**: Syne
+- **Body**: Manrope
+- **Mood**: fashion, avant-garde, creative, bold, artistic, edgy
+- **Best for**: Fashion brands, creative agencies, art galleries, design studios
+- _Notes_: Syne's unique character for headlines. Manrope for readability.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');
+```
+
+### Soft Rounded
+
+- **Heading**: Varela Round
+- **Body**: Nunito Sans
+- **Mood**: soft, rounded, friendly, approachable, warm, gentle
+- **Best for**: Children's products, pet apps, friendly brands, wellness, soft UI
+- _Notes_: Both rounded and friendly. Perfect for soft UI designs.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');
+```
+
+### Premium Sans
+
+- **Heading**: Satoshi
+- **Body**: General Sans
+- **Mood**: premium, modern, clean, sophisticated, versatile, balanced
+- **Best for**: Premium brands, modern agencies, SaaS, portfolios, startups
+- _Notes_: Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative.
+
+```css
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
+```

package/knowledge/typography/mui-type-scale.md

@@ -0,0 +1,57 @@
+---
+title: MUI default type scale
+source: refs/mui/packages/mui-material/src/styles/createTypography.js
+upstream: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/createTypography.js
+extracted_at: 2026-05-19
+applies_to: [react, mui, material-design]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# MUI default type scale
+
+Material Design's official type system as implemented by MUI. The base font size is **14px** with **16px html root**, producing a `coef = 14/16 = 0.875`. Letter spacing values are in `em`, derived as `letterSpacing / size`.
+
+Default font: `"Roboto", "Helvetica", "Arial", sans-serif`.
+
+## Variants
+
+| Variant | Weight | Size | Line height | Letter spacing | Casing |
+| --- | --- | --- | --- | --- | --- |
+| `h1` | fontWeightLight | 96px | 1.167 | -1.5 | — |
+| `h2` | fontWeightLight | 60px | 1.2 | -0.5 | — |
+| `h3` | fontWeightRegular | 48px | 1.167 | 0 | — |
+| `h4` | fontWeightRegular | 34px | 1.235 | 0.25 | — |
+| `h5` | fontWeightRegular | 24px | 1.334 | 0 | — |
+| `h6` | fontWeightMedium | 20px | 1.6 | 0.15 | — |
+| `subtitle1` | fontWeightRegular | 16px | 1.75 | 0.15 | — |
+| `subtitle2` | fontWeightMedium | 14px | 1.57 | 0.1 | — |
+| `body1` | fontWeightRegular | 16px | 1.5 | 0.15 | — |
+| `body2` | fontWeightRegular | 14px | 1.43 | 0.15 | — |
+| `button` | fontWeightMedium | 14px | 1.75 | 0.4 | ALL CAPS |
+| `caption` | fontWeightRegular | 12px | 1.66 | 0.4 | — |
+| `overline` | fontWeightRegular | 12px | 2.66 | 1 | ALL CAPS |
+
+## Weights
+
+| Weight | Numeric |
+| --- | --- |
+| `fontWeightLight` | 300 |
+| `fontWeightRegular` | 400 |
+| `fontWeightMedium` | 500 |
+| `fontWeightBold` | 700 |
+
+## Designer notes
+
+- `h1`–`h6` use **light** for h1/h2 (display), **regular** for h3/h4/h5, **medium** for h6. This means hero headlines look airy; section headers feel solid.
+- `subtitle1` is 16/1.75 — generous leading meant to sit above body content as a label.
+- `button` is 14/1.75 with `0.4em` letter spacing **and uppercase**. Modern Material 3 dropped the uppercase; if you mirror MUI defaults, the all-caps button is intentional.
+- `caption` and `overline` are both 12px. `overline` adds 1em letter spacing + uppercase for legal-text style.
+- Line-heights are unitless on purpose ([Eric Meyer](https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/)) — they inherit cleanly under font-size changes.
+
+## When NOT to use this scale verbatim
+
+- For **dense product UIs** (admin dashboards, IDEs): drop h1 to ~32px, h2 to 24px. The 96/60/48 ladder eats vertical space.
+- For **Korean/CJK UIs**: increase line-heights by ~10% (e.g., body1 to 1.6) to clear hangul descenders cleanly.
+- For **branded/serif fonts**: `letterSpacing` was tuned for Roboto. Reset to `0` and re-tune by eye.

package/knowledge/typography/type-scale-fundamentals.md

@@ -0,0 +1,105 @@
+<!-- hand-written -->
+---
+title: Type scale fundamentals
+applies_to: [web, mobile, all-ui]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Type scale fundamentals
+
+Choosing a type scale is a 30-minute decision that compounds for the life of a product. This is the floor.
+
+## Pick a base size first
+
+| Context | Base body |
+| --- | --- |
+| Marketing site | 18 px (sometimes 20). Reading-heavy. |
+| Product UI (SaaS, dashboards) | 14 px (Ant, MUI default) or 15 px. Density matters. |
+| Mobile native | 17 pt iOS, 14 sp Android. |
+| Editorial / long-form reading | 18–20 px with line-length 60–75 chars. |
+
+The base sets **everything else** because most scales are ratios of the base.
+
+## Common scale ratios
+
+| Ratio name | Multiplier | Feels like |
+| --- | --- | --- |
+| **Minor third** | 1.2 | Tight, dense (ideal for product UI). |
+| **Major third** | 1.25 | Tight but a touch more contrast. |
+| **Perfect fourth** | 1.333 | Balanced — most "modern" sites. |
+| **Augmented fourth** | 1.414 | Editorial feel. |
+| **Perfect fifth** | 1.5 | Dramatic — marketing/landing. |
+| **Golden ratio** | 1.618 | Display-only — collapses on small screens. |
+
+Worked example with base 14, ratio 1.25 (major third):
+```
+14, 18, 22, 27, 34, 42, 53, 66 px
+```
+
+In Ant Design's actual scale (not strictly geometric):
+```
+12, 14, 16, 20, 24, 30, 38, 46, 56, 68 px
+```
+
+The non-geometric jump at the top works in real product because designers use 38+ rarely; the bottom needs more granularity.
+
+## Line height by size
+
+Line height is **inversely** related to font size:
+
+| Size | Line height (multiplier) |
+| --- | --- |
+| 12 px | 1.5–1.7 (16–20 px) |
+| 14 px | 1.5 (21 px) |
+| 16 px | 1.5 (24 px) |
+| 20–24 px | 1.4 |
+| 28–34 px | 1.3 |
+| 40+ px | 1.1–1.2 |
+
+Express as **unitless** (`line-height: 1.5`) so it inherits cleanly.
+
+## Korean / CJK adjustments
+
+- Increase line-height by ~10% over Latin defaults. Hangul descenders bite into the next line otherwise.
+- 한글 본문 14px → line-height 1.6 (vs 1.5 for Latin).
+- Letter-spacing (`tracking`) for Hangul: usually `-0.005em` or `0`. Latin negative tracking can crush Hangul jamo.
+- Font-weight: Hangul typefaces frequently look 1 step "lighter" than Latin at the same numeric weight. Bump bold body to 600 (vs 500/400 mix in Latin).
+
+## Font weight — picking the set
+
+Most products need **3 weights, not 9**:
+
+| Use | Weight |
+| --- | --- |
+| Body | 400 (Regular) |
+| Emphasis / UI labels | 500 or 600 (Medium / Semibold) |
+| Headings | 700 (Bold) — or 600 if heavy |
+
+Adding 300 (Light) is OK for very large display sizes but reads too thin under 24px. Skip 200 and 100 unless you're designing a magazine.
+
+Bundle cost: each weight adds ~30–80 KB. Variable fonts ship one file with the full axis range — prefer `Inter Variable` over `Inter 400` + `Inter 600` separately.
+
+## Font pairing — the rules
+
+1. **Contrast or harmony, not both.** Either pick two fonts of clearly different categories (serif heading + sans body) or pick within the same family / pairing (geometric sans + humanist sans).
+2. **Match x-height when both are sans.** Inter and Roboto Flex pair badly because Inter's x-height is much taller — body looks oversized.
+3. **The body font is the more important choice.** A great pairing with poor body legibility is a failure. Test the body font in your actual content first.
+4. **Avoid trend-of-the-year fonts** for products with multi-year horizons. Inter, Roboto, IBM Plex Sans, Source Sans, Open Sans age well. Recoleta, Cabinet Grotesk are 2023-coded.
+5. **Use system fonts when speed matters.** `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` ships zero KB and matches the OS.
+
+## Hierarchy beyond size
+
+A type system uses **at most 6** size steps, but communicates hierarchy with:
+
+- **Weight**: 400 body → 600 emphasis → 700 heading.
+- **Color**: full-contrast for primary text, 60–70% opacity for secondary.
+- **Casing**: ALL CAPS reserved for tiny labels (12–14 px) — increases tracking ≥ 0.05em.
+- **Whitespace**: `margin-top` on headings creates the section feel. The size jump alone is not enough.
+- **Numerals**: tabular numerals (`font-variant-numeric: tabular-nums`) for tables, dashboards, prices. Proportional otherwise.
+
+## Cross-reference
+
+- [knowledge/typography/font-pairings.md](font-pairings.md) — curated pairings by mood
+- [knowledge/typography/mui-type-scale.md](mui-type-scale.md) — Material's scale