Skip to content

Typography

Acopl UI uses two font families loaded from Google Fonts:

TokenValueUsage
--ac-font-sans'Inter', system-ui, sans-serifBody text, UI elements
--ac-font-display'Space Grotesk', 'Inter', sans-serifHeadings, titles, buttons
--ac-font-monoui-monospace, 'Courier New', monospaceCode blocks
<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">
ClassSizeLine height
.ac-text-xs0.75rem (12px)1rem
.ac-text-sm0.875rem (14px)1.25rem
.ac-text-base1rem (16px)1.5rem
.ac-text-lg1.125rem (18px)1.75rem
.ac-text-xl1.25rem (20px)1.75rem
.ac-text-2xl1.5rem (24px)2rem
.ac-text-3xl1.875rem (30px)2.25rem
.ac-text-4xl2.25rem (36px)2.5rem
.ac-text-5xl3rem (48px)1
.ac-text-6xl3.75rem (60px)1
.ac-text-7xl4.5rem (72px)1

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>
<!-- 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>