Emerald Sanctuary

Calm-but-quirky curves echo natural forms

Font: Bricolage Grotesque • Use: Logo & hero headlines

Confident Typography

Modern web typography that pops

Tech-meets-editorial aesthetic

Font: Clash Grotesk • Use: Section headings

This is large body text using Inter Variable. The font's optical sizing automatically adjusts for optimal readability at this size, while its neutral character lets emerald accents breathe.

This is regular body text that maintains excellent readability across all viewports. Inter's comprehensive character set and careful spacing make it perfect for long-form content and technical documentation.

Small body text remains crisp and readable even at reduced sizes, thanks to Inter's thoughtful design and variable font technology.

Font: Inter Variable • Use: Body text & navigation

Portfolio Statistics

Geist Mono is used for code snippets and stat blocks, providing a modern, clean monospace
      experience perfect for technical content.

Code Snippets • Stat Blocks • Technical Data

Font: Geist Mono • Use: Code snippets / stat blocks

Code Examples

Inline code like const sanctuary = 'emerald' integrates seamlessly with body text.

// Geist Mono for code blocks
function createSanctuary() {
  return {
    theme: 'emerald',
    typography: 'modern',
    feel: 'mystical'
  };
}

Font: Geist Mono • Use: Code snippets and technical content

"Design is not just what it looks like and feels like. Design is how it works."

Projects completed with botanical-inspired typography

Font: Fraunces Variable • Use: Pull quotes & special numerals

Complete Font Hierarchy

This section demonstrates font pairing

This paragraph uses the default body font (Inter Variable) and demonstrates how all fonts work together harmoniously. The code snippets use Geist Mono, while headings above use Clash Grotesk.

Blockquotes use the elegant Fraunces font to add sophistication and visual interest to quoted content.

This caption now uses Inter Variable as the body font, maintaining consistency with the hierarchy.

Responsive Typography

All fonts scale appropriately across different screen sizes, maintaining readability and visual hierarchy from mobile to desktop.

Mobile

Optimized scaling for touch devices

Tablet

Balanced proportions for medium screens

Desktop

Full typographic expression

Font Loading Debug

Bricolage Grotesque Test

Clash Grotesk Test

Inter Variable Test

Geist Mono Test

Fraunces Regular Test

Fraunces Bold Test

Fraunces Italic Test

Animation Settings