Text
Inline text with semantic type roles, accessible muted color, and optional tabular figures.@gemologic/sheen · typographyPlayground
Updated recently
<Text tone="muted" size="caption" numeric={false} size="ui" tone="default">Updated recently</Text>Variant matrix
Text example
Updated recently
size: caption
Updated recently
size: ui-sm
Updated recently
size: ui
Updated recently
size: body
Updated recently
tone: default
Updated recently
tone: muted
Updated recently
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Typography.tsx- Tokens
--sheen-font-sans--sheen-font-mono--sheen-color-fg--sheen-color-fg-muted
Accessibility
Role: inline textKeyboard: No component-owned keysDo
- Use visible text as well as color to communicate meaning.
Do not
- Do not use low-contrast subtle tokens for meaningful text.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
size | "caption" | "ui-sm" | "ui" | "body" | ui | Semantic type role, not an arbitrary font size. |
tone | "default" | "muted" | default | Primary or AA-gated muted foreground. |
numeric | boolean | false | Enable tabular figures for aligned numeric content. |