Cusps — Design Trends Kit · Type Pairing Guide
cusps.net

All fonts are open-source Google Fonts, free for commercial use. Font files are NOT included — grab them from the links below.

[Branding / Logo] Chrome · Airbrush
  Display:  Syne  ->  https://fonts.google.com/specimen/Syne
  Body:     Space Grotesk  ->  https://fonts.google.com/specimen/Space+Grotesk
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Space+Grotesk:wght@400;500&display=swap" rel="stylesheet">

[Branding / Logo] Wordmark Minimalism
  Display:  Archivo  ->  https://fonts.google.com/specimen/Archivo
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Branding / Logo] Inflated 3D Type
  Display:  Fredoka  ->  https://fonts.google.com/specimen/Fredoka
  Body:     Nunito  ->  https://fonts.google.com/specimen/Nunito
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Nunito:wght@400;600&display=swap" rel="stylesheet">

[Web / Landing] Neo-Brutalism
  Display:  Archivo Black  ->  https://fonts.google.com/specimen/Archivo+Black
  Body:     Space Mono  ->  https://fonts.google.com/specimen/Space+Mono
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

[Web / Landing] Spatial Glass
  Display:  Sora  ->  https://fonts.google.com/specimen/Sora
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Web / Landing] Big Type Minimalism
  Display:  Anton  ->  https://fonts.google.com/specimen/Anton
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[UI / Product] Mono Terminal
  Display:  Space Mono  ->  https://fonts.google.com/specimen/Space+Mono
  Body:     IBM Plex Sans  ->  https://fonts.google.com/specimen/IBM+Plex+Sans
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500&display=swap" rel="stylesheet">

[UI / Product] Neo-Skeuomorphism
  Display:  Bricolage Grotesque  ->  https://fonts.google.com/specimen/Bricolage+Grotesque
  Body:     Hanken Grotesk  ->  https://fonts.google.com/specimen/Hanken+Grotesk
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=Hanken+Grotesk:wght@400;500&display=swap" rel="stylesheet">

[UI / Product] Bento Grid
  Display:  Plus Jakarta Sans  ->  https://fonts.google.com/specimen/Plus+Jakarta+Sans
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Type / Layout] Contrast Display Serif
  Display:  Fraunces  ->  https://fonts.google.com/specimen/Fraunces
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;900&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Type / Layout] Variable Font Motion
  Display:  Syne  ->  https://fonts.google.com/specimen/Syne
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Type / Layout] Hand-Lettering
  Display:  Caveat  ->  https://fonts.google.com/specimen/Caveat
  Body:     Nunito Sans  ->  https://fonts.google.com/specimen/Nunito+Sans
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">

[Color] Acid / Hi-Vis
  Display:  Space Grotesk  ->  https://fonts.google.com/specimen/Space+Grotesk
  Body:     Space Mono  ->  https://fonts.google.com/specimen/Space+Mono
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">

[Color] Muted Earth
  Display:  Newsreader  ->  https://fonts.google.com/specimen/Newsreader
  Body:     Nunito Sans  ->  https://fonts.google.com/specimen/Nunito+Sans
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@400;600&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">

[Color] Pastel Gradient
  Display:  Quicksand  ->  https://fonts.google.com/specimen/Quicksand
  Body:     Nunito  ->  https://fonts.google.com/specimen/Nunito
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&family=Nunito:wght@400;600&display=swap" rel="stylesheet">

[Illustration / Print] Risograph
  Display:  Bricolage Grotesque  ->  https://fonts.google.com/specimen/Bricolage+Grotesque
  Body:     IBM Plex Mono  ->  https://fonts.google.com/specimen/IBM+Plex+Mono
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;800&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">

[Illustration / Print] Handmade Collage
  Display:  Anton  ->  https://fonts.google.com/specimen/Anton
  Body:     Courier Prime  ->  https://fonts.google.com/specimen/Courier+Prime
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">

[Illustration / Print] Claymorphism
  Display:  Fredoka  ->  https://fonts.google.com/specimen/Fredoka
  Body:     Quicksand  ->  https://fonts.google.com/specimen/Quicksand
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&family=Quicksand:wght@400;600&display=swap" rel="stylesheet">

[Tools] Tailwind CSS
  Display:  Inter  ->  https://fonts.google.com/specimen/Inter
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Tools] Astro
  Display:  Space Grotesk  ->  https://fonts.google.com/specimen/Space+Grotesk
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

[Tools] AI Image & Design
  Display:  Sora  ->  https://fonts.google.com/specimen/Sora
  Body:     Inter  ->  https://fonts.google.com/specimen/Inter
  Embed:    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@600;800&family=Inter:wght@400;500&display=swap" rel="stylesheet">

