heraspec 0.1.12 → 0.1.14

package/dist/core/templates/skills/data/design-systems.csv

@@ -0,0 +1,54 @@
+STT,Brand,Folder,Category,Keywords,Theme,Primary_Color,Accent_Color,Background,Text_Color,Heading_Font,Body_Font,Mono_Font,Border_Radius,Shadow_Style,Design_Philosophy,Best_For,Agent_Quick_Prompt
+1,Stripe,stripe,infrastructure-cloud,"fintech, payment, api, purple, elegant, premium, light, weight-300, blue-tinted-shadows, negative-tracking",light,#533AFD,#EA2261,#FFFFFF,#061B31,sohne-var (weight 300),sohne-var (weight 300),SourceCodePro,"4-8px conservative","Blue-tinted multi-layer: rgba(50,50,93,0.25)","Light weight 300 as luxury. Blue-tinted shadows. Deep navy headings not black. Conservative radius.","Fintech, payment platforms, API docs, premium SaaS","Use sohne-var weight 300, #533afd purple CTA, deep navy #061b31 headings, blue-tinted shadows rgba(50,50,93,0.25), 4px radius buttons"
+2,Vercel,vercel,developer-tools,"deployment, frontend, black-white, minimal, geist, shadow-as-border, compressed-type, monochrome",light,#171717,#0072F5,#FFFFFF,#171717,Geist (weight 600),Geist (weight 400),Geist Mono,"6-8px standard, 9999px pills","Shadow-as-border: 0px 0px 0px 1px rgba(0,0,0,0.08)","Compression as identity. Shadow-as-border technique. Near-pure monochrome. Gallery emptiness.","Frontend deployment, developer platforms, documentation","Use Geist font, letter-spacing -2.4px at 48px, shadow-as-border rgba(0,0,0,0.08) 0px 0px 0px 1px, #171717 text, 6px radius"
+3,Linear,linear.app,developer-tools,"project-management, dark-mode, indigo, inter-variable, precision, cv01-ss03, weight-510, luminance-stacking",dark,#5E6AD2,#7170FF,#08090A,#F7F8F8,Inter Variable (weight 510),Inter Variable (weight 400),Berkeley Mono,"6-8px standard, 9999px pills","Multi-layer dark: rgba(0,0,0,0.2) 0px 0px 0px 1px","Dark-mode-native. Semi-transparent white borders. Weight 510 signature. Luminance stacking for depth.","Issue trackers, project management, developer tools, dark-mode products","Use Inter Variable with cv01 ss03, weight 510, #08090a bg, #5e6ad2 brand, rgba(255,255,255,0.08) borders, 6px radius"
+4,Supabase,supabase,developer-tools,"database, firebase, dark-mode, emerald-green, postgresql, pill-buttons, HSL-tokens, terminal",dark,#3ECF8E,#00C573,#171717,#FAFAFA,Circular (weight 400),Circular (weight 400),Source Code Pro,"6px secondary, 9999px primary","Almost no shadows — depth through border contrast","Dark-mode-native. Emerald green sparingly. Zero-leading hero type. Depth via border hierarchy.","Database platforms, open-source tools, developer-centric dark UIs","Use Circular font, #171717 bg, #3ecf8e green accent sparingly, pill buttons 9999px, borders #2e2e2e, no shadows"
+5,Notion,notion,design-productivity,"workspace, warm-minimalism, serif-headings, soft-surfaces, friendly, content-first, block-editor",light,#2383E2,#2383E2,#FFFFFF,#37352F,Lyon Display (serif),Inter (weight 400),SFMono-Regular,"3-6px subtle","Subtle: rgba(15,15,15,0.1) 0px 0px 0px 1px","Warm minimalism. Serif headings for personality. Content-first. Tools should be invisible.","Productivity tools, content platforms, documentation, knowledge bases","Use Lyon Display serif for headings, Inter for body, #37352f text (not black), warm white bg, subtle borders, 3px radius"
+6,Claude,claude,ai-ml,"anthropic, ai-assistant, terracotta, editorial, warm, weight-480, clean, light-tan-bg",light,#DA7756,#DA7756,#F8F4EF,#1A1815,Styrene A (weight 480),Relative (weight 400),Relative Mono,"8-12px comfortable","Subtle warm: 0px 1px 3px rgba(0,0,0,0.1)","Warm terracotta editorial. Anti-tech-cold. Typographic warmth over decoration.","AI products, conversational UIs, editorial platforms, warm-toned apps","Use Styrene A weight 480 headings, Relative body, terracotta #DA7756 accent, warm bg #F8F4EF, 8px radius"
+7,Cursor,cursor,developer-tools,"code-editor, dark, gradient, purple-blue, sleek, ide-like, developer",dark,#7C5CFC,#00E5FF,#0A0A0A,#EDEDED,Inter (weight 600),Inter (weight 400),Berkeley Mono,"8-12px comfortable","Multi-layer dark with gradient accents","Sleek dark IDE aesthetic. Gradient purple-blue accents. Code-first atmosphere.","Code editors, developer tools, IDE-like interfaces, dark developer platforms","Use Inter font, #0a0a0a bg, purple-blue gradient accents #7C5CFC to #00E5FF, 8px radius"
+8,Figma,figma,design-productivity,"design-tool, multi-color, vibrant, playful, professional, collaborative, colorful",light,#0D99FF,#A259FF,#FFFFFF,#333333,"Figma custom Sans (weight 700)",Inter (weight 400),—,"8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.1)","Multi-color vibrant but professional. Playful yet precise. Collaborative energy.","Design tools, creative platforms, collaborative software","Use vibrant multi-color palette, #0D99FF blue primary, #A259FF purple, 8px radius, white bg"
+9,Apple,apple,enterprise-consumer,"consumer, premium, white-space, cinematic, sf-pro, editorial, imagery-driven, elegant",light,#0071E3,#0071E3,#FFFFFF,#1D1D1F,SF Pro Display (weight 600),SF Pro Text (weight 400),SF Mono,"12-18px generous","Subtle: 0px 4px 16px rgba(0,0,0,0.12)","Premium white space. Cinematic imagery. Products as heroes. Typography-as-hero.","Consumer electronics, luxury products, premium brand sites, marketing pages","Use SF Pro Display, massive white space, #0071E3 blue links, 12px radius, cinematic imagery focus"
+10,Airbnb,airbnb,enterprise-consumer,"travel, marketplace, coral, photography, rounded-ui, warm, friendly, cereal-font",light,#FF5A5F,#008489,#FFFFFF,#222222,Cereal (weight 800),Cereal (weight 400),—,"12-16px rounded","Standard: 0px 2px 8px rgba(0,0,0,0.12)","Warm coral accent. Photography-driven. Rounded everything. Hospitality warmth.","Travel, marketplace, hospitality, photography-driven platforms","Use Cereal font, #FF5A5F coral accent, rounded 12px radius, photography-driven, warm white bg"
+11,Spotify,spotify,enterprise-consumer,"music, streaming, green, dark, bold-type, album-art, circular-font, vibrant",dark,#1DB954,#1DB954,#121212,#FFFFFF,Circular (weight 700-900),Circular (weight 400),—,"4-8px standard","Minimal shadows — color contrast dominates","Vibrant green on dark. Bold oversized type. Album art as primary visual.","Music, streaming, entertainment, media-rich dark interfaces","Use Circular font, #121212 dark bg, #1DB954 green accent, bold type weight 700+, 4px radius"
+12,BMW,bmw,enterprise-consumer,"luxury, automotive, dark-premium, german-engineering, precise, cinematic",dark,#1C69D4,#1C69D4,#1A1A1A,#FFFFFF,BMW Type (weight 700),BMW Type (weight 400),—,"4-8px conservative","Deep premiums: 0px 8px 24px rgba(0,0,0,0.3)","Dark premium surfaces. German engineering precision. Automotive luxury.","Automotive, luxury brands, premium dark interfaces","Use dark premium bg #1A1A1A, #1C69D4 blue accent, conservative radius, deep shadows"
+13,SpaceX,spacex,enterprise-consumer,"space, futuristic, black-white, full-bleed-imagery, stark, minimal, d-din-font",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,D-DIN (weight 700),D-DIN (weight 400),—,"0px sharp","No shadows — full-bleed imagery with contrast","Stark black and white. Full-bleed imagery. Futuristic minimalism. Text over image.","Space tech, futuristic brands, full-bleed imagery sites","Use black #000000 bg, white text, D-DIN font, 0px radius (sharp), full-bleed images"
+14,Uber,uber,enterprise-consumer,"mobility, bold, black-white, tight-type, urban, uber-move-font, systematic",both,#000000,#276EF1,#FFFFFF,#000000,Uber Move (weight 700),Uber Move (weight 400),Uber Move Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Bold black and white. Tight typography. Urban energy. Systematic.","Mobility platforms, urban services, bold B&W interfaces","Use Uber Move font, #000000 primary, tight letter-spacing, 8px radius, bold systematic layout"
+15,IBM,ibm,enterprise-consumer,"enterprise, carbon-design, structured-blue, technical, grid-based, plex-font",both,#0F62FE,#0F62FE,#FFFFFF,#161616,IBM Plex Sans (weight 600),IBM Plex Sans (weight 400),IBM Plex Mono,"4-8px structured","Standard elevation tokens from Carbon DS","Carbon design system. Structured blue palette. Grid-based. Enterprise-clean.","Enterprise software, government, technical platforms","Use IBM Plex Sans, #0F62FE blue, Carbon Design tokens, 4px radius, structured grid layout"
+16,NVIDIA,nvidia,enterprise-consumer,"gpu, computing, green-black, technical, power, dark-theme, energy",dark,#76B900,#76B900,#1A1A1A,#EEEEEE,NVIDIA Sans (weight 700),NVIDIA Sans (weight 400),—,"4-8px standard","Subtle on dark: rgba(0,0,0,0.2)","Green-black energy. Technical power aesthetic. GPU computing vibes.","GPU computing, tech hardware, high-performance products","Use #76B900 green on dark #1A1A1A bg, technical aesthetic, NVIDIA Sans font"
+17,Coinbase,coinbase,enterprise-consumer,"crypto, exchange, blue, trust, institutional, clean, professional",light,#0052FF,#0052FF,#FFFFFF,#0A0B0D,Coinbase Sans (weight 500),Coinbase Text (weight 400),Coinbase Mono,"8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.08)","Clean blue identity. Trust-focused. Institutional feel. Crypto-professional.","Crypto exchanges, financial platforms, trust-focused products","Use Coinbase Sans, #0052FF blue, clean white bg, trust-focused layout, 8px radius"
+18,Revolut,revolut,fintech-crypto,"banking, dark, gradient, fintech, precision, sleek, cards",dark,#0075EB,#0075EB,#171717,#FFFFFF,Basier Circle (weight 600),Basier Circle (weight 400),—,"12-16px rounded","Dark elevated: 0px 8px 24px rgba(0,0,0,0.25)","Sleek dark interface. Gradient cards. Fintech precision.","Digital banking, fintech, dark premium financial apps","Use dark bg #171717, #0075EB blue accent, gradient card effects, rounded 12px radius"
+19,Wise,wise,fintech-crypto,"money-transfer, green, friendly, clear, accessible, bright, lime",light,#9FE870,#163300,#F2F5F0,#163300,Mulish (weight 700),Mulish (weight 400),—,"8-16px comfortable","Light: 0px 1px 3px rgba(0,0,0,0.08)","Bright green accent. Friendly and clear. Accessible design. No financial jargon.","Money transfer, accessible fintech, friendly financial apps","Use Mulish font, bright green #9FE870 accent, light bg #F2F5F0, friendly tone, 8px radius"
+20,Kraken,kraken,fintech-crypto,"crypto, trading, purple, dark, data-dense, dashboards, professional",dark,#7B61FF,#7B61FF,#0B0E11,#FFFFFF,Inter (weight 600),Inter (weight 400),Roboto Mono,"4-8px standard","Dark: rgba(0,0,0,0.3)","Purple-accented dark UI. Data-dense dashboards. Professional trading.","Crypto trading, data-dense dashboards, dark financial platforms","Use Inter font, dark bg #0B0E11, #7B61FF purple accent, data-dense layout, 4px radius"
+21,Raycast,raycast,developer-tools,"productivity, launcher, dark-chrome, vibrant-gradients, sleek, macos, command-palette",dark,#FF6363,#FF6363,#1A1A1A,#FFFFFF,Inter (weight 600),Inter (weight 400),SF Mono,"8-12px comfortable","Multi-layer elevated dark shadows","Sleek dark chrome. Vibrant gradient accents. Command-palette aesthetic.","Productivity launchers, macOS-style apps, command palette UIs","Use Inter font, dark bg #1A1A1A, vibrant gradient accents, 8px radius, command-palette style"
+22,Warp,warp,developer-tools,"terminal, modern, dark, block-ui, ide-like, developer, command",dark,#01A4FF,#01A4FF,#0D1117,#E6EDF3,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Dark ambient: rgba(0,0,0,0.2)","Dark IDE-like interface. Block-based command UI. Modern terminal.","Modern terminals, CLI tools, block-based command interfaces","Use Inter + JetBrains Mono, dark bg #0D1117, #01A4FF blue accent, block-based layout"
+23,Resend,resend,developer-tools,"email-api, dark, minimal, monospace, developer-centric, clean, black",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,Inter (weight 500),Inter (weight 400),Geist Mono,"6-8px standard","Minimal dark shadows","Minimal dark theme. Monospace accents. Developer-centric. Email API clean.","Email APIs, developer tools, minimal dark interfaces","Use Inter + Geist Mono, black #000000 bg, white text, minimal aesthetic, 6px radius"
+24,Sentry,sentry,developer-tools,"error-monitoring, dark, pink-purple, data-dense, dashboard, developer",dark,#6C5FC7,#F7508A,#1D1127,#EBE6EF,Rubik (weight 600),Rubik (weight 400),Roboto Mono,"6-8px standard","Dark elevated: rgba(0,0,0,0.2)","Dark dashboard. Data-dense. Pink-purple accent. Error monitoring vibe.","Error monitoring, developer dashboards, data-dense dark UIs","Use Rubik font, dark bg #1D1127, #6C5FC7 purple + #F7508A pink, data-dense layout"
+25,PostHog,posthog,developer-tools,"analytics, hedgehog, dark, playful, developer-friendly, orange, illustrations",dark,#F54E00,#F54E00,#1D1F27,#E5E7E0,Manrope (weight 700),Manrope (weight 400),Source Code Pro,"8-12px comfortable","Dark: rgba(0,0,0,0.15)","Playful hedgehog branding. Developer-friendly dark UI. Fun but functional.","Product analytics, developer-friendly tools, playful dark UIs","Use Manrope font, dark bg #1D1F27, #F54E00 orange accent, playful illustrations, 8px radius"
+26,Mintlify,mintlify,developer-tools,"documentation, clean, green, reading-optimized, developer, docs, content",light,#0D9373,#0D9373,#FFFFFF,#1A1A1A,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.08)","Clean, green-accented, reading-optimized. Documentation-first.","Documentation platforms, API docs, reading-focused interfaces","Use Inter + JetBrains Mono, white bg, #0D9373 green accent, reading-optimized layout"
+27,Superhuman,superhuman,developer-tools,"email, premium, dark, keyboard-first, purple-glow, fast, productivity",dark,#6C5CE7,#6C5CE7,#1A1A2E,#FFFFFF,Inter (weight 600),Inter (weight 400),SF Mono,"6-8px standard","Purple glow: 0px 0px 20px rgba(108,92,231,0.3)","Premium dark UI. Keyboard-first. Purple glow aesthetic. Speed as brand.","Premium email, keyboard-first apps, dark productivity tools","Use Inter font, dark bg #1A1A2E, #6C5CE7 purple with glow effects, 6px radius"
+28,Expo,expo,developer-tools,"react-native, dark, tight-spacing, code-centric, mobile-dev, technical",dark,#368CCB,#368CCB,#0A0A0A,#FFFFFF,Inter (weight 600),Inter (weight 400),Fira Code,"8px standard","Dark subtle shadows","Dark theme. Tight letter-spacing. Code-centric. React Native platform.","React Native platforms, mobile dev tools, code-centric dark UIs","Use Inter + Fira Code, dark bg #0A0A0A, #368CCB blue accent, tight letter-spacing"
+29,Lovable,lovable,developer-tools,"ai-builder, playful, gradients, friendly, developer-aesthetic, purple, full-stack",both,#9B87F5,#9B87F5,#FFFFFF,#1A1F2C,Plus Jakarta Sans (weight 600),Plus Jakarta Sans (weight 400),JetBrains Mono,"8-16px comfortable","Soft: 0px 4px 12px rgba(0,0,0,0.08)","Playful gradients. Friendly developer aesthetic. AI-powered builder.","AI builders, full-stack tools, friendly dev platforms","Use Plus Jakarta Sans, #9B87F5 purple gradient accent, playful friendly tone, 8px radius"
+30,Zapier,zapier,developer-tools,"automation, orange, friendly, illustrations, warm, workflow, integrations",light,#FF4A00,#FF4A00,#FFFFFF,#2D2E2E,Degular (weight 700),Inter (weight 400),—,"8-12px comfortable","Soft: 0px 2px 8px rgba(0,0,0,0.08)","Warm orange. Friendly illustration-driven. Automation made approachable.","Automation platforms, workflow tools, integration-focused apps","Use Degular headings + Inter body, #FF4A00 orange, warm white bg, friendly illustrations"
+31,Framer,framer,design-productivity,"website-builder, bold, black-blue, motion-first, design-forward, creative",both,#0055FF,#0055FF,#FFFFFF,#000000,Inter (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 4px 16px rgba(0,0,0,0.1)","Bold black and blue. Motion-first. Design-forward. Builder for designers.","Website builders, design-forward tools, motion-heavy creative platforms","Use Inter font, bold #0055FF blue on black/white, motion animations, 8px radius"
+32,Notion,notion,design-productivity,"workspace, warm-minimalism, serif-headings, soft-surfaces, friendly, content-first, block-editor",light,#2383E2,#2383E2,#FFFFFF,#37352F,Lyon Display (serif),Inter (weight 400),SFMono-Regular,"3-6px subtle","Subtle: rgba(15,15,15,0.1) 0px 0px 0px 1px","Warm minimalism. Serif headings for personality. Content-first.","Productivity tools, content platforms, knowledge bases","Use Lyon Display serif for headings, Inter for body, warm tones, subtle borders, 3px radius"
+33,Miro,miro,design-productivity,"collaboration, yellow, bright, infinite-canvas, friendly, teamwork",light,#FFD02F,#050038,#FFFFFF,#050038,Roobert (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Bright yellow accent. Infinite canvas aesthetic. Playful collaboration.","Visual collaboration, whiteboard tools, team brainstorming platforms","Use Roobert + Inter, #FFD02F yellow accent, bright friendly layout, 8px radius"
+34,Airtable,airtable,design-productivity,"spreadsheet, colorful, friendly, structured-data, database, organized",light,#2D7FF9,#2D7FF9,#FFFFFF,#333333,Inter (weight 600),Inter (weight 400),—,"6-8px standard","Standard: 0px 2px 4px rgba(0,0,0,0.1)","Colorful, friendly, structured data aesthetic. Database meets spreadsheet.","Database-spreadsheet hybrids, data management, organized interfaces","Use Inter font, #2D7FF9 blue, colorful category indicators, structured layout"
+35,Clay,clay,design-productivity,"creative, organic, soft-gradients, art-directed, flowing, agency",light,#4361EE,#4361EE,#FFFFFF,#1A1A2E,—,—,—,"16-24px generous","Soft organic: 0px 8px 30px rgba(0,0,0,0.08)","Organic shapes. Soft gradients. Art-directed layout. Creative agency feel.","Creative agencies, art-directed sites, organic design projects","Use soft gradients, organic shapes, generous 16px radius, art-directed layout"
+36,Cal.com,cal,design-productivity,"scheduling, neutral, developer, simplicity, open-source, clean, functional",light,#111827,#111827,#FFFFFF,#111827,Cal Sans (weight 700),Inter (weight 400),—,"6-8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.08)","Clean neutral UI. Developer-oriented simplicity. Open-source scheduling.","Scheduling tools, open-source products, clean functional UIs","Use Cal Sans headings + Inter body, neutral bg, #111827 dark text, 6px radius, clean layout"
+37,Webflow,webflow,design-productivity,"web-builder, blue, polished, marketing-site, professional, no-code",light,#4353FF,#4353FF,#FFFFFF,#1A1A1A,Manrope (weight 700),Inter (weight 400),—,"8-12px standard","Standard: 0px 4px 12px rgba(0,0,0,0.1)","Blue-accented. Polished marketing site aesthetic. Visual web builder.","Visual web builders, no-code platforms, polished marketing sites","Use Manrope + Inter, #4353FF blue accent, polished white bg, 8px radius"
+38,Pinterest,pinterest,design-productivity,"visual-discovery, red, masonry-grid, image-first, rounded, pins, photography",light,#E60023,#E60023,#FFFFFF,#333333,Helvetica Neue (weight 700),Helvetica Neue (weight 400),—,"16px rounded","Standard: 0px 1px 5px rgba(0,0,0,0.1)","Red accent. Masonry grid. Image-first. Pin-based visual discovery.","Visual discovery, image-centric platforms, masonry grid layouts","Use Helvetica Neue, #E60023 red, masonry grid layout, 16px rounded, image-first"
+39,Intercom,intercom,design-productivity,"messaging, blue, friendly, conversational, chat, customer-support",light,#396AFF,#396AFF,#FFFFFF,#1B1B30,—,—,—,"8-12px comfortable","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Friendly blue palette. Conversational UI patterns. Chat-centric.","Customer messaging, chat interfaces, support platforms","Use #396AFF blue, friendly conversational UI, 8px radius, chat-oriented layout"
+40,ClickHouse,clickhouse,infrastructure-cloud,"database, analytics, yellow, technical, documentation, fast-queries",light,#FADB14,#FADB14,#FFFFFF,#1D1D1D,Inter (weight 700),Inter (weight 400),JetBrains Mono,"4-8px standard","Subtle technical shadows","Yellow-accented. Technical documentation style. Fast analytics database.","Analytics databases, technical docs, data-engineering tools","Use Inter + JetBrains Mono, #FADB14 yellow accent, white bg, technical doc layout"
+41,Composio,composio,infrastructure-cloud,"integration, dark, colorful-icons, tool-platform, modern, developer",dark,#6C5CE7,#6C5CE7,#0F0F0F,#FFFFFF,Inter (weight 600),Inter (weight 400),—,"8-12px comfortable","Dark elevated shadows","Modern dark with colorful integration icons. Tool integration platform.","Tool integration platforms, developer ecosystems, dark modern UIs","Use Inter font, dark bg #0F0F0F, #6C5CE7 purple, colorful integration icons"
+42,HashiCorp,hashicorp,infrastructure-cloud,"infrastructure, enterprise, black-white, clean, automation, terraform, vault",light,#000000,#000000,#FFFFFF,#000000,Metro Sans (weight 700),Metro Sans (weight 400),Deja Vu Sans Mono,"4-6px conservative","Minimal: 0px 1px 2px rgba(0,0,0,0.06)","Enterprise-clean. Black and white. Infrastructure automation precision.","Infrastructure tools, enterprise software, DevOps platforms","Use Metro Sans, pure B&W palette, clean enterprise layout, 4px radius"
+43,MongoDB,mongodb,infrastructure-cloud,"database, document, green-leaf, developer-docs, technical, open-source",light,#00ED64,#001E2B,#FFFFFF,#001E2B,MongoDB Value Serif,Euclid Circular A (weight 400),Source Code Pro,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.1)","Green leaf branding. Developer documentation focus. Database-centric.","Document databases, developer documentation, data-centric platforms","Use Euclid Circular A body, #00ED64 green accent, developer doc layout, 8px radius"
+44,Sanity,sanity,infrastructure-cloud,"headless-cms, red, content-first, editorial, structured-content, clean",light,#F36458,#F36458,#FFFFFF,#1A1A1A,Inter (weight 700),Inter (weight 400),Roboto Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Red accent. Content-first editorial layout. Headless CMS clarity.","Headless CMS, content management, editorial platforms","Use Inter + Roboto Mono, #F36458 red accent, clean editorial layout, 8px radius"
+45,Cohere,cohere,ai-ml,"enterprise-ai, vibrant-gradients, data-rich, dashboard, professional",both,#39594D,#39594D,#FFFFFF,#1D2B24,Styrene A (weight 500),Inter (weight 400),JetBrains Mono,"8px standard","Standard: 0px 2px 8px rgba(0,0,0,0.08)","Vibrant gradients. Data-rich dashboard aesthetic. Enterprise AI.","Enterprise AI platforms, data-rich dashboards, professional AI tools","Use Styrene A + Inter, vibrant gradients, data-rich layout, 8px radius"
+46,ElevenLabs,elevenlabs,ai-ml,"voice-ai, dark, cinematic, audio-waveform, immersive, sound",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,—,Inter (weight 400),—,"8-12px standard","Dark cinematic: rgba(0,0,0,0.4)","Dark cinematic UI. Audio-waveform aesthetics. Voice platform immersion.","Voice AI platforms, audio tools, cinematic dark interfaces","Use dark bg #000000, white text/accent, audio-waveform visual motifs, 8px radius"
+47,MiniMax,minimax,ai-ml,"ai-models, dark, neon-green, bold, futuristic, high-contrast",dark,#00FF88,#00FF88,#0A0A0A,#FFFFFF,Inter (weight 700),Inter (weight 400),—,"8px standard","Neon glow: 0px 0px 20px rgba(0,255,136,0.2)","Bold dark interface. Neon accents. Futuristic AI model provider.","AI model platforms, futuristic dark UIs, neon-accent interfaces","Use Inter font, dark bg #0A0A0A, #00FF88 neon green accents, 8px radius"
+48,Mistral AI,mistral.ai,ai-ml,"open-weight-llm, french, minimalism, purple, elegant, clean",light,#F54E42,#F54E42,#FFFFFF,#1A1A1A,Luciole (weight 700),Inter (weight 400),Source Code Pro,"8px standard","Subtle: 0px 2px 8px rgba(0,0,0,0.06)","French-engineered minimalism. Purple-toned. Open-weight LLM elegance.","LLM platforms, open-source AI, minimal SaaS pages","Use Luciole + Inter, #F54E42 accent, minimal white layout, 8px radius"
+49,Ollama,ollama,ai-ml,"local-llm, terminal, monochrome, simple, developer, cli, open-source",light,#000000,#000000,#FFFFFF,#000000,Inter (weight 700),Inter (weight 400),JetBrains Mono,"4-8px standard","Minimal: 0px 1px 2px rgba(0,0,0,0.05)","Terminal-first. Monochrome simplicity. Run LLMs locally aesthetic.","Local AI tools, CLI-first interfaces, terminal-native UIs","Use Inter + JetBrains Mono, monochrome B&W, terminal aesthetic, 4px radius"
+50,OpenCode AI,opencode.ai,ai-ml,"ai-coding, dark, emerald, developer, code-focused, terminal-green",dark,#10B981,#10B981,#0A0A0A,#E5E7EB,Inter (weight 600),Inter (weight 400),Fira Code,"6-8px standard","Dark subtle: rgba(0,0,0,0.2)","Developer-centric dark theme. Emerald coding accent. Code-first.","AI coding platforms, developer-centric dark tools","Use Inter + Fira Code, dark bg #0A0A0A, #10B981 emerald, code-focused layout"
+51,Replicate,replicate,ai-ml,"ml-api, white, code-forward, clean, minimal, api-first, developer",light,#000000,#000000,#FFFFFF,#000000,Inter (weight 600),Inter (weight 400),JetBrains Mono,"8px standard","Subtle: 0px 1px 3px rgba(0,0,0,0.06)","Clean white canvas. Code-forward. API-first ML platform.","ML API platforms, clean developer tools, API-first products","Use Inter + JetBrains Mono, white bg, #000000 text, code-forward layout, 8px radius"
+52,VoltAgent,voltagent,ai-ml,"agent-framework, dark, emerald, terminal-native, void-black, developer",dark,#10B981,#10B981,#000000,#E5E7EB,Inter (weight 700),Inter (weight 400),JetBrains Mono,"6-8px standard","Dark: rgba(0,0,0,0.3)","Void-black canvas. Emerald accent. Terminal-native developer framework.","AI agent frameworks, terminal-native tools, dark developer platforms","Use Inter + JetBrains Mono, void-black #000000 bg, #10B981 emerald, 6px radius"
+53,xAI,x.ai,ai-ml,"elon-musk, stark, monochrome, futuristic, minimalism, high-contrast",dark,#FFFFFF,#FFFFFF,#000000,#FFFFFF,Inter (weight 700),Inter (weight 400),—,"4px sharp","Minimal dark shadows","Stark monochrome. Futuristic minimalism. High contrast black and white.","Futuristic AI, stark minimal interfaces, monochrome dark UIs","Use Inter font, pure black #000000 bg, white text/accent, sharp 4px radius"

