Primitives

01

Typography

The font map. Picks size, weight, tracking and line-height from the token scale, and renders a sensible element per variant (h1 for h1, p for body, code for mono).

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overline const tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overline const tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Display

Heading 1

Heading 3

Body copy — the default variant.

Muted body copy for secondary information.

Overlineconst tokens = 'shared'

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-2);">
  <h1 class="aura-text aura-text--display">Display</h1>
  <h1 class="aura-text aura-text--h1">Heading 1</h1>
  <h3 class="aura-text aura-text--h3">Heading 3</h3>
  <p class="aura-text aura-text--body">Body copy — the default variant.</p>
  <p class="aura-text aura-text--body aura-text--muted">Muted body copy for secondary information.</p>
  <span class="aura-text aura-text--overline aura-text--faint">Overline</span>
  <code class="aura-text aura-text--mono">const tokens = 'shared'</code>
</div>

Demo.tsx

import { Stack, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Stack gap={2}>
      <Typography variant="display">Display</Typography>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="h3">Heading 3</Typography>
      <Typography variant="body">Body copy — the default variant.</Typography>
      <Typography variant="body" tone="muted">
        Muted body copy for secondary information.
      </Typography>
      <Typography variant="overline" tone="faint">
        Overline
      </Typography>
      <Typography variant="mono">const tokens = 'shared'</Typography>
    </Stack>
  );
}

Demo.vue

<script setup lang="ts">
import { Typography } from '@ilomee/aura-vue';
</script>

<template>
  <Typography variant="h2">Aura</Typography>
  <Typography tone="muted" :lines="2">Clamped to two lines…</Typography>
</template>

Demo.svelte

<script lang="ts">
  import { Typography } from '@ilomee/aura-svelte';
</script>

<Typography variant="h2">Aura</Typography>
<Typography tone="muted" lines={2}>Clamped to two lines…</Typography>

Used as [auraText] — a directive you put on your own element.

demo.component.ts

import { AuraText } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraText],
  template: `
    <h2 auraText variant="h2">Aura</h2>
    <p auraText tone="muted">Muted body copy.</p>
    <p auraText tone="muted" [lines]="2">Clamped to two lines…</p>
  `,
})
export class DemoComponent {}

A directive — you choose the element, so there is no as input.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
variant	`'display' \| 'h1' \| 'h2' \| 'h3' \| 'bodyL' \| 'body' \| 'caption' \| 'overline' \| 'mono'`	`'body'`
as	`ElementType`	—	Override the element chosen for the variant.
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`	Single-line ellipsis.
lines	`number`	—	Clamp to N lines.

Name	Type	Default	Notes
variant	`TypeVariant`	`'body'`
as	`string`	—
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—
defaultslot	`Slot`	—	Text content.

Name	Type	Default	Notes
variant	`TypeVariant`	`'body'`
as	`string`	—
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—
loading	`boolean`	`false`	Work is in flight: the button goes `disabled` and `aria-busy`, and grows a spinner before its label. Beside the words rather than replacing them, so the button does not change width at the moment it stops being clickable.
childrenslot	`Snippet`	—

Name	Type	Default	Notes
variant	`TypeVariant`	`'body'`
tone	`'default' \| 'muted' \| 'faint'`	`'default'`
align	`'start' \| 'center' \| 'end'`	—
truncate	`boolean`	`false`
lines	`number`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-text	base	Required. A modifier does nothing without it.
.aura-text--<variant>	modifier
.aura-text--muted	modifier
.aura-text--truncate	modifier
.aura-text--clamp	modifier

Tokens and rules

components.css

scale: display · h1 · h2 · h3 · bodyL · body · caption · overline · mono
font: var(--font) · var(--mono)
tones: --muted · --faint
source: tokens/typography.json