Display
Text
The system’s paragraph, on the second rung of the ink ladder.
Usage
When to reach for it
import { Text } from '@misoto22/design'Notes
A paragraph, or a run of text that wants the system's voice.
The step between Article and raw JSX. Article styles a whole reading column from element selectors and is the right answer for a post; this is for the single paragraph that is NOT in a column — a card's description, a dialog's explanation, the line under an empty state.
The default tone is body (--ink-2), not --ink. A page whose paragraphs are all full-strength ink has spent the top of the ladder on its body copy and has nothing left for the headings, which is the single most common way a monochrome page loses its hierarchy.
Anatomy
| Element | Description |
|---|---|
| Boxrequired | The element `as` names — a <p> unless told otherwise. It carries the size, the tone and margin: 0, so the spacing between blocks belongs to the surface rather than to the paragraph. |
| Type steprequired | size, one of four: xs, sm, base and lead. lead is --fs-item, the bottom rung of the heading ladder, and is the standfirst that carries a piece. |
| Ink steprequired | tone, one of three, because the ink ladder has three rungs: body is --ink-2, strong is --ink, muted is --ink-3-aa. |
Best practices
Do
- Leave tone alone for body copy. The default is --ink-2 on purpose: a page whose paragraphs are all full-strength ink has spent the top of the ladder on its body text and has nothing left for the headings.
- Use as="span" for a run inside a sentence. A <p> nested inside a <p> is not nesting — the HTML parser closes the outer one and you get two paragraphs and a broken layout.
- Reach for size="lead" for the standfirst under a title, and stop there. It is --fs-item, the same step an in-card title uses; anything larger is a heading that has not admitted it.
Don’t
- Do not set spacing on it. Every Text is margin: 0, so a stack of them inside a plain <div> has no rhythm by design — put them in an Article or give the container the gap, or every surface ends up with its own idea of what a paragraph gap is.
- tone="muted" is --ink-3-aa, never --ink-3. The two look identical on paper and are not the same token: --ink-3 is a translucent tint that takes on whatever is under it, so it clears AA on the page ground and quietly fails on a card or a code plate.
- Do not use it as a heading with a bigger size. The element is what a screen reader navigates by, and a <p> at --fs-item is invisible to a heading list.
Examples
sizes and tones
Four steps of type against three rungs of ink. The default is base on body, which is --ink-2 rather than --ink on purpose: a page whose paragraphs are all full-strength ink has spent the top of the ladder on its body copy and has nothing left for the headings. Every Text has margin: 0, so the gap between these comes from the container, not from the paragraph.
A monochrome system for software and writing.
Body copy at the base step, on the second rung of the ink ladder. Use strong for a run that has to carry, and nothing above lead.
Updated just now — the muted rung is --ink-3-aa, which clears AA on any ground in the system.
a run inside a sentence
as changes the element and nothing else. Inside a sentence that has to be span: a p nested in a p is not nesting — the HTML parser closes the outer one and leaves two paragraphs and a broken layout. Inside a list someone else opened it is li, so the markup says what the content is while the type stays exactly where the size and tone put it.
The release went out at 09:14. Twelve deploys since the rewrite, and no rollbacks.
- Tokens rebuilt from the CSS source
- Every example carries the sentence that explains it
- Chinese copy still owed for the newest five
a standfirst under a title
The one place lead belongs: the standfirst that carries a piece, directly under its title. It is --fs-item, the bottom rung of the heading ladder, and the ladder is where it stops — a paragraph larger than a record title is a heading that has not admitted it, and a p at that size is invisible to the heading list a screen reader navigates by. The gaps here come from the column, because every Text is margin: 0.
The White Reset
A monochrome system for software and writing, published as one package and one stylesheet.
Structure is carried by weight, rules and space rather than by colour, which leaves the two status hues free to mean something when they appear.
Updated this morning
Types
export type TextSize = 'xs' | 'sm' | 'base' | 'lead'
export type TextTone = 'body' | 'strong' | 'muted'
export type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'Accessibility
- as changes the element and nothing else, so the markup can say what the content is without the look changing under it.
- Every tone is an AA-safe rung; the muted step is --ink-3-aa rather than the translucent --ink-3.