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--4The quick brown fox.zui-text--3The quick brown fox.zui-text--2The quick brown fox.zui-text--1The quick brown fox.zui-text-0The quick brown fox.zui-text-baseThe quick brown fox.zui-text-1The quick brown fox.zui-text-2The quick brown fox.zui-text-3The quick brown fox.zui-text-4The quick brown fox.zui-text-5The quick brown fox.zui-text-6The quick brown fox<p class="zui-text-2">Large UI text</p>
<p class="zui-text-0">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="0">Base size</Text>
<Text size="-1">Small label</Text>---
import { Text } from '@mrmartineau/zui/astro'
---
<Text size="2">Large UI text</Text>
<Text size="0">Base size</Text>
<Text size="-1">Small label</Text>import { Text } from '@mrmartineau/zui/solid'
<Text size="2">Large UI text</Text>
<Text size="0">Base size</Text>
<Text size="-1">Small label</Text><template>
<Text size="2">Large UI text</Text>
<Text size="0">Base size</Text>
<Text size="-1">Small label</Text>
</template>
<script setup>
import { Text } from '@mrmartineau/zui/vue'
</script>Text Colour
Reduce text prominence with muted and faint utilities.
.zui-color-mutedMuted text for secondary information.zui-color-faintFaint 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>import { Link } from '@mrmartineau/zui/solid'
<Link href="/about">About us</Link><template>
<Link href="/about">About us</Link>
</template>
<script setup>
import { Link } from '@mrmartineau/zui/vue'
</script>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>import { Code } from '@mrmartineau/zui/solid'
<Code>var(--space-md)</Code><template>
<Code>var(--space-md)</Code>
</template>
<script setup>
import { Code } from '@mrmartineau/zui/vue'
</script>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>import { Pre } from '@mrmartineau/zui/solid'
<Pre>
<code>
const greeting = "Hello, world!";
console.log(greeting);
</code>
</Pre><template>
<Pre>
<code>
const greeting = "Hello, world!";
console.log(greeting);
</code>
</Pre>
</template>
<script setup>
import { Pre } from '@mrmartineau/zui/vue'
</script>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>