UI Typography
Utility classes for text sizing, colour, links, and code — designed for UI rather than long-form prose.
Text Size
Map directly to the fluid type scale tokens. All classes reset line-height to tight and margin to 0, making them ideal for UI labels and headings.
.zui-text--4 The quick brown fox .zui-text--3 The quick brown fox .zui-text--2 The quick brown fox .zui-text--1 The quick brown fox .zui-text-base The quick brown fox .zui-text-1 The quick brown fox .zui-text-2 The quick brown fox .zui-text-3 The quick brown fox .zui-text-4 The quick brown fox .zui-text-5 The quick brown fox .zui-text-6 The quick brown fox <p class="zui-text-2">Large UI text</p>
<p class="zui-text-base">Base size</p>
<span class="zui-text--1">Small label</span>import { Text } from '@mrmartineau/zui/react'
<Text size="2">Large UI text</Text>
<Text size="base">Base size</Text>
<Text size="-1">Small label</Text>---
import { Text } from '@mrmartineau/zui/astro'
---
<Text size="2">Large UI text</Text>
<Text size="base">Base size</Text>
<Text size="-1">Small label</Text>Text Colour
Reduce text prominence with muted and faint utilities.
.zui-color-muted Muted text for secondary information .zui-color-faint Faint text for tertiary or disabled content <p>Primary text</p>
<p class="zui-color-muted">Secondary text</p>
<p class="zui-color-faint">Tertiary text</p>Link
Style any anchor as an accessible, accent-coloured link with underline and hover transition.
<a href="/about" class="zui-link">About us</a>import { Link } from '@mrmartineau/zui/react'
<Link href="/about">About us</Link>---
import { Link } from '@mrmartineau/zui/astro'
---
<Link href="/about">About us</Link>Custom properties
.zui-link {
--link-color: var(--accent-11);
--link-color-decoration: var(--accent-7);
--link-color-decoration-hover: var(--accent-8);
}Code
Inline code and preformatted blocks with monospace font, background, and rounded corners.
Inline code
Use var(--space-md) for medium spacing.
<code class="zui-code">var(--space-md)</code>import { Code } from '@mrmartineau/zui/react'
<Code>var(--space-md)</Code>---
import { Code } from '@mrmartineau/zui/astro'
---
<Code>var(--space-md)</Code>Code block
const greeting = "Hello, world!"
console.log(greeting)<pre class="zui-pre">
<code>
const greeting = "Hello, world!";
console.log(greeting);
</code>
</pre>import { Pre } from '@mrmartineau/zui/react'
<Pre>
<code>
const greeting = "Hello, world!";
console.log(greeting);
</code>
</Pre>---
import { Pre } from '@mrmartineau/zui/astro'
---
<Pre>
<code>
const greeting = "Hello, world!";
console.log(greeting);
</code>
</Pre>Custom properties
.zui-pre,
.zui-code {
--prose-code-color: oklch(from var(--color-text) calc(l + 0.1) c h);
--prose-code-bg-color: oklch(from var(--color-background) calc(l + 0.1) c h);
}Surface
A subtle background for section alternation.
Content on a surface background
<section class="surface">
Alternating section background
</section>