🟢Text
Status: Developed DoD Level: Production
Overview:
The Text component is the foundational typography element used to render headings, body copy, labels, and supporting text throughout layouts. It provides consistent typography scaling, semantic tagging, and token-driven color styling to ensure accessibility, hierarchy, and visual coherence across the system.
Usage Guidelines:
Use the Text component whenever static or dynamic text is required in layouts, content blocks, cards, forms, or composite components.
Best practices:
Use semantic tags to define meaning and structure, not just visual size.
Select size based on hierarchy priority, not aesthetics alone.
Apply style and sub-style tokens for branding, emphasis, or alert messaging instead of manual color overrides.
When embedding Text inside larger components (Buttons, Cards, Modals, etc.), detach the instance and expose the text property for internal control.
Always verify AA contrast compliance before developer handoff.
Avoid:
Using Text for icon-only or decorative glyph usage.
Hard-setting colors outside the variable system.
Using size tokens to simulate semantic meaning (ex: using 4xl instead of setting header tags).
Component Properties:
type (variant):
Options: primary, secondary, wireframe Purpose: Controls baseline typography role and visual weight. Usage:
primary — Core content text and main headings.
secondary — Supporting or secondary emphasis text.
wireframe — Low-fidelity layouts and early-stage prototyping. Context: Type influences default opacity, contrast tuning, and spacing behavior.
size (variant):
Options: 7xl, 6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, base, sm, xs, 2xs, 3xs Purpose: Controls font size and line height scale. Usage:
Larger values are intended for page titles and hero headers.
Base–sm for body and UI content.
xs–3xs for metadata, helper text, and captions. Context: Size should reflect layout hierarchy and semantic role, not visual styling preferences.
style (variant):
Options: grey, cta, brand, alert Purpose: Applies high-level color intent. Usage:
grey — Neutral UI text and default content.
cta — Action-oriented emphasis text.
brand — Brand-aligned messaging and highlights.
alert — Error, warning, and system feedback messaging. Context: Style tokens map directly to accessible content color families.
sub-style (variant):
Options: eclipse, error, nebula, uranus Purpose: Refines color tone within a style group. Usage:
Used for brand themes, error states, and contextual color differentiation. Context: Sub-styles inherit accessibility tuning from parent style tokens.
text (string):
Purpose: Controls displayed text content. Usage:
Editable when used directly in layouts.
Should be exposed when nested inside composite components.
semantic-tag (nested instance):
Options: header, paragraph, label, caption, etc. Purpose: Assigns semantic meaning for accessibility and HTML output mapping. Usage:
Must be set before developer handoff.
Determines screen reader structure and document hierarchy. Context: Semantic tagging is required for accessibility compliance.
Appearance Modes:
Supports the following variable collections:
theme:
Automatically adapts color tokens between light and dark themes while preserving contrast and hierarchy.
device:
Typography scaling and spacing behavior adapt responsively to desktop, tablet, and mobile contexts.
style & sub-style:
All color styles and sub-styles are supported through appearance variables. These control semantic color intent (grey, brand, cta, alert) and tonal variation (eclipse, nebula, error, uranus) without requiring manual overrides.
opacity:
Opacity can be adjusted using appearance variables to support hierarchy, disabled states, or visual de-emphasis while preserving token-based consistency.
text style:
Supports appearance-based text styling such as italics, underline, or decorative variants when needed for emphasis or editorial use cases.
text weight:
Font weight can be adjusted via appearance variables to support hierarchy, emphasis, and semantic differentiation across headings and body content.
ℹ️ Typography families are controlled by the
typeproperty. Text family should not be overridden through appearance modes to ensure consistency and predictable scaling across the system.
Nested Components:
semantic-tag: Controls structural meaning for accessibility and HTML mapping.
♿ Accessibility Considerations:
Contrast: Content color tokens are pre-configured to support WCAG AA contrast targets. Designers must validate contrast in final layout context.
Keyboard navigation: Non-interactive Text does not receive focus. Interactive text elements inherit focus behavior from parent components.
Screen reader support: Semantic tags ensure proper reading order and structural hierarchy.
Semantic tags: Required for meaningful accessibility output and document structure.
🧠 Developer Notes:
Maps directly to semantic HTML tags (<h1>–<h6>, <p>, <span>, <label>) based on semantic-tag selection.
Color styles map to tokenized CSS variables for theme switching and accessibility enforcement.
Known Issues:
No known issues.
Reference Links:
WCAG 2.2 Contrast Guidelines — https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
WCAG Non-Text Contrast — https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
Dev Launchers Design System Typography Spec (Internal)
Last updated
Was this helpful?