package/dist/core/templates/skills/data/pages-proposed.csv

@@ -1,22 +1,22 @@
-No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
-10,Blog Listing,"blog, blog-list, news-list, articles, posts-list, blog-index",1. Header with page title, 2. Featured post (optional), 3. Post grid/list with filters, 4. Pagination, 5. Sidebar (categories, recent posts), 6. Footer,Blog header, Featured post card, Post grid (cards or list), Category sidebar, Recent posts widget, Search bar, Pagination,Minimal & Direct or Bento Box Grid,Neutral bg + featured post highlight,Post card hover, featured post animation, filter transitions, infinite scroll,Blog, news, content sites - main blog page,Different from Category - this is the main blog index. Show featured content.
-11,Search Results,"search, search-results, find, query-results",1. Search bar (sticky/prominent), 2. Results count, 3. Filter/sort options, 4. Results list/grid, 5. Pagination, 6. No results state, 7. Footer,Search input, Results count, Filter chips, Results cards/list, Pagination, Empty state, Suggested searches,Minimal & Direct or Content-First,High contrast for search input. Results cards with subtle borders,Search animation, result highlight, filter transitions, empty state animation,All sites with search functionality,Clear empty states. Show search suggestions. Highlight matching terms.
-12,404 Error,"404, error, not-found, page-not-found, missing",1. Error code (404), 2. Friendly error message, 3. Illustration/icon, 4. Helpful links (home, popular pages), 5. Search bar (optional), 6. Footer,Error code display, Friendly message, Illustration/icon, Navigation links, Search bar, Home button,Minimal & Direct or Trust & Authority,Neutral colors. Avoid alarming red. Friendly, approachable,Subtle animation on illustration, link hover effects,All websites - error handling,Keep it friendly, not scary. Provide clear next steps.
-13,Login,"login, sign-in, authenticate, account-access",1. Brand logo/header, 2. Login form (email, password), 3. Remember me checkbox, 4. Forgot password link, 5. Social login options (optional), 6. Sign up link, 7. Footer,Login form, Brand logo, Social login buttons, Forgot password link, Sign up CTA,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button. Secure feeling,Form validation, password visibility toggle, social login animations,All sites with user accounts,Minimal fields. Clear error messages. Security indicators.
-14,Register,"register, sign-up, create-account, join",1. Brand logo/header, 2. Registration form (name, email, password, confirm), 3. Terms & conditions checkbox, 4. Social sign-up options (optional), 5. Login link, 6. Footer,Registration form, Brand logo, Social sign-up buttons, Terms checkbox, Login link,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit. Trust indicators,Form validation, password strength indicator, terms modal, social sign-up animations,All sites with user accounts,Clear validation. Show password requirements. Build trust.
-15,Dashboard,"dashboard, account, profile, my-account, user-dashboard",1. Welcome header, 2. Quick stats/overview cards, 3. Main content area (tabs/sections), 4. Sidebar navigation, 5. User profile section, 6. Footer,Welcome message, Stats cards, Tab navigation, Content sections, Sidebar menu, Profile dropdown,Data-Dense or Minimalism,Clean, organized. Status colors for stats. Clear hierarchy,Card hover, stat animations, tab transitions, smooth loading states,All sites with user accounts,Clear navigation. Quick access to key actions. Responsive layout.
-16,Cart,"cart, shopping-cart, basket, checkout-cart",1. Cart header, 2. Cart items list, 3. Quantity controls, 4. Remove items, 5. Order summary (subtotal, tax, total), 6. Checkout CTA, 7. Continue shopping link, 8. Footer,Cart items, Quantity controls, Remove buttons, Order summary, Checkout button, Empty cart state,Minimal & Direct or Conversion-Optimized,High contrast for checkout CTA. Clear pricing. Trust colors,Item animations, quantity updates, remove confirmations, empty state animation,E-commerce - shopping cart,Clear pricing breakdown. Easy item management. Prominent checkout CTA.
-17,Checkout,"checkout, payment, order, purchase, buy",1. Progress indicator, 2. Shipping address form, 3. Billing address (if different), 4. Payment method selection, 5. Order summary sidebar, 6. Place order button, 7. Security badges, 8. Footer,Progress steps, Address forms, Payment options, Order summary, Security badges, Place order button,Conversion-Optimized or Trust & Authority,High contrast for place order. Trust colors for security. Clear hierarchy,Progress indicator animation, form validation, payment method selection, order summary updates,E-commerce - purchase flow,Minimal steps. Clear progress. Security indicators. Trust signals.
-18,Thank You,"thank-you, confirmation, order-confirmed, success, receipt",1. Success icon/checkmark, 2. Thank you message, 3. Order number/details, 4. What happens next, 5. Order summary, 6. Continue shopping CTA, 7. Track order link, 8. Footer,Success icon, Thank you message, Order details, Next steps, Order summary, CTAs,Minimal & Direct or Trust & Authority,Success green. Celebratory but professional. Clear hierarchy,Success animation, order details reveal, smooth transitions,E-commerce - post-purchase,Clear confirmation. Set expectations. Provide next steps.
-19,Services,"services, offerings, what-we-do, solutions",1. Hero/Header, 2. Services overview, 3. Service cards grid (3-6 services), 4. Service details/features, 5. CTA section, 6. Footer,Service cards, Service descriptions, Feature lists, CTAs, Service icons,Minimal & Direct or Feature-Rich Showcase,Brand colors + service-specific accents,Service card hover, icon animations, feature reveals,Service-based businesses - showcase offerings,Clear service descriptions. Show value. Multiple CTAs.
-20,Portfolio,"portfolio, gallery, work, projects, showcase",1. Portfolio header, 2. Filter/category tabs, 3. Project grid (masonry or cards), 4. Project details on hover/click, 5. Pagination (optional), 6. Footer,Project grid, Filter tabs, Project cards, Lightbox/modal, Project details,Minimal & Direct or Bento Box Grid,Neutral bg to let work shine. Accent for filters,Grid animations, filter transitions, lightbox open, project hover effects,Creative agencies, portfolios - showcase work,Visual-first. Fast loading. Easy filtering.
-21,Testimonials,"testimonials, reviews, client-feedback, social-proof",1. Page header, 2. Testimonials grid/carousel, 3. Filter by category/rating, 4. Video testimonials (optional), 5. CTA section, 6. Footer,Testimonial cards, Client photos, Star ratings, Video players, Filter options, CTA buttons,Social Proof-Focused or Trust & Authority,Trust colors. Warm accents for testimonials,Carousel animations, video play, testimonial fade-in, star animations,All business types - build trust,Show variety. Include photos. Filter by industry/rating.
-22,Team,"team, our-team, staff, employees, people",1. Page header, 2. Team intro, 3. Team member grid, 4. Member details (role, bio, social), 5. Join us CTA (optional), 6. Footer,Team member cards, Photos, Role titles, Bio sections, Social links, CTA button,Storytelling-Driven or Trust & Authority,Warm, human colors. Professional but approachable,Member card hover, bio reveal, social link animations,All businesses - humanize brand,High-quality photos. Clear roles. Show personality.
-23,Careers,"careers, jobs, hiring, work-with-us, join-us",1. Hero with company culture, 2. Why work here, 3. Open positions list, 4. Job details/application, 5. Benefits section, 6. Application CTA, 7. Footer,Job listings, Company culture section, Benefits grid, Application form, CTA buttons,Feature-Rich Showcase or Trust & Authority,Energizing colors. Professional but inviting,Job card hover, benefits reveal, application form animations,Companies hiring - recruitment,Show culture. Clear job descriptions. Easy application.
-24,Events,"events, calendar, schedule, upcoming-events, workshops",1. Events header, 2. Upcoming events list/calendar, 3. Event details (date, location, description), 4. Registration CTA, 5. Past events (optional), 6. Footer,Event cards, Calendar view, Event details, Registration buttons, Date filters,Minimal & Direct or Feature-Rich Showcase,Event-specific colors. Clear date/location,Calendar animations, event card hover, registration animations,Event organizers, conferences - event listings,Clear dates. Easy registration. Show past events for credibility.
-25,Documentation,"documentation, docs, help-center, guides, api-docs",1. Search bar, 2. Category sidebar, 3. Content area, 4. Table of contents, 5. Related articles, 6. Feedback section, 7. Footer,Search bar, Sidebar navigation, Content area, TOC, Code blocks, Related links,FAQ/Documentation Landing or Minimal & Direct,High readability. Code syntax highlighting,Search autocomplete, smooth scrolling, code copy buttons, TOC highlight,Developer tools, SaaS - technical docs,Clear navigation. Searchable. Code examples. Versioning.
-26,Privacy Policy,"privacy, privacy-policy, data-protection, gdpr",1. Page header, 2. Last updated date, 3. Policy sections, 4. Contact information, 5. Footer,Policy sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
-27,Terms,"terms, terms-of-service, terms-and-conditions, legal",1. Page header, 2. Last updated date, 3. Terms sections, 4. Contact information, 5. Footer,Terms sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
-28,Coming Soon,"coming-soon, launch, under-construction, maintenance",1. Brand logo, 2. Coming soon message, 3. Countdown timer (optional), 4. Email signup form, 5. Social links, 6. Footer,Brand logo, Message, Countdown timer, Email form, Social links,Minimal & Direct or Hero-Centric,Brand colors. Anticipation building,Countdown animation, email form validation, subtle background animation,Pre-launch, maintenance - temporary pages,Clear message. Email capture. Set expectations.
-29,Compare,"compare, comparison, vs, versus, products-compare",1. Comparison header, 2. Comparison table (features side-by-side), 3. Highlight differences, 4. CTA buttons per option, 5. Footer,Comparison table, Feature rows, Highlight indicators, CTA buttons,Comparison Table Focus,Your product highlighted. Competitors neutral,Table row hover, feature highlight, CTA animations,Product comparisons - help decision,Clear differences. Highlight your advantages. Easy comparison.
+No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
+10,Blog Listing,"blog, blog-list, news-list, articles, posts-list, blog-index",1. Header with page title, 2. Featured post (optional), 3. Post grid/list with filters, 4. Pagination, 5. Sidebar (categories, recent posts), 6. Footer,Blog header, Featured post card, Post grid (cards or list), Category sidebar, Recent posts widget, Search bar, Pagination,Minimal & Direct or Bento Box Grid,Neutral bg + featured post highlight,Post card hover, featured post animation, filter transitions, infinite scroll,Blog, news, content sites - main blog page,Different from Category - this is the main blog index. Show featured content.
+11,Search Results,"search, search-results, find, query-results",1. Search bar (sticky/prominent), 2. Results count, 3. Filter/sort options, 4. Results list/grid, 5. Pagination, 6. No results state, 7. Footer,Search input, Results count, Filter chips, Results cards/list, Pagination, Empty state, Suggested searches,Minimal & Direct or Content-First,High contrast for search input. Results cards with subtle borders,Search animation, result highlight, filter transitions, empty state animation,All sites with search functionality,Clear empty states. Show search suggestions. Highlight matching terms.
+12,404 Error,"404, error, not-found, page-not-found, missing",1. Error code (404), 2. Friendly error message, 3. Illustration/icon, 4. Helpful links (home, popular pages), 5. Search bar (optional), 6. Footer,Error code display, Friendly message, Illustration/icon, Navigation links, Search bar, Home button,Minimal & Direct or Trust & Authority,Neutral colors. Avoid alarming red. Friendly, approachable,Subtle animation on illustration, link hover effects,All websites - error handling,Keep it friendly, not scary. Provide clear next steps.
+13,Login,"login, sign-in, authenticate, account-access",1. Brand logo/header, 2. Login form (email, password), 3. Remember me checkbox, 4. Forgot password link, 5. Social login options (optional), 6. Sign up link, 7. Footer,Login form, Brand logo, Social login buttons, Forgot password link, Sign up CTA,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button. Secure feeling,Form validation, password visibility toggle, social login animations,All sites with user accounts,Minimal fields. Clear error messages. Security indicators.
+14,Register,"register, sign-up, create-account, join",1. Brand logo/header, 2. Registration form (name, email, password, confirm), 3. Terms & conditions checkbox, 4. Social sign-up options (optional), 5. Login link, 6. Footer,Registration form, Brand logo, Social sign-up buttons, Terms checkbox, Login link,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit. Trust indicators,Form validation, password strength indicator, terms modal, social sign-up animations,All sites with user accounts,Clear validation. Show password requirements. Build trust.
+15,Dashboard,"dashboard, account, profile, my-account, user-dashboard",1. Welcome header, 2. Quick stats/overview cards, 3. Main content area (tabs/sections), 4. Sidebar navigation, 5. User profile section, 6. Footer,Welcome message, Stats cards, Tab navigation, Content sections, Sidebar menu, Profile dropdown,Data-Dense or Minimalism,Clean, organized. Status colors for stats. Clear hierarchy,Card hover, stat animations, tab transitions, smooth loading states,All sites with user accounts,Clear navigation. Quick access to key actions. Responsive layout.
+16,Cart,"cart, shopping-cart, basket, checkout-cart",1. Cart header, 2. Cart items list, 3. Quantity controls, 4. Remove items, 5. Order summary (subtotal, tax, total), 6. Checkout CTA, 7. Continue shopping link, 8. Footer,Cart items, Quantity controls, Remove buttons, Order summary, Checkout button, Empty cart state,Minimal & Direct or Conversion-Optimized,High contrast for checkout CTA. Clear pricing. Trust colors,Item animations, quantity updates, remove confirmations, empty state animation,E-commerce - shopping cart,Clear pricing breakdown. Easy item management. Prominent checkout CTA.
+17,Checkout,"checkout, payment, order, purchase, buy",1. Progress indicator, 2. Shipping address form, 3. Billing address (if different), 4. Payment method selection, 5. Order summary sidebar, 6. Place order button, 7. Security badges, 8. Footer,Progress steps, Address forms, Payment options, Order summary, Security badges, Place order button,Conversion-Optimized or Trust & Authority,High contrast for place order. Trust colors for security. Clear hierarchy,Progress indicator animation, form validation, payment method selection, order summary updates,E-commerce - purchase flow,Minimal steps. Clear progress. Security indicators. Trust signals.
+18,Thank You,"thank-you, confirmation, order-confirmed, success, receipt",1. Success icon/checkmark, 2. Thank you message, 3. Order number/details, 4. What happens next, 5. Order summary, 6. Continue shopping CTA, 7. Track order link, 8. Footer,Success icon, Thank you message, Order details, Next steps, Order summary, CTAs,Minimal & Direct or Trust & Authority,Success green. Celebratory but professional. Clear hierarchy,Success animation, order details reveal, smooth transitions,E-commerce - post-purchase,Clear confirmation. Set expectations. Provide next steps.
+19,Services,"services, offerings, what-we-do, solutions",1. Hero/Header, 2. Services overview, 3. Service cards grid (3-6 services), 4. Service details/features, 5. CTA section, 6. Footer,Service cards, Service descriptions, Feature lists, CTAs, Service icons,Minimal & Direct or Feature-Rich Showcase,Brand colors + service-specific accents,Service card hover, icon animations, feature reveals,Service-based businesses - showcase offerings,Clear service descriptions. Show value. Multiple CTAs.
+20,Portfolio,"portfolio, gallery, work, projects, showcase",1. Portfolio header, 2. Filter/category tabs, 3. Project grid (masonry or cards), 4. Project details on hover/click, 5. Pagination (optional), 6. Footer,Project grid, Filter tabs, Project cards, Lightbox/modal, Project details,Minimal & Direct or Bento Box Grid,Neutral bg to let work shine. Accent for filters,Grid animations, filter transitions, lightbox open, project hover effects,Creative agencies, portfolios - showcase work,Visual-first. Fast loading. Easy filtering.
+21,Testimonials,"testimonials, reviews, client-feedback, social-proof",1. Page header, 2. Testimonials grid/carousel, 3. Filter by category/rating, 4. Video testimonials (optional), 5. CTA section, 6. Footer,Testimonial cards, Client photos, Star ratings, Video players, Filter options, CTA buttons,Social Proof-Focused or Trust & Authority,Trust colors. Warm accents for testimonials,Carousel animations, video play, testimonial fade-in, star animations,All business types - build trust,Show variety. Include photos. Filter by industry/rating.
+22,Team,"team, our-team, staff, employees, people",1. Page header, 2. Team intro, 3. Team member grid, 4. Member details (role, bio, social), 5. Join us CTA (optional), 6. Footer,Team member cards, Photos, Role titles, Bio sections, Social links, CTA button,Storytelling-Driven or Trust & Authority,Warm, human colors. Professional but approachable,Member card hover, bio reveal, social link animations,All businesses - humanize brand,High-quality photos. Clear roles. Show personality.
+23,Careers,"careers, jobs, hiring, work-with-us, join-us",1. Hero with company culture, 2. Why work here, 3. Open positions list, 4. Job details/application, 5. Benefits section, 6. Application CTA, 7. Footer,Job listings, Company culture section, Benefits grid, Application form, CTA buttons,Feature-Rich Showcase or Trust & Authority,Energizing colors. Professional but inviting,Job card hover, benefits reveal, application form animations,Companies hiring - recruitment,Show culture. Clear job descriptions. Easy application.
+24,Events,"events, calendar, schedule, upcoming-events, workshops",1. Events header, 2. Upcoming events list/calendar, 3. Event details (date, location, description), 4. Registration CTA, 5. Past events (optional), 6. Footer,Event cards, Calendar view, Event details, Registration buttons, Date filters,Minimal & Direct or Feature-Rich Showcase,Event-specific colors. Clear date/location,Calendar animations, event card hover, registration animations,Event organizers, conferences - event listings,Clear dates. Easy registration. Show past events for credibility.
+25,Documentation,"documentation, docs, help-center, guides, api-docs",1. Search bar, 2. Category sidebar, 3. Content area, 4. Table of contents, 5. Related articles, 6. Feedback section, 7. Footer,Search bar, Sidebar navigation, Content area, TOC, Code blocks, Related links,FAQ/Documentation Landing or Minimal & Direct,High readability. Code syntax highlighting,Search autocomplete, smooth scrolling, code copy buttons, TOC highlight,Developer tools, SaaS - technical docs,Clear navigation. Searchable. Code examples. Versioning.
+26,Privacy Policy,"privacy, privacy-policy, data-protection, gdpr",1. Page header, 2. Last updated date, 3. Policy sections, 4. Contact information, 5. Footer,Policy sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
+27,Terms,"terms, terms-of-service, terms-and-conditions, legal",1. Page header, 2. Last updated date, 3. Terms sections, 4. Contact information, 5. Footer,Terms sections, Table of contents, Contact info, Legal text,Minimal & Direct,High readability. Professional, neutral colors,Smooth scrolling, section anchors, print-friendly,All websites - legal requirement,Clear sections. Easy to read. Contact info for questions.
+28,Coming Soon,"coming-soon, launch, under-construction, maintenance",1. Brand logo, 2. Coming soon message, 3. Countdown timer (optional), 4. Email signup form, 5. Social links, 6. Footer,Brand logo, Message, Countdown timer, Email form, Social links,Minimal & Direct or Hero-Centric,Brand colors. Anticipation building,Countdown animation, email form validation, subtle background animation,Pre-launch, maintenance - temporary pages,Clear message. Email capture. Set expectations.
+29,Compare,"compare, comparison, vs, versus, products-compare",1. Comparison header, 2. Comparison table (features side-by-side), 3. Highlight differences, 4. CTA buttons per option, 5. Footer,Comparison table, Feature rows, Highlight indicators, CTA buttons,Comparison Table Focus,Your product highlighted. Competitors neutral,Table row hover, feature highlight, CTA animations,Product comparisons - help decision,Clear differences. Highlight your advantages. Easy comparison.
 30,Account Settings,"settings, account-settings, profile-settings, preferences",1. Settings header, 2. Settings tabs/sections, 3. Form fields per section, 4. Save buttons, 5. Danger zone (delete account), 6. Footer,Settings tabs, Form sections, Save buttons, Danger zone,Minimal & Direct,High contrast for save. Warning colors for danger zone,Form validation, save confirmations, tab transitions,All sites with user accounts,Clear sections. Auto-save option. Clear danger actions.

package/dist/core/templates/skills/data/pages.csv

@@ -1,10 +1,10 @@
-No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
-1,Home,"home, homepage, index, main, landing",1. Hero with headline/CTA, 2. Value proposition, 3. Key features (3-5), 4. Social proof/testimonials, 5. CTA section, 6. Footer,Hero section, Feature cards, Testimonial carousel, CTA buttons, Navigation bar,Hero-Centric or Feature-Rich Showcase,Brand primary + white/light bg + accent CTA,Parallax hero, feature card hover, CTA glow, testimonial fade-in,All product types - main entry point,Strong first impression. Clear value prop. Multiple CTAs.
-2,About,"about, company, story, team, mission, vision, history, values",1. Hero/Header, 2. Mission/Vision, 3. Story/Timeline, 4. Team grid, 5. Values/Principles, 6. CTA (optional), 7. Footer,Page header, Mission statement, Timeline/story, Team member cards, Values grid, Stats/metrics,Storytelling-Driven or Trust & Authority,Professional colors + warm accents for team,Timeline animations, team card hover, stat counters, value reveal,All business types - builds trust,Humanize brand. Show expertise. Include team photos.
-3,Post Details,"post, article, blog, blog-post, single-post, content, news, story",1. Header with breadcrumbs, 2. Article title + meta, 3. Featured image, 4. Content body, 5. Author bio, 6. Related posts, 7. Comments (optional), 8. Footer,Breadcrumbs, Article header, Content area, Author card, Related posts grid, Share buttons, Comments section,Minimal & Direct or Content-First,High readability colors - dark text on light bg,Reading progress bar, smooth scroll, image lazy load, share animations,Blog, news, content sites - article pages,Readability paramount. SEO optimized. Social sharing.
-4,Category,"category, archive, listing, posts, blog-category, taxonomy",1. Header with category title, 2. Category description, 3. Post grid/list, 4. Pagination, 5. Sidebar (optional), 6. Footer,Category header, Filter/search bar, Post grid (masonry or cards), Pagination, Sidebar widgets,Minimal & Direct or Bento Box Grid,Neutral bg + card accents,Grid animations, filter transitions, infinite scroll option, pagination hover,Blog, news, e-commerce - category pages,Scannable layout. Fast filtering. Clear hierarchy.
-5,Pricing,"pricing, plans, tiers, subscription, cost, price, rates",1. Hero headline, 2. Price comparison cards (3-4 tiers), 3. Feature comparison table, 4. FAQ section, 5. Testimonials (optional), 6. Final CTA, 7. Footer,Pricing cards, Feature comparison table, FAQ accordion, Toggle (monthly/yearly), CTA buttons,Pricing-Focused Landing,Popular plan highlighted (brand color), others neutral,Price toggle animation, card hover lift, FAQ accordion, stat reveal,SaaS, services, memberships - pricing pages,Highlight recommended plan. Show value. Address objections in FAQ.
-6,FAQ,"faq, faqs, questions, help, support, answers",1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA, 5. Footer,Search bar, Category tabs, Accordion items, Contact form/link, Related articles,FAQ/Documentation Landing,Clean high readability. Category icons in brand color,Search autocomplete, smooth accordion, category hover, helpful feedback,All product types - support pages,Reduce support tickets. Track search. Show related articles.
-7,Contact,"contact, get-in-touch, reach-out, support, inquiry",1. Hero/Header, 2. Contact form (name, email, message), 3. Contact info (address, phone, email), 4. Map (optional), 5. Social links, 6. Footer,Contact form, Contact information cards, Map embed, Social media links, Success message,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button,Form validation animations, success feedback, map interactions,All business types - contact pages,Minimal fields (3-4 max). Clear validation. Multiple contact methods.
-8,Product Category,"product-category, shop, products, catalog, browse, category",1. Header with category title, 2. Filter/sort bar, 3. Product grid, 4. Pagination, 5. Sidebar filters (optional), 6. Footer,Category header, Filter/sort controls, Product cards grid, Pagination, Sidebar filters, Quick view modal,E-commerce Clean or Bento Box Grid,Product cards with hover states. Brand colors for CTAs,Product card hover, filter animations, quick view modal, infinite scroll,E-commerce - product listing pages,Scannable products. Fast filtering. Clear product info. Quick add-to-cart.
+No,Page Type,Keywords,Section Order,Key Components,Layout Pattern,Color Strategy,Recommended Effects,Best For,Considerations
+1,Home,"home, homepage, index, main, landing",1. Hero with headline/CTA, 2. Value proposition, 3. Key features (3-5), 4. Social proof/testimonials, 5. CTA section, 6. Footer,Hero section, Feature cards, Testimonial carousel, CTA buttons, Navigation bar,Hero-Centric or Feature-Rich Showcase,Brand primary + white/light bg + accent CTA,Parallax hero, feature card hover, CTA glow, testimonial fade-in,All product types - main entry point,Strong first impression. Clear value prop. Multiple CTAs.
+2,About,"about, company, story, team, mission, vision, history, values",1. Hero/Header, 2. Mission/Vision, 3. Story/Timeline, 4. Team grid, 5. Values/Principles, 6. CTA (optional), 7. Footer,Page header, Mission statement, Timeline/story, Team member cards, Values grid, Stats/metrics,Storytelling-Driven or Trust & Authority,Professional colors + warm accents for team,Timeline animations, team card hover, stat counters, value reveal,All business types - builds trust,Humanize brand. Show expertise. Include team photos.
+3,Post Details,"post, article, blog, blog-post, single-post, content, news, story",1. Header with breadcrumbs, 2. Article title + meta, 3. Featured image, 4. Content body, 5. Author bio, 6. Related posts, 7. Comments (optional), 8. Footer,Breadcrumbs, Article header, Content area, Author card, Related posts grid, Share buttons, Comments section,Minimal & Direct or Content-First,High readability colors - dark text on light bg,Reading progress bar, smooth scroll, image lazy load, share animations,Blog, news, content sites - article pages,Readability paramount. SEO optimized. Social sharing.
+4,Category,"category, archive, listing, posts, blog-category, taxonomy",1. Header with category title, 2. Category description, 3. Post grid/list, 4. Pagination, 5. Sidebar (optional), 6. Footer,Category header, Filter/search bar, Post grid (masonry or cards), Pagination, Sidebar widgets,Minimal & Direct or Bento Box Grid,Neutral bg + card accents,Grid animations, filter transitions, infinite scroll option, pagination hover,Blog, news, e-commerce - category pages,Scannable layout. Fast filtering. Clear hierarchy.
+5,Pricing,"pricing, plans, tiers, subscription, cost, price, rates",1. Hero headline, 2. Price comparison cards (3-4 tiers), 3. Feature comparison table, 4. FAQ section, 5. Testimonials (optional), 6. Final CTA, 7. Footer,Pricing cards, Feature comparison table, FAQ accordion, Toggle (monthly/yearly), CTA buttons,Pricing-Focused Landing,Popular plan highlighted (brand color), others neutral,Price toggle animation, card hover lift, FAQ accordion, stat reveal,SaaS, services, memberships - pricing pages,Highlight recommended plan. Show value. Address objections in FAQ.
+6,FAQ,"faq, faqs, questions, help, support, answers",1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA, 5. Footer,Search bar, Category tabs, Accordion items, Contact form/link, Related articles,FAQ/Documentation Landing,Clean high readability. Category icons in brand color,Search autocomplete, smooth accordion, category hover, helpful feedback,All product types - support pages,Reduce support tickets. Track search. Show related articles.
+7,Contact,"contact, get-in-touch, reach-out, support, inquiry",1. Hero/Header, 2. Contact form (name, email, message), 3. Contact info (address, phone, email), 4. Map (optional), 5. Social links, 6. Footer,Contact form, Contact information cards, Map embed, Social media links, Success message,Minimal & Direct or Trust & Authority,High contrast form. Brand color for submit button,Form validation animations, success feedback, map interactions,All business types - contact pages,Minimal fields (3-4 max). Clear validation. Multiple contact methods.
+8,Product Category,"product-category, shop, products, catalog, browse, category",1. Header with category title, 2. Filter/sort bar, 3. Product grid, 4. Pagination, 5. Sidebar filters (optional), 6. Footer,Category header, Filter/sort controls, Product cards grid, Pagination, Sidebar filters, Quick view modal,E-commerce Clean or Bento Box Grid,Product cards with hover states. Brand colors for CTAs,Product card hover, filter animations, quick view modal, infinite scroll,E-commerce - product listing pages,Scannable products. Fast filtering. Clear product info. Quick add-to-cart.
 9,Product Details,"product-detail, single-product, product-page, item",1. Breadcrumbs, 2. Product images gallery, 3. Product title + price, 4. Product description, 5. Add to cart + options, 6. Specifications, 7. Reviews, 8. Related products, 9. Footer,Product image gallery, Product info, Add to cart form, Specifications table, Reviews section, Related products,Conversion-Optimized or Feature-Rich Showcase,High contrast CTA. Product images prominent,Image zoom, gallery slider, add-to-cart animation, review stars, related hover,E-commerce - product detail pages,Conversion focus. Clear pricing. Multiple images. Trust signals (reviews).

package/dist/core/templates/skills/data/typography.csv

@@ -1,58 +1,58 @@
-STT,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best For,Google Fonts URL,CSS Import,Tailwind Config,Notes
-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","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700|Playfair+Display:wght@400;500;600;700","@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');","fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }","High contrast between elegant heading and clean body. Perfect for luxury/premium."
-2,Modern Professional,"Sans + Sans",Poppins,Open Sans,"modern, professional, clean, corporate, friendly, approachable","SaaS, corporate sites, business apps, startups, professional services","https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700|Poppins:wght@400;500;600;700","@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');","fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }","Geometric Poppins for headings, humanist Open Sans for readability."
-3,Tech Startup,"Sans + Sans",Space Grotesk,DM Sans,"tech, startup, modern, innovative, bold, futuristic","Tech companies, startups, SaaS, developer tools, AI products","https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }","Space Grotesk has unique character, DM Sans is highly readable."
-4,Editorial Classic,"Serif + Serif",Cormorant Garamond,Libre Baskerville,"editorial, classic, literary, traditional, refined, bookish","Publishing, blogs, news sites, literary magazines, book covers","https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700|Libre+Baskerville:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }","All-serif pairing for traditional editorial feel."
-5,Minimal Swiss,"Sans + Sans",Inter,Inter,"minimal, clean, swiss, functional, neutral, professional","Dashboards, admin panels, documentation, enterprise apps, design systems","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Single font family with weight variations. Ultimate simplicity."
-6,Playful Creative,"Display + Sans",Fredoka,Nunito,"playful, friendly, fun, creative, warm, approachable","Children's apps, educational, gaming, creative tools, entertainment","https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700|Nunito:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }","Rounded, friendly fonts perfect for playful UIs."
-7,Bold Statement,"Display + Sans",Bebas Neue,Source Sans 3,"bold, impactful, strong, dramatic, modern, headlines","Marketing sites, portfolios, agencies, event pages, sports","https://fonts.google.com/share?selection.family=Bebas+Neue|Source+Sans+3:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Bebas Neue for large headlines only. All-caps display font."
-8,Wellness Calm,"Serif + Sans",Lora,Raleway,"calm, wellness, health, relaxing, natural, organic","Health apps, wellness, spa, meditation, yoga, organic brands","https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700|Raleway:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }","Lora's organic curves with Raleway's elegant simplicity."
-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","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700|JetBrains+Mono:wght@400;500;600;700","@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');","fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }","JetBrains for code, IBM Plex for UI. Developer-focused."
-10,Retro Vintage,"Display + Serif",Abril Fatface,Merriweather,"retro, vintage, nostalgic, dramatic, decorative, bold","Vintage brands, breweries, restaurants, creative portfolios, posters","https://fonts.google.com/share?selection.family=Abril+Fatface|Merriweather:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');","fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }","Abril Fatface for hero headlines only. High-impact vintage feel."
-11,Geometric Modern,"Sans + Sans",Outfit,Work Sans,"geometric, modern, clean, balanced, contemporary, versatile","General purpose, portfolios, agencies, modern brands, landing pages","https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700|Work+Sans:wght@300;400;500;600;700","@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');","fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }","Both geometric but Outfit more distinctive for headings."
-12,Luxury Serif,"Serif + Sans",Cormorant,Montserrat,"luxury, high-end, fashion, elegant, refined, premium","Fashion brands, luxury e-commerce, jewelry, high-end services","https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700|Montserrat:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }","Cormorant's elegance with Montserrat's geometric precision."
-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","https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single versatile font. Modern alternative to Inter."
-14,News Editorial,"Serif + Sans",Newsreader,Roboto,"news, editorial, journalism, trustworthy, readable, informative","News sites, blogs, magazines, journalism, content-heavy sites","https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700|Roboto:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }","Newsreader designed for long-form reading. Roboto for UI."
-15,Handwritten Charm,"Script + Sans",Caveat,Quicksand,"handwritten, personal, friendly, casual, warm, charming","Personal blogs, invitations, creative portfolios, lifestyle brands","https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700|Quicksand:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');","fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }","Use Caveat sparingly for accents. Quicksand for body."
-16,Corporate Trust,"Sans + Sans",Lexend,Source Sans 3,"corporate, trustworthy, accessible, readable, professional, clean","Enterprise, government, healthcare, finance, accessibility-focused","https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700|Source+Sans+3:wght@300;400;500;600;700","@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');","fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Lexend designed for readability. Excellent accessibility."
-17,Brutalist Raw,"Mono + Mono",Space Mono,Space Mono,"brutalist, raw, technical, monospace, minimal, stark","Brutalist designs, developer portfolios, experimental, tech art","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700","@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.google.com/share?selection.family=Manrope:wght@300;400;500;600;700|Syne:wght@400;500;600;700","@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.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Varela+Round","@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.google.com/share?selection.family=DM+Sans:wght@400;500;700","@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."
-21,Vietnamese Friendly,"Sans + Sans",Be Vietnam Pro,Noto Sans,"vietnamese, international, readable, clean, multilingual, accessible","Vietnamese sites, multilingual apps, international products","https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;600;700","@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.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700|Noto+Serif+JP:wght@400;500;600;700","@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.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700","@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."
-24,Chinese Traditional,"Serif + Sans",Noto Serif TC,Noto Sans TC,"chinese, traditional, elegant, cultural, multilingual, readable","Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets","https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700|Noto+Serif+TC:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }","Traditional Chinese character support. Elegant pairing."
-25,Chinese Simplified,"Sans + Sans",Noto Sans SC,Noto Sans SC,"chinese, simplified, modern, professional, multilingual, readable","Simplified Chinese sites, mainland China market, business apps","https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }","Simplified Chinese support. Clean modern look."
-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","https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700|Noto+Sans+Arabic:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }","RTL support. Naskh for traditional, Sans for modern Arabic."
-27,Thai Modern,"Sans + Sans",Noto Sans Thai,Noto Sans Thai,"thai, modern, readable, clean, multilingual, accessible","Thai sites, Southeast Asia, tourism, Thai restaurants","https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }","Clean Thai typography. Excellent readability."
-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","https://fonts.google.com/share?selection.family=Noto+Sans+Hebrew:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }","RTL support. Clean modern Hebrew typography."
-29,Legal Professional,"Serif + Sans",EB Garamond,Lato,"legal, professional, traditional, trustworthy, formal, authoritative","Law firms, legal services, contracts, formal documents, government","https://fonts.google.com/share?selection.family=EB+Garamond:wght@400;500;600;700|Lato:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');","fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }","EB Garamond for authority. Lato for clean body text."
-30,Medical Clean,"Sans + Sans",Figtree,Noto Sans,"medical, clean, accessible, professional, healthcare, trustworthy","Healthcare, medical clinics, pharma, health apps, accessibility","https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');","fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }","Clean, accessible fonts for medical contexts."
-31,Financial Trust,"Sans + Sans",IBM Plex Sans,IBM Plex Sans,"financial, trustworthy, professional, corporate, banking, serious","Banks, finance, insurance, investment, fintech, enterprise","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }","IBM Plex conveys trust and professionalism. Excellent for data."
-32,Real Estate Luxury,"Serif + Sans",Cinzel,Josefin Sans,"real estate, luxury, elegant, sophisticated, property, premium","Real estate, luxury properties, architecture, interior design","https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700|Josefin+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }","Cinzel's elegance for headlines. Josefin for modern body."
-33,Restaurant Menu,"Serif + Sans",Playfair Display SC,Karla,"restaurant, menu, culinary, elegant, foodie, hospitality","Restaurants, cafes, food blogs, culinary, hospitality","https://fonts.google.com/share?selection.family=Karla:wght@300;400;500;600;700|Playfair+Display+SC:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');","fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }","Small caps Playfair for menu headers. Karla for descriptions."
-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","https://fonts.google.com/share?selection.family=Didact+Gothic|Poiret+One","@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');","fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }","Poiret One for art deco headlines only. Didact for body."
-35,Magazine Style,"Serif + Sans",Libre Bodoni,Public Sans,"magazine, editorial, publishing, refined, journalism, print","Magazines, online publications, editorial content, journalism","https://fonts.google.com/share?selection.family=Libre+Bodoni:wght@400;500;600;700|Public+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }","Bodoni's editorial elegance. Public Sans for clean UI."
-36,Crypto/Web3,"Sans + Sans",Orbitron,Exo 2,"crypto, web3, futuristic, tech, blockchain, digital","Crypto platforms, NFT, blockchain, web3, futuristic tech","https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700|Orbitron:wght@400;500;600;700","@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.google.com/share?selection.family=Chakra+Petch:wght@300;400;500;600;700|Russo+One","@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.google.com/share?selection.family=Amatic+SC:wght@400;700|Cabin:wght@400;500;600;700","@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.google.com/share?selection.family=Outfit:wght@400;500;600;700|Rubik:wght@300;400;500;600;700","@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."
-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.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Rubik:wght@300;400;500;600;700","@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.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700|Crimson+Pro:wght@400;500;600;700","@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.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700","@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."
-43,Music/Entertainment,"Display + Sans",Righteous,Poppins,"music, entertainment, fun, energetic, bold, performance","Music platforms, entertainment, events, festivals, performers","https://fonts.google.com/share?selection.family=Poppins:wght@300;400;500;600;700|Righteous","@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');","fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }","Righteous for bold entertainment headers. Poppins for body."
-44,Minimalist Portfolio,"Sans + Sans",Archivo,Space Grotesk,"minimal, portfolio, designer, creative, clean, artistic","Design portfolios, creative professionals, minimalist brands","https://fonts.google.com/share?selection.family=Archivo:wght@300;400;500;600;700|Space+Grotesk:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }","Space Grotesk for distinctive headers. Archivo for clean body."
-45,Kids/Education,"Display + Sans",Baloo 2,Comic Neue,"kids, education, playful, friendly, colorful, learning","Children's apps, educational games, kid-friendly content","https://fonts.google.com/share?selection.family=Baloo+2:wght@400;500;600;700|Comic+Neue:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');","fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }","Fun, playful fonts for children. Comic Neue is readable comic style."
-46,Wedding/Romance,"Script + Serif",Great Vibes,Cormorant Infant,"wedding, romance, elegant, script, invitation, feminine","Wedding sites, invitations, romantic brands, bridal","https://fonts.google.com/share?selection.family=Cormorant+Infant:wght@300;400;500;600;700|Great+Vibes","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');","fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }","Great Vibes for elegant accents. Cormorant for readable text."
-47,Science/Tech,"Sans + Sans",Exo,Roboto Mono,"science, technology, research, data, futuristic, precise","Science, research, tech documentation, data-heavy sites","https://fonts.google.com/share?selection.family=Exo:wght@300;400;500;600;700|Roboto+Mono:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }","Exo for modern tech feel. Roboto Mono for code/data."
-48,Accessibility First,"Sans + Sans",Atkinson Hyperlegible,Atkinson Hyperlegible,"accessible, readable, inclusive, WCAG, dyslexia-friendly, clear","Accessibility-critical sites, government, healthcare, inclusive design","https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');","fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }","Designed for maximum legibility. Excellent for accessibility."
-49,Sports/Fitness,"Sans + Sans",Barlow Condensed,Barlow,"sports, fitness, athletic, energetic, condensed, action","Sports, fitness, gyms, athletic brands, competition","https://fonts.google.com/share?selection.family=Barlow+Condensed:wght@400;500;600;700|Barlow:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }","Condensed for impact headlines. Regular Barlow for body."
-50,Luxury Minimalist,"Serif + Sans",Bodoni Moda,Jost,"luxury, minimalist, high-end, sophisticated, refined, premium","Luxury minimalist brands, high-end fashion, premium products","https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;500;600;700|Jost:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }","Bodoni's high contrast elegance. Jost for geometric body."
-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","https://fonts.google.com/share?selection.family=Fira+Code:wght@300;400;500;600;700|Share+Tech+Mono","@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');","fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }","Share Tech Mono has that classic sci-fi look."
-52,Pixel Retro,"Display + Sans",Press Start 2P,VT323,"pixel, retro, gaming, 8-bit, nostalgic, arcade","Pixel art games, retro websites, creative portfolios","https://fonts.google.com/share?selection.family=Press+Start+2P|VT323","@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');","fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }","Press Start 2P is very wide/large. VT323 is better for body text."
-53,Neubrutalist Bold,"Display + Sans",Lexend Mega,Public Sans,"bold, neubrutalist, loud, strong, geometric, quirky","Neubrutalist designs, Gen Z brands, bold marketing","https://fonts.google.com/share?selection.family=Lexend+Mega:wght@100..900|Public+Sans:wght@100..900","@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');","fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }","Lexend Mega has distinct character and variable weight."
-54,Academic/Archival,"Serif + Serif",EB Garamond,Crimson Text,"academic, old-school, university, research, serious, traditional","University sites, archives, research papers, history","https://fonts.google.com/share?selection.family=Crimson+Text:wght@400;600;700|EB+Garamond:wght@400;500;600;700;800","@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');","fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }","Classic academic aesthetic. Very legible."
-55,Spatial Clear,"Sans + Sans",Inter,Inter,"spatial, legible, glass, system, clean, neutral","Spatial computing, AR/VR, glassmorphism interfaces","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Optimized for readability on dynamic backgrounds."
-56,Kinetic Motion,"Display + Mono",Syncopate,Space Mono,"kinetic, motion, futuristic, speed, wide, tech","Music festivals, automotive, high-energy brands","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700|Syncopate:wght@400;700","@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."
+STT,Font Pairing Name,Category,Heading Font,Body Font,Mood/Style Keywords,Best For,Google Fonts URL,CSS Import,Tailwind Config,Notes
+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","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700|Playfair+Display:wght@400;500;600;700","@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');","fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }","High contrast between elegant heading and clean body. Perfect for luxury/premium."
+2,Modern Professional,"Sans + Sans",Poppins,Open Sans,"modern, professional, clean, corporate, friendly, approachable","SaaS, corporate sites, business apps, startups, professional services","https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700|Poppins:wght@400;500;600;700","@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');","fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }","Geometric Poppins for headings, humanist Open Sans for readability."
+3,Tech Startup,"Sans + Sans",Space Grotesk,DM Sans,"tech, startup, modern, innovative, bold, futuristic","Tech companies, startups, SaaS, developer tools, AI products","https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700|Space+Grotesk:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }","Space Grotesk has unique character, DM Sans is highly readable."
+4,Editorial Classic,"Serif + Serif",Cormorant Garamond,Libre Baskerville,"editorial, classic, literary, traditional, refined, bookish","Publishing, blogs, news sites, literary magazines, book covers","https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700|Libre+Baskerville:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');","fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }","All-serif pairing for traditional editorial feel."
+5,Minimal Swiss,"Sans + Sans",Inter,Inter,"minimal, clean, swiss, functional, neutral, professional","Dashboards, admin panels, documentation, enterprise apps, design systems","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Single font family with weight variations. Ultimate simplicity."
+6,Playful Creative,"Display + Sans",Fredoka,Nunito,"playful, friendly, fun, creative, warm, approachable","Children's apps, educational, gaming, creative tools, entertainment","https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700|Nunito:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }","Rounded, friendly fonts perfect for playful UIs."
+7,Bold Statement,"Display + Sans",Bebas Neue,Source Sans 3,"bold, impactful, strong, dramatic, modern, headlines","Marketing sites, portfolios, agencies, event pages, sports","https://fonts.google.com/share?selection.family=Bebas+Neue|Source+Sans+3:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Bebas Neue for large headlines only. All-caps display font."
+8,Wellness Calm,"Serif + Sans",Lora,Raleway,"calm, wellness, health, relaxing, natural, organic","Health apps, wellness, spa, meditation, yoga, organic brands","https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700|Raleway:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }","Lora's organic curves with Raleway's elegant simplicity."
+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","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700|JetBrains+Mono:wght@400;500;600;700","@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');","fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }","JetBrains for code, IBM Plex for UI. Developer-focused."
+10,Retro Vintage,"Display + Serif",Abril Fatface,Merriweather,"retro, vintage, nostalgic, dramatic, decorative, bold","Vintage brands, breweries, restaurants, creative portfolios, posters","https://fonts.google.com/share?selection.family=Abril+Fatface|Merriweather:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');","fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }","Abril Fatface for hero headlines only. High-impact vintage feel."
+11,Geometric Modern,"Sans + Sans",Outfit,Work Sans,"geometric, modern, clean, balanced, contemporary, versatile","General purpose, portfolios, agencies, modern brands, landing pages","https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700|Work+Sans:wght@300;400;500;600;700","@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');","fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }","Both geometric but Outfit more distinctive for headings."
+12,Luxury Serif,"Serif + Sans",Cormorant,Montserrat,"luxury, high-end, fashion, elegant, refined, premium","Fashion brands, luxury e-commerce, jewelry, high-end services","https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700|Montserrat:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }","Cormorant's elegance with Montserrat's geometric precision."
+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","https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }","Single versatile font. Modern alternative to Inter."
+14,News Editorial,"Serif + Sans",Newsreader,Roboto,"news, editorial, journalism, trustworthy, readable, informative","News sites, blogs, magazines, journalism, content-heavy sites","https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700|Roboto:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }","Newsreader designed for long-form reading. Roboto for UI."
+15,Handwritten Charm,"Script + Sans",Caveat,Quicksand,"handwritten, personal, friendly, casual, warm, charming","Personal blogs, invitations, creative portfolios, lifestyle brands","https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700|Quicksand:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');","fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }","Use Caveat sparingly for accents. Quicksand for body."
+16,Corporate Trust,"Sans + Sans",Lexend,Source Sans 3,"corporate, trustworthy, accessible, readable, professional, clean","Enterprise, government, healthcare, finance, accessibility-focused","https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700|Source+Sans+3:wght@300;400;500;600;700","@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');","fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }","Lexend designed for readability. Excellent accessibility."
+17,Brutalist Raw,"Mono + Mono",Space Mono,Space Mono,"brutalist, raw, technical, monospace, minimal, stark","Brutalist designs, developer portfolios, experimental, tech art","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700","@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.google.com/share?selection.family=Manrope:wght@300;400;500;600;700|Syne:wght@400;500;600;700","@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.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Varela+Round","@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.google.com/share?selection.family=DM+Sans:wght@400;500;700","@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."
+21,Vietnamese Friendly,"Sans + Sans",Be Vietnam Pro,Noto Sans,"vietnamese, international, readable, clean, multilingual, accessible","Vietnamese sites, multilingual apps, international products","https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;600;700","@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.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700|Noto+Serif+JP:wght@400;500;600;700","@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.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700","@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."
+24,Chinese Traditional,"Serif + Sans",Noto Serif TC,Noto Sans TC,"chinese, traditional, elegant, cultural, multilingual, readable","Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets","https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700|Noto+Serif+TC:wght@400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');","fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }","Traditional Chinese character support. Elegant pairing."
+25,Chinese Simplified,"Sans + Sans",Noto Sans SC,Noto Sans SC,"chinese, simplified, modern, professional, multilingual, readable","Simplified Chinese sites, mainland China market, business apps","https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }","Simplified Chinese support. Clean modern look."
+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","https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700|Noto+Sans+Arabic:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');","fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }","RTL support. Naskh for traditional, Sans for modern Arabic."
+27,Thai Modern,"Sans + Sans",Noto Sans Thai,Noto Sans Thai,"thai, modern, readable, clean, multilingual, accessible","Thai sites, Southeast Asia, tourism, Thai restaurants","https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }","Clean Thai typography. Excellent readability."
+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","https://fonts.google.com/share?selection.family=Noto+Sans+Hebrew:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Noto Sans Hebrew', 'sans-serif'] }","RTL support. Clean modern Hebrew typography."
+29,Legal Professional,"Serif + Sans",EB Garamond,Lato,"legal, professional, traditional, trustworthy, formal, authoritative","Law firms, legal services, contracts, formal documents, government","https://fonts.google.com/share?selection.family=EB+Garamond:wght@400;500;600;700|Lato:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap');","fontFamily: { serif: ['EB Garamond', 'serif'], sans: ['Lato', 'sans-serif'] }","EB Garamond for authority. Lato for clean body text."
+30,Medical Clean,"Sans + Sans",Figtree,Noto Sans,"medical, clean, accessible, professional, healthcare, trustworthy","Healthcare, medical clinics, pharma, health apps, accessibility","https://fonts.google.com/share?selection.family=Figtree:wght@300;400;500;600;700|Noto+Sans:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;700&display=swap');","fontFamily: { heading: ['Figtree', 'sans-serif'], body: ['Noto Sans', 'sans-serif'] }","Clean, accessible fonts for medical contexts."
+31,Financial Trust,"Sans + Sans",IBM Plex Sans,IBM Plex Sans,"financial, trustworthy, professional, corporate, banking, serious","Banks, finance, insurance, investment, fintech, enterprise","https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { sans: ['IBM Plex Sans', 'sans-serif'] }","IBM Plex conveys trust and professionalism. Excellent for data."
+32,Real Estate Luxury,"Serif + Sans",Cinzel,Josefin Sans,"real estate, luxury, elegant, sophisticated, property, premium","Real estate, luxury properties, architecture, interior design","https://fonts.google.com/share?selection.family=Cinzel:wght@400;500;600;700|Josefin+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Cinzel', 'serif'], sans: ['Josefin Sans', 'sans-serif'] }","Cinzel's elegance for headlines. Josefin for modern body."
+33,Restaurant Menu,"Serif + Sans",Playfair Display SC,Karla,"restaurant, menu, culinary, elegant, foodie, hospitality","Restaurants, cafes, food blogs, culinary, hospitality","https://fonts.google.com/share?selection.family=Karla:wght@300;400;500;600;700|Playfair+Display+SC:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display+SC:wght@400;700&display=swap');","fontFamily: { display: ['Playfair Display SC', 'serif'], sans: ['Karla', 'sans-serif'] }","Small caps Playfair for menu headers. Karla for descriptions."
+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","https://fonts.google.com/share?selection.family=Didact+Gothic|Poiret+One","@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Poiret+One&display=swap');","fontFamily: { display: ['Poiret One', 'sans-serif'], sans: ['Didact Gothic', 'sans-serif'] }","Poiret One for art deco headlines only. Didact for body."
+35,Magazine Style,"Serif + Sans",Libre Bodoni,Public Sans,"magazine, editorial, publishing, refined, journalism, print","Magazines, online publications, editorial content, journalism","https://fonts.google.com/share?selection.family=Libre+Bodoni:wght@400;500;600;700|Public+Sans:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:wght@400;500;600;700&family=Public+Sans:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Libre Bodoni', 'serif'], sans: ['Public Sans', 'sans-serif'] }","Bodoni's editorial elegance. Public Sans for clean UI."
+36,Crypto/Web3,"Sans + Sans",Orbitron,Exo 2,"crypto, web3, futuristic, tech, blockchain, digital","Crypto platforms, NFT, blockchain, web3, futuristic tech","https://fonts.google.com/share?selection.family=Exo+2:wght@300;400;500;600;700|Orbitron:wght@400;500;600;700","@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.google.com/share?selection.family=Chakra+Petch:wght@300;400;500;600;700|Russo+One","@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.google.com/share?selection.family=Amatic+SC:wght@400;700|Cabin:wght@400;500;600;700","@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.google.com/share?selection.family=Outfit:wght@400;500;600;700|Rubik:wght@300;400;500;600;700","@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."
+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.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700|Rubik:wght@300;400;500;600;700","@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.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700|Crimson+Pro:wght@400;500;600;700","@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.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700","@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."
+43,Music/Entertainment,"Display + Sans",Righteous,Poppins,"music, entertainment, fun, energetic, bold, performance","Music platforms, entertainment, events, festivals, performers","https://fonts.google.com/share?selection.family=Poppins:wght@300;400;500;600;700|Righteous","@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Righteous&display=swap');","fontFamily: { display: ['Righteous', 'sans-serif'], sans: ['Poppins', 'sans-serif'] }","Righteous for bold entertainment headers. Poppins for body."
+44,Minimalist Portfolio,"Sans + Sans",Archivo,Space Grotesk,"minimal, portfolio, designer, creative, clean, artistic","Design portfolios, creative professionals, minimalist brands","https://fonts.google.com/share?selection.family=Archivo:wght@300;400;500;600;700|Space+Grotesk:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');","fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['Archivo', 'sans-serif'] }","Space Grotesk for distinctive headers. Archivo for clean body."
+45,Kids/Education,"Display + Sans",Baloo 2,Comic Neue,"kids, education, playful, friendly, colorful, learning","Children's apps, educational games, kid-friendly content","https://fonts.google.com/share?selection.family=Baloo+2:wght@400;500;600;700|Comic+Neue:wght@300;400;700","@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Comic+Neue:wght@300;400;700&display=swap');","fontFamily: { display: ['Baloo 2', 'sans-serif'], sans: ['Comic Neue', 'sans-serif'] }","Fun, playful fonts for children. Comic Neue is readable comic style."
+46,Wedding/Romance,"Script + Serif",Great Vibes,Cormorant Infant,"wedding, romance, elegant, script, invitation, feminine","Wedding sites, invitations, romantic brands, bridal","https://fonts.google.com/share?selection.family=Cormorant+Infant:wght@300;400;500;600;700|Great+Vibes","@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&family=Great+Vibes&display=swap');","fontFamily: { script: ['Great Vibes', 'cursive'], serif: ['Cormorant Infant', 'serif'] }","Great Vibes for elegant accents. Cormorant for readable text."
+47,Science/Tech,"Sans + Sans",Exo,Roboto Mono,"science, technology, research, data, futuristic, precise","Science, research, tech documentation, data-heavy sites","https://fonts.google.com/share?selection.family=Exo:wght@300;400;500;600;700|Roboto+Mono:wght@300;400;500;700","@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;700&display=swap');","fontFamily: { sans: ['Exo', 'sans-serif'], mono: ['Roboto Mono', 'monospace'] }","Exo for modern tech feel. Roboto Mono for code/data."
+48,Accessibility First,"Sans + Sans",Atkinson Hyperlegible,Atkinson Hyperlegible,"accessible, readable, inclusive, WCAG, dyslexia-friendly, clear","Accessibility-critical sites, government, healthcare, inclusive design","https://fonts.google.com/share?selection.family=Atkinson+Hyperlegible:wght@400;700","@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');","fontFamily: { sans: ['Atkinson Hyperlegible', 'sans-serif'] }","Designed for maximum legibility. Excellent for accessibility."
+49,Sports/Fitness,"Sans + Sans",Barlow Condensed,Barlow,"sports, fitness, athletic, energetic, condensed, action","Sports, fitness, gyms, athletic brands, competition","https://fonts.google.com/share?selection.family=Barlow+Condensed:wght@400;500;600;700|Barlow:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=Barlow:wght@300;400;500;600;700&display=swap');","fontFamily: { display: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'] }","Condensed for impact headlines. Regular Barlow for body."
+50,Luxury Minimalist,"Serif + Sans",Bodoni Moda,Jost,"luxury, minimalist, high-end, sophisticated, refined, premium","Luxury minimalist brands, high-end fashion, premium products","https://fonts.google.com/share?selection.family=Bodoni+Moda:wght@400;500;600;700|Jost:wght@300;400;500;600;700","@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@400;500;600;700&family=Jost:wght@300;400;500;600;700&display=swap');","fontFamily: { serif: ['Bodoni Moda', 'serif'], sans: ['Jost', 'sans-serif'] }","Bodoni's high contrast elegance. Jost for geometric body."
+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","https://fonts.google.com/share?selection.family=Fira+Code:wght@300;400;500;600;700|Share+Tech+Mono","@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');","fontFamily: { hud: ['Share Tech Mono', 'monospace'], code: ['Fira Code', 'monospace'] }","Share Tech Mono has that classic sci-fi look."
+52,Pixel Retro,"Display + Sans",Press Start 2P,VT323,"pixel, retro, gaming, 8-bit, nostalgic, arcade","Pixel art games, retro websites, creative portfolios","https://fonts.google.com/share?selection.family=Press+Start+2P|VT323","@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');","fontFamily: { pixel: ['Press Start 2P', 'cursive'], terminal: ['VT323', 'monospace'] }","Press Start 2P is very wide/large. VT323 is better for body text."
+53,Neubrutalist Bold,"Display + Sans",Lexend Mega,Public Sans,"bold, neubrutalist, loud, strong, geometric, quirky","Neubrutalist designs, Gen Z brands, bold marketing","https://fonts.google.com/share?selection.family=Lexend+Mega:wght@100..900|Public+Sans:wght@100..900","@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');","fontFamily: { mega: ['Lexend Mega', 'sans-serif'], body: ['Public Sans', 'sans-serif'] }","Lexend Mega has distinct character and variable weight."
+54,Academic/Archival,"Serif + Serif",EB Garamond,Crimson Text,"academic, old-school, university, research, serious, traditional","University sites, archives, research papers, history","https://fonts.google.com/share?selection.family=Crimson+Text:wght@400;600;700|EB+Garamond:wght@400;500;600;700;800","@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=EB+Garamond:wght@400;500;600;700;800&display=swap');","fontFamily: { classic: ['EB Garamond', 'serif'], text: ['Crimson Text', 'serif'] }","Classic academic aesthetic. Very legible."
+55,Spatial Clear,"Sans + Sans",Inter,Inter,"spatial, legible, glass, system, clean, neutral","Spatial computing, AR/VR, glassmorphism interfaces","https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600","@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');","fontFamily: { sans: ['Inter', 'sans-serif'] }","Optimized for readability on dynamic backgrounds."
+56,Kinetic Motion,"Display + Mono",Syncopate,Space Mono,"kinetic, motion, futuristic, speed, wide, tech","Music festivals, automotive, high-energy brands","https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700|Syncopate:wght@400;700","@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.google.com/share?selection.family=Anton|Epilogue:wght@400;500;600;700","@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."