> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/kapishdima/fonttrio/llms.txt
> Use this file to discover all available pages before exploring further.

# Creative Collection

> Distinctive geometric pairings with curated aesthetics for design studios, agencies, and creative portfolios.

# Creative Collection

The Creative collection features distinctive, geometric pairings designed for design studios, creative agencies, and portfolio sites. These combinations balance geometric precision with artistic flair, creating memorable and curated typographic experiences.

## Style Characteristics

Creative pairings are characterized by:

* **Creative & Distinctive**: Typefaces with unique personality and character
* **Geometric**: Circles, triangles, and mathematical proportions
* **Curated**: Thoughtfully selected combinations that feel designed
* **Nordic**: Scandinavian-inspired minimalism with character

## Pairings in this Collection

<CardGroup cols={2}>
  <Card title="Creative" icon="palette">
    Space Grotesk + DM Sans + Fira Code
  </Card>

  <Card title="Studio" icon="pen-nib">
    Bricolage Grotesque + Figtree + Fira Code
  </Card>

  <Card title="Architect" icon="compass-drafting">
    Outfit + Libre Baskerville + IBM Plex Mono
  </Card>
</CardGroup>

## Featured Pairing: Creative

Playful geometric pairing with Space Grotesk's distinctive letterforms commanding attention in headlines, balanced by DM Sans's friendly body text.

### Installation

```bash theme={null}
npx shadcn@latest add https://www.fonttrio.xyz/r/creative.json
```

### Font Stack

* **Heading**: Space Grotesk — Geometric grotesk with character
* **Body**: DM Sans — Friendly, readable sans-serif
* **Mono**: Fira Code — Developer-focused monospace

### Typography Specs

<Accordion title="Heading Styles">
  * **H1**: 2.5rem, line-height 1.15, letter-spacing -0.03em, weight 700
  * **H2**: 2rem, line-height 1.2, letter-spacing -0.02em, weight 600
  * **H3**: 1.5rem, line-height 1.3, letter-spacing -0.015em, weight 600
</Accordion>

<Accordion title="Body Styles">
  * **Body/Paragraph**: DM Sans, line-height 1.6
  * **Code**: Fira Code with programming ligatures
</Accordion>

### Design Philosophy

Space Grotesk brings geometric playfulness without sacrificing readability. Its distinctive letterforms (especially the 'a' and 'g') create memorable headings, while DM Sans keeps body text approachable and professional.

## Use Cases

<CardGroup cols={3}>
  <Card title="Design Studios" icon="pen-nib">
    Creative agency sites and design portfolios
  </Card>

  <Card title="Startups" icon="rocket">
    Landing pages with personality and innovation
  </Card>

  <Card title="Portfolios" icon="briefcase">
    Personal branding for creatives and makers
  </Card>

  <Card title="Agencies" icon="users">
    Marketing and branding agency websites
  </Card>

  <Card title="Architecture" icon="building">
    Architectural firms and design-build companies
  </Card>

  <Card title="Innovation" icon="lightbulb">
    Product design and innovation consultancies
  </Card>
</CardGroup>

## Quick Comparison

| Pairing   | Heading Font        | Body Font         | Character                 |
| --------- | ------------------- | ----------------- | ------------------------- |
| Creative  | Space Grotesk       | DM Sans           | Playful geometric startup |
| Studio    | Bricolage Grotesque | Figtree           | Distinctive ink traps     |
| Architect | Outfit              | Libre Baskerville | Structured precision      |

## Typography Details

<AccordionGroup>
  <Accordion title="Studio Pairing">
    **Bricolage Grotesque + Figtree + Fira Code**

    Design-forward pairing with distinctive ink traps and angular terminals that command attention, softened by Figtree's friendly geometric body text.

    **Personality**: Creative, distinctive, design studio aesthetic

    **Use Cases**: Design studios, creative agencies, experimental portfolios

    ```bash theme={null}
    npx shadcn@latest add https://www.fonttrio.xyz/r/studio.json
    ```
  </Accordion>

  <Accordion title="Architect Pairing">
    **Outfit + Libre Baskerville + IBM Plex Mono**

    Structured meets refined. Outfit's geometric precision in headings contrasts beautifully with Libre Baskerville's warm readability — like blueprints meeting handwritten notes.

    **Personality**: Structured, professional, architectural precision

    **Use Cases**: Architecture firms, portfolio sites, professional services

    ```bash theme={null}
    npx shadcn@latest add https://www.fonttrio.xyz/r/architect.json
    ```
  </Accordion>
</AccordionGroup>

## Installation Commands

```bash theme={null}
# Install any pairing from this collection
npx shadcn@latest add https://www.fonttrio.xyz/r/creative.json
npx shadcn@latest add https://www.fonttrio.xyz/r/studio.json
npx shadcn@latest add https://www.fonttrio.xyz/r/architect.json
```

## Design Characteristics

### Geometric Foundations

Creative pairings are built on geometric principles — circles, squares, and triangles form the basis of letterforms. This mathematical foundation creates visual harmony while allowing for distinctive character.

### Distinctive Features

<CardGroup cols={2}>
  <Card title="Space Grotesk" icon="shapes">
    Distinctive 'a' and 'g', geometric construction with humanist warmth
  </Card>

  <Card title="Bricolage Grotesque" icon="eye">
    Ink traps, angular terminals, architectural precision
  </Card>

  <Card title="Outfit" icon="ruler-combined">
    Perfect circles, geometric clarity, optical adjustments
  </Card>

  <Card title="DM Sans" icon="hand-point-right">
    Low contrast, friendly geometry, compact efficiency
  </Card>
</CardGroup>

## Typography Best Practices

### Scale and Hierarchy

Creative pairings benefit from dramatic scale differences between headings and body text:

```css theme={null}
/* Recommended scale */
h1 { font-size: 2.5rem; }  /* 40px */
h2 { font-size: 2rem; }    /* 32px */
h3 { font-size: 1.5rem; }  /* 24px */
p  { font-size: 1rem; }     /* 16px */
```

### Letter Spacing

Geometric typefaces often benefit from slight negative tracking in headings to create optical tightness:

* **H1**: -0.03em
* **H2**: -0.02em
* **H3**: -0.015em
* **Body**: default (0em)

### Whitespace

Creative pairings need room to breathe. Use generous margins and padding to let the distinctive letterforms shine.

<Tip>
  Creative pairings work best with bold color choices and strong visual identity. Don't be afraid to use color, gradients, or patterns to enhance the geometric character.
</Tip>

## When to Use Creative Pairings

✅ **Do use when:**

* Building a portfolio or personal brand
* Creating a design studio website
* Launching an innovative product
* Showcasing creative work
* Building a startup landing page

❌ **Avoid when:**

* Building enterprise software
* Creating government or civic sites
* Designing financial applications
* Long-form reading (novels, articles)
* Accessibility is the primary concern

<Note>
  While creative pairings have strong personality, they maintain professional readability. They're distinctive without sacrificing usability.
</Note>