Typography
The typography utilities follow the design system at https://loopos-ux-playground.vercel.app/foundations/typography. Each utility is defined in app/assets/stylesheets/base/typography-utilities.css as a native Tailwind v4 @utility block and resolves the font family via var(--lui-theme-primary-font, var(--font-sans)) so marketplace customization through ThemeContext keeps working.
Font families
--font-sans → IBM Plex Sans (product UI, body)--font-heading → Space Grotesk (expressive headings)--font-mono → IBM Plex Mono (code, data)
Body copy — IBM Plex Sans
| Class |
Size |
Weight |
Line height |
.copy-16 |
16px |
400 |
20px |
.copy-16-medium |
16px |
500 |
20px |
.copy-14 |
14px |
400 |
18px |
.copy-14-medium |
14px |
500 |
18px |
.copy-12 |
12px |
400 |
16px |
.copy-12-medium |
12px |
500 |
16px |
.copy-10 |
10px |
500 |
13px |
Headings — IBM Plex Sans
| Class |
Size |
Weight |
Line height |
.heading-30 |
30px |
500 |
40px |
.heading-24 |
24px |
500 |
32px |
.heading-20 |
20px |
500 |
24px |
Headings — Space Grotesk
| Class |
Size |
Weight |
Line height |
Letter spacing |
.heading-30-grotesk |
30px |
500 |
40px |
-0.02em |
.heading-24-grotesk |
24px |
500 |
32px |
-0.02em |
.heading-20-grotesk |
20px |
500 |
24px |
-0.01em |
Mono — IBM Plex Mono
| Class |
Size |
Weight |
Line height |
Notes |
.copy-14-mono |
14px |
500 |
18px |
|
.copy-12-mono |
12px |
500 |
16px |
Inline code |
.copy-12-mono-semibold |
12px |
600 |
16px |
|
.copy-10-mono |
10px |
500 |
13px |
text-transform: uppercase |
| Class |
Size |
Weight |
Line height |
.button-14 |
14px |
500 |
20px |
.button-12 |
12px |
500 |
16px |
Usage
<p class="copy-14">Body text.</p>
<p class="copy-14-medium">Emphasised body text.</p>
<h2 class="heading-24">Section heading.</h2>
<h1 class="heading-30-grotesk">Marketing-style heading.</h1>
<code class="copy-12-mono">inline code</code>