Text

<Text />TailwindCSS ModulesProduction Stable

Foundational body-copy and typographic component with strict typographic scale, semantic variant hierarchy, polymorphic rendering via as, and predictable line-height ratios engineered for high-density SaaS and financial dashboards.

InstallationColoxo CLI

npx coloxo add text --style coloxo-css

ES Module ImportPlayground / npm package

import { Text } from '@coloxo/ui';

Package: @coloxo/uiBundle: 0.82 KB

Design Tokens:

--cx-text-body-md--cx-font-family-sans--cx-line-height-relaxed--cx-color-text-primary

1. Variant & Hierarchy Matrix

Semantic roles for body, caption, overline, and code with live previews and token notes.

Variant	Semantic role	Visual treatment & preview	CSS token base
body	Standard UI prose, multi-line descriptions, tabular records, and modal summaries.	High-throughput data ingestion pipeline completed 14,820 records in 1.4s without degradation.	color: var(--cx-color-text-primary) weight: 400 (normal)
caption	Secondary metadata, timestamps, input helper copy, form validation hints, footnote markers.	Encrypted via AES-GCM-256 · Verified by IAM Policy node #902 · Updated 3 minutes ago	color: var(--cx-neutral-500) weight: 400 (normal)
overline	Category tags, table column groups, section kicker badges, uppercase structural anchors.	INFRASTRUCTURE WORKLOADS // REGION US-EAST-1	letter-spacing: 0.08em text-transform: uppercase
code	Inline code references, cryptographic hashes, UUIDs, environment vars, endpoint parameters.	process.env.COLOXO_API_KEY	font-family: JetBrains Mono border-radius: 4px

2. Typographic Scale

Proportionally locked font-size to line-height ratios preventing clipping in compact table cells.

Sizes xs–lg

size="xs"

12px / 16px

LH: 16px

Token: --cx-text-xs

Inline status · node-east-01

Micro data labels, badges, inline status text, nested directory nodes, compact graph legends.

size="sm"

14px / 20px

LH: 20px

Token: --cx-text-sm

Pipeline completed 14,820 records in 1.4s.

Secondary descriptions, compact table cells, dialog supporting copy.

size="md"DEFAULT

16px / 24px

LH: 24px

Token: --cx-text-body-md

Foundational body copy for enterprise SaaS interfaces.

Default standard UI body copy for forms, settings panels, and modal content.

size="lg"

18px / 28px

LH: 28px

Token: --cx-text-lg

Role Elevated to ClusterAdmin

Lead paragraphs, emphasized summaries, marketing subheads within product UI.

3. Polymorphic as prop

By default, <Text> emits a semantic <p>. Override as for inline emphasis, labels, and layout wrappers without polluting heading hierarchy.

p (default)

Paragraph block for multi-line prose.

span

Inline API_KEY reference inside a sentence.

strong

Settlement authorized by Treasury Ops.

em

Amount is pending dual approval before release.

div

Block container for stacked metadata.

label

Account identifier

4. Interactive Props Configurator

Variant

Size

Color

Sample text

Visual Render CanvasBODY · MD · as=p

Automated vulnerability remediation deployed successfully to 43 edge gateways.

tsx

1<Text2>3  Automated vulnerability remediation deployed successfully to 43 edge gateways.4</Text>

5. Dark theme

High-contrast Dark Mode compliance ([data-cx-theme="dark"]) maintaining WCAG AAA optical legibility on dark surfaces.

Contrast 12.4:1 AA+

VARIANT: BODY

Automated vulnerability remediation deployed successfully to 43 edge gateways.

VARIANT: CAPTION

Encrypted via AES-GCM-256 · Verified by IAM Policy node #902

VARIANT: OVERLINE

INFRASTRUCTURE WORKLOADS //

VARIANT: CODE

8cf2b910a4e2…

6. Enterprise layout compositions

Pairing overline, amount, caption, and code variants in financial and security surfaces.

TRANSACTION ID #TX-89410

CLEARED

$1,420,980.50 USD

Cross-border SWIFT settlement to Swiss National Bank clearinghouse.

Timestamp: 2025-02-17 14:02:19 UTC

Verify Block →

SECURITY LOG STREAM

IAM AUDIT

Role Elevated to ClusterAdmin

User identity verified via FIDO2 hardware authenticator key.

Event hash

8cf2b910...

7. Accessibility & line-height contract

Strict compliance rules governing optical contrast, non-breaking line-height, and assistive technology trees.

WCAG 2.1 AA+ Ratios

Default body text exhibits a 13.8:1 contrast ratio against default canvas surfaces. Muted captions never drop below 4.5:1, fulfilling WCAG AA strict criteria for small copy.

100% Tested Contrast

Line-Height Locking

All sizes specify explicit proportional line-heights (16px, 20px, 24px, 28px) ensuring that multi-line text blocks never bleed into adjacent table cells.

Screen Reader Fidelity

The as prop prevents Heading hierarchy pollution. Informational notices rendered as text do not masquerade as headings to Apple VoiceOver or NVDA.

Props

Name	Type	Default	Description
variant	"body" \| "caption" \| "overline" \| "code"	body	Typographic function and default styling.
size	"xs" \| "sm" \| "md" \| "lg"	md	Font-size / line-height scale (12/16 through 18/28).
weight	"regular" \| "medium" \| "semibold" \| "bold"	—	Font weight override.
color	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "brand" \| "error" \| "success" \| "warning" \| "inherit"	—	Semantic color tone; variant defaults apply when omitted.
as	"p" \| "span" \| "div" \| "strong" \| "em" \| "label" \| "li" \| "figcaption"	p	Polymorphic HTML element.