Skip to main content
xtyle

Text
Info:Content
37

A body-text primitive: paragraph or inline span across four sizes, four weights, three leadings, and four tones.
paragraph body text copy prose span typography

Live demo

live · @xtyle/astro

Text

Four sizes

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

lg

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

body

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

sm

A theme is a full invocation of an algorithm — a finished, shareable design resting on a durable engine.

xs

Weight and tone

normal

medium

semibold

bold

default tone

muted tone

subtle tone

accent tone

monospaced

The full color roster

accent

neutral

danger

success

warn

info

green

purple

pink

Any tone paints the copy in its on-surface ink, derived to stay legible against the page.

Leading, set on running prose

tight

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

snug

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

loose

The open register is not a fixed schema. Authors declare new tokens and rewire any derivation; the only hard contract is a coverage check between what components consume and what a module produces.

Inline spans in flow

Render emphasis , a muted aside , or a token-name right inside a paragraph — same primitive, different element.

Text is the primitive for running copy. It renders a block <p> by default or an inline <span> via the as prop, then tunes appearance along four independent axes: size (xs, sm, body, lg), weight (normal, medium, semibold, bold), leading (tight, snug, loose), and tone.

A mono flag swaps the family to the monospace stack for inline code and tabular figures. Every axis maps to a design token, so a paragraph picks up the active theme's type scale and ink ladder without any local color: the default/muted/subtle emphasis tones read as --fg-0/--fg-2/--fg-3, and the full color roster (every semantic role, accent variant, or named hue) paints the copy in that tone's on-surface ink, derived to stay legible against the page.

When to use

How this component composes with the rest of the set.

Pair with Heading for titles; Text carries the running copy beneath them.
Use mono for inline code spans; for code blocks reach for a dedicated Code component once it lands.
Compose tone="subtle" with size="xs" for captions and metadata under cards and figures.
A colored tone renders in its on-surface --{tone}-vivid ink by contract. To pin text to a tone's base shade instead, style ::part(text) from the consumer side: xtyle-text::part(text) { color: var(--accent) }. A per-instance custom property set on the host does not reach the inner element's own token register, so ::part is the reliable seam for a one-off color.

Props

6 props, straight from the manifest.

PropTypeDefaultBindingsDescription
as TextAs
p span
p
html svelte astro
The element to render: a block paragraph or an inline span.
size TextSize
xs sm body lg
body
html svelte astro
Type scale step. `body` is the default and emits no class.
weight TextWeight
normal medium semibold bold
normal
html svelte astro
Font weight. `normal` is the default and emits no class.
leading TextLeading
tight snug loose
snug
html svelte astro
Line height. `snug` is the default (maps to `--leading-normal`) and emits no class.
tone TextTone
default muted subtle accent neutral danger success warn info accent-2 accent-3 accent-4 red orange yellow green blue purple brown pink cyan gray white black
default
html svelte astro
Ink: the `default`/`muted`/`subtle` emphasis ramp off the foreground, or any tone in the full roster (semantic role, accent variant, or named hue) for colored copy in that tone's on-surface ink. `default` emits no class.
mono boolean false
html svelte astro
Switches the font family to the monospace stack for inline code and tabular figures.

Appearance

Variants

default

 .xtyle-text

Primary ink at full strength; the standard reading tone.

muted

 .xtyle-text--muted

A step down the ink ladder for secondary copy and asides.

subtle

 .xtyle-text--subtle

The quietest ink: captions, fine print, and metadata.

accent

 .xtyle-text--accent

Accent-colored ink for a highlighted word, link-like emphasis, or a figure; the first stop of the full tone roster, which paints any run in a tone's on-surface --{tone}-vivid ink.

mono

 .xtyle-text--mono

Monospace family for inline code and tabular figures; composes with any tone or size.

Sizes

xs
.xtyle-text--xs

Smallest: fine print.

sm
.xtyle-text--sm

Small: secondary copy.

body

 default
.xtyle-text

Default reading size.

lg
.xtyle-text--lg

Large: lead paragraphs.

Anatomy

The named parts that make up the component, with their selectors.

text

 .xtyle-text

The paragraph or span element carrying the size, weight, leading, tone, and mono classes; exposed as ::part(text) for a consumer-side color override.
--font-sans --text-body --weight-normal --leading-normal --fg-0

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 37/37 consumed tokens produced default register: 299 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent-2-vivid --accent-3-vivid --accent-4-vivid --accent-vivid --black-vivid --blue-vivid --brown-vivid --cyan-vivid --danger-vivid --fg-0 --fg-2 --fg-3 --font-mono --font-sans --gray-vivid --green-vivid --info-vivid --leading-loose --leading-normal --leading-tight --neutral-vivid --orange-vivid --pink-vivid --purple-vivid --red-vivid --success-vivid --text-body --text-lg --text-sm --text-xs --warn-vivid --weight-bold --weight-medium --weight-normal --weight-semibold --white-vivid --yellow-vivid

Slots
default
html svelte astro

The text content.

Accessibility
Renders a native <p> or <span>, so the semantics carry meaning; no ARIA needed.
Tone is purely visual; the ink ladder (default / muted / subtle) is derived to stay legible against the theme's surfaces, never below contrast thresholds.
mono changes only the font family, not the accessible text, so screen readers announce the content unchanged.
Choose as="span" only for genuinely inline runs; block copy should stay a <p> so structure is conveyed.

Code

Sizes, tones, and mono

The four axes are independent: size, weight, leading, and tone mix freely, and mono layers on top.

 
<xtyle-text>The quiet default: body copy at comfortable measure.</xtyle-text>

<xtyle-text size="lg" weight="semibold">A lead paragraph that sets up the section.</xtyle-text>

<xtyle-text tone="muted" size="sm">A muted aside, dialed down a notch.</xtyle-text>

<xtyle-text as="span" tone="subtle" size="xs">inline fine print</xtyle-text>

<xtyle-text mono size="sm">npm install @xtyle/core</xtyle-text>
 
<script lang="ts">
	import { Text } from "@xtyle/svelte";
</script>

<Text>The quiet default: body copy at comfortable measure.</Text>

<Text size="lg" weight="semibold">A lead paragraph that sets up the section.</Text>

<Text tone="muted" size="sm">A muted aside, dialed down a notch.</Text>

<Text as="span" tone="subtle" size="xs">inline fine print</Text>

<Text mono size="sm">npm install @xtyle/core</Text>
 
---
import { Text } from "@xtyle/astro";
---

<Text>The quiet default: body copy at comfortable measure.</Text>

<Text size="lg" weight="semibold">A lead paragraph that sets up the section.</Text>

<Text tone="muted" size="sm">A muted aside, dialed down a notch.</Text>

<Text as="span" tone="subtle" size="xs">inline fine print</Text>

<Text mono size="sm">npm install @xtyle/core</Text>