> ## 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.

# Clean Collection

> Minimal and modern sans-serif pairings for SaaS dashboards, web applications, and contemporary digital products.

# Clean Collection

The Clean collection features minimal, neutral, and modern sans-serif pairings perfect for SaaS dashboards, developer tools, and contemporary web applications. These combinations prioritize clarity, readability, and a Vercel-style aesthetic.

## Style Characteristics

Clean pairings are characterized by:

* **Minimal**: Stripped-down aesthetics with no unnecessary ornamentation
* **Neutral**: Unbiased, systematic typography that gets out of the way
* **Modern**: Contemporary sans-serif designs optimized for screens
* **Vercel-style**: Influenced by modern design systems and tech aesthetics

## Pairings in this Collection

<CardGroup cols={2}>
  <Card title="Minimal" icon="square">
    Geist + Geist + Geist Mono
  </Card>

  <Card title="Modern Clean" icon="grid">
    Inter + Inter + Geist Mono
  </Card>

  <Card title="SaaS" icon="layer-group">
    Urbanist + Libre Franklin + JetBrains Mono
  </Card>

  <Card title="Dashboard" icon="gauge">
    Manrope + DM Sans + Fira Code
  </Card>

  <Card title="Swiss" icon="mountain">
    Inter Tight + Open Sans + IBM Plex Mono
  </Card>
</CardGroup>

## Featured Pairing: Minimal

The ultimate minimal pairing uses Geist for everything — a single font family for the entire design system, Vercel-style.

### Installation

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

### Font Stack

* **Heading**: Geist — Ultra-minimal modern sans-serif
* **Body**: Geist — Same family for cohesive design
* **Mono**: Geist Mono — Matching monospace companion

### Typography Specs

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

<Accordion title="Body Styles">
  * **Body/Paragraph**: Geist, line-height 1.6
  * **Code**: Geist Mono family
</Accordion>

## Use Cases

<CardGroup cols={3}>
  <Card title="SaaS Products" icon="window">
    Clean, minimal interfaces for web applications
  </Card>

  <Card title="Developer Tools" icon="code">
    Technical products with Vercel-style aesthetics
  </Card>

  <Card title="Dashboards" icon="chart-line">
    Data visualization and analytics interfaces
  </Card>

  <Card title="Admin Panels" icon="sliders">
    Backend interfaces and control panels
  </Card>

  <Card title="Web Apps" icon="browser">
    Modern single-page applications
  </Card>

  <Card title="Documentation" icon="book">
    Technical docs with clean, readable typography
  </Card>
</CardGroup>

## Quick Comparison

| Pairing      | Heading Font | Body Font      | Style                      |
| ------------ | ------------ | -------------- | -------------------------- |
| Minimal      | Geist        | Geist          | Single-family Vercel-style |
| Modern Clean | Inter        | Inter          | Neutral SaaS aesthetic     |
| SaaS         | Urbanist     | Libre Franklin | Product-focused pairing    |
| Dashboard    | Manrope      | DM Sans        | Data-driven clarity        |
| Swiss        | Inter Tight  | Open Sans      | Neo-grotesque precision    |

## Installation Commands

```bash theme={null}
# Install any pairing from this collection
npx shadcn@latest add https://www.fonttrio.xyz/r/minimal.json
npx shadcn@latest add https://www.fonttrio.xyz/r/modern-clean.json
npx shadcn@latest add https://www.fonttrio.xyz/r/saas.json
npx shadcn@latest add https://www.fonttrio.xyz/r/dashboard.json
npx shadcn@latest add https://www.fonttrio.xyz/r/swiss.json
```

<Tip>
  Clean pairings work best with ample whitespace, generous padding, and subtle color palettes. They're designed to enhance content, not compete with it.
</Tip>

## Typography Best Practices

<AccordionGroup>
  <Accordion title="Line Height">
    Clean pairings use tighter line-height (1.6) compared to editorial styles for more compact, scannable layouts.
  </Accordion>

  <Accordion title="Letter Spacing">
    Negative letter-spacing (-0.025em to -0.03em) in headings creates tighter, more modern appearance.
  </Accordion>

  <Accordion title="Font Weights">
    Use weight variation (700 for H1, 600 for H2, 500 for H3) to create hierarchy without dramatic size changes.
  </Accordion>
</AccordionGroup>