Typography

Font families

Acopl UI uses two font families loaded from Google Fonts:

Token	Value	Usage
`--ac-font-sans`	`'Inter', system-ui, sans-serif`	Body text, UI elements
`--ac-font-display`	`'Space Grotesk', 'Inter', sans-serif`	Headings, titles, buttons
`--ac-font-mono`	`ui-monospace, 'Courier New', monospace`	Code blocks

Loading fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">

Font size scale

Class	Size	Line height
`.ac-text-xs`	`0.75rem` (12px)	`1rem`
`.ac-text-sm`	`0.875rem` (14px)	`1.25rem`
`.ac-text-base`	`1rem` (16px)	`1.5rem`
`.ac-text-lg`	`1.125rem` (18px)	`1.75rem`
`.ac-text-xl`	`1.25rem` (20px)	`1.75rem`
`.ac-text-2xl`	`1.5rem` (24px)	`2rem`
`.ac-text-3xl`	`1.875rem` (30px)	`2.25rem`
`.ac-text-4xl`	`2.25rem` (36px)	`2.5rem`
`.ac-text-5xl`	`3rem` (48px)	`1`
`.ac-text-6xl`	`3.75rem` (60px)	`1`
`.ac-text-7xl`	`4.5rem` (72px)	`1`

Heading defaults

h1-h6 use var(--ac-font-display) and var(--ac-text) by default:

<h1>Hacé que tu capital traccione.</h1>
<h2>Ingeniería Financiera Simple</h2>
<p>Texto de cuerpo con color secundario.</p>
<small>Texto auxiliar</small>

Utility classes

<!-- Font families -->
<span class="ac-font-display">Space Grotesk heading</span>
<code class="ac-font-mono">monospace code</code>

<!-- Weights -->
<p class="ac-font-light">Light (300)</p>
<p class="ac-font-medium">Medium (500)</p>
<p class="ac-font-bold">Bold (700)</p>

<!-- Colors -->
<p class="ac-text-muted">Muted text</p>
<p class="ac-text-primary">Primary/blue text</p>
<p class="ac-text-action">Orange text</p>
<p class="ac-text-success">Green text</p>
<p class="ac-text-danger">Red text</p>

<!-- Special -->
<h1 class="ac-text-gradient">Gradient heading</h1>