Menu
Reference for selecting distinctive typography. Includes font recommendations by vibe, category, archetype, and pairing guidelines for Next.js projects.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
AI assistant framework for building unique, authentic portfolio websites from scratch. Guides agents through research, design, and implementation phases.
Publish a completed Persona portfolio safely through Vercel or GitHub Pages.
Reference guide for portfolio color palettes. Includes quick vibe lookup, full palettes, and application guidelines using the 60-30-10 rule.
Generate authentic, compelling copy for portfolios. Covers tone calibration, taglines, bios, project descriptions, and avoiding assumptions.
Create unique visual designs by synthesizing from inspirations and preferences. Covers typography, color, layout, spacing, and animation philosophy.
Gather information about users from materials, profile config, GitHub, and web search to inform portfolio content and design decisions.
| name | fonts |
| description | Reference for selecting distinctive typography. Includes font recommendations by vibe, category, archetype, and pairing guidelines for Next.js projects. |
Reference for selecting distinctive typography. Avoid overused fonts (Helvetica, Arial, Roboto, Open Sans, Montserrat, Playfair Display, Poppins, Lato).
All fonts below are free via Google Fonts and work with next/font/google.
| Vibe | Fonts |
|---|---|
| Editorial/Literary | Newsreader, Lora, EB Garamond, Cormorant, Spectral |
| Luxury/Fashion | Cormorant Garamond, Bodoni Moda, Libre Bodoni, Fraunces |
| Modern Clean | Space Grotesk, DM Sans, Plus Jakarta Sans, Manrope |
| Bold/Impact | Bricolage Grotesque, League Spartan, Syne, Outfit |
| Playful | Rubik, Nunito, Comfortaa, Quicksand |
| Technical/Future | Space Mono, JetBrains Mono, Fira Code, IBM Plex Mono |
| Understated | Mulish, Chivo, Proza Libre, Work Sans |
| Font | Use Case |
|---|---|
| Cormorant | High-contrast elegance, editorial headers, luxury feel |
| Cormorant Garamond | Sophisticated authority, refined editorial |
| Lora | Elegant body text, blog content, readable at small sizes |
| EB Garamond | Classic book typography, long-form reading |
| Newsreader | Magazine/editorial layouts, journalistic feel |
| Spectral | Balanced body text with character |
| Fraunces | Modern variable serif with personality, 9 weights |
| Bodoni Moda | Didone-style headlines, fashion/luxury |
| Libre Bodoni | Clean Bodoni alternative, display use |
| Libre Baskerville | Literary feel (Mrs Eaves alternative) |
| Young Serif | Contemporary headlines with warmth |
| Instrument Serif | Modern refined serif, editorial |
| Alegreya | Distinctive letterforms, sophisticated portfolios |
| BioRhyme | Slab serif for editorial layouts, 7 weights |
| Font | Use Case |
|---|---|
| Space Grotesk | Contemporary branding, geometric personality |
| DM Sans | Humanist design, Futura alternative, distinctive "G" |
| Plus Jakarta Sans | Modern UI, distinctive character |
| Manrope | Clean geometric sans, 7 weights |
| Outfit | Geometric humanist, modern portfolios |
| Bricolage Grotesque | Bold headlines, expressive with personality |
| Syne | Tactile uniqueness, creative portfolios |
| Chivo | Versatile workhorse, 9 weights |
| Work Sans | Screen-optimized, friendly professional |
| Mulish | Humanist-geometric hybrid, variable font |
| Epilogue | Geometric with warmth |
| Proza Libre | Understated sophistication, editorial |
| League Spartan | Condensed geometric, impactful headers |
| Inter | UI-focused, excellent legibility (use sparingly - becoming common) |
| Font | Use Case |
|---|---|
| Bricolage Grotesque | Expressive headlines, bold personality |
| Fraunces | Variable serif with dramatic weight range |
| Instrument Serif | Modern editorial headlines |
| Young Serif | Warm contemporary headers |
| Abril Fatface | Bold Didone-style display |
| Rubik Glitch | Experimental/tech aesthetic |
| Silkscreen | Retro pixel/terminal aesthetic |
| Aboreto | Distinctive display style |
| Red Rose | Expressive headlines |
| Font | Use Case |
|---|---|
| Space Mono | Developer portfolios, distinctive style |
| JetBrains Mono | Code display, excellent legibility |
| Fira Code | Programming with ligatures |
| IBM Plex Mono | Technical documentation, professional |
| Inconsolata | Classic code aesthetic |
| Source Code Pro | Clean, versatile monospace |
| Person | Direction |
|---|---|
| Writer/Editor | Newsreader, Lora, EB Garamond, Spectral |
| Designer | Space Grotesk, Bricolage Grotesque, Fraunces |
| Developer | Space Mono, JetBrains Mono, IBM Plex Mono |
| Strategist | Cormorant Garamond, Chivo, DM Sans |
| Artist | Syne, Rubik, Instrument Serif |
| Luxury/Fashion | Bodoni Moda, Cormorant, Libre Bodoni |
| Style | Display + Body |
|---|---|
| Editorial | Instrument Serif + DM Sans |
| Modern | Bricolage Grotesque + Space Grotesk |
| Literary | Cormorant + Spectral |
| Tech | Space Mono + Inter |
| Luxury | Bodoni Moda + Manrope |
| Creative | Fraunces + Work Sans |
| Minimal | Young Serif + Plus Jakarta Sans |
import { Space_Grotesk, Newsreader } from 'next/font/google';
const heading = Space_Grotesk({
subsets: ['latin'],
variable: '--font-heading'
});
const body = Newsreader({
subsets: ['latin'],
variable: '--font-body'
});