Typographic scale, font hierarchy, and polymorphic Text component.
Typography in XiodUI is built around three core pillars: deliberate optical rhythm, proportional line-heights, and seamless polymorphic composition. Rather than writing repetitive utility classes across every heading and paragraph, the Text component provides a cohesive type scale tailored to the system font stack (HarmonyOS Sans, Geist Mono, and Fira Code iScript).
Optical Balance
Headings apply tight letter-tracking (-0.025em) and calibrated leading to prevent awkward line breaks on large screens.
Accessible Contrast
Colors tie directly to semantic surface tokens (--foreground, --muted-foreground) guaranteeing WCAG AAA compliance in both light and dark modes.
Polymorphic HTML
Renders genuine semantic elements (<h1>–<h4>, <p>, <span>) by default, or any element you supply via the render prop.
1import { Text } from "xiod-ui/text";23export function TypographyDemo() {4 return (5 <div className="space-y-4">6 {/* Semantic heading with tight tracking */}7 <Text variant="heading1">Design Systems at Scale</Text>89 {/* Body copy with relaxed leading */}10 <Text variant="body" size="lg" className="leading-relaxed">11 Typography establishes visual hierarchy, guides the reader's eye,12 and conveys tone across every surface.13 </Text>1415 {/* Secondary meta text */}16 <Text variant="secondary" size="sm">17 Updated 2 hours ago · 4 min read18 </Text>19 </div>20 );21}Headings set the editorial cadence of your interfaces. Each heading variant automatically renders its corresponding semantic tag (<h1> through <h4>), sets semibold weight, and applies negative letter-spacing for a refined display appearance.
XiodUI separates primary body copy from secondary metadata using dedicated color tokens and proportional font sizing. Five size tiers accommodate every use case from editorial introductions down to fine print.
Design systems should elevate craftsmanship across teams without imposing rigid constraints that stifle creative expression.
Every component reflects meticulous attention to keyboard navigation, high-contrast themes, and fluid layout scaling.
Components depend strictly on relative spacing tokens and CSS variables. When your theme switches between light, dark, or custom brand hues, the entire UI responds synchronously with zero layout shift.
Published in Documentation · Authored by the Core Team · Peer dependencies: React 19, Tailwind CSS 4.
© 2026 XiodUI. Source code available under the PolyForm Perimeter License. All benchmarks run on Bun 1.4+.
The matrix below showcases how font weights (normal, medium, semibold, bold) interact seamlessly with every size tier.
| Size | normal (400) | medium (500) | semibold (600) | bold (700) |
|---|---|---|---|---|
| xl | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| lg | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| default | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
| sm |
Semantic color variants enable contextual messaging (alerts, status badges, form feedback) that remain harmonized with design tokens instead of using arbitrary raw colors.
Build Completed Successfully
All 388 routes compiled cleanly with 0 type errors.
For code symbols, tabular calculations, commit IDs, and keyboard shortcuts, the mono and mono-secondary variants render monospace text with tabular numerals.
variant="mono"
git commit -m "feat(text): typography scale"Primary monospace for commands, paths, and values.
variant="mono-secondary"
sha256:7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fSubdued monospace for hashes, IDs, and metadata.
Throughput:
1,420,891 ops/secBundle Size:
3.42 kB (gzip)Version:
v1.2.0-canary.4The Text component integrates Base UI's useRender hook. Using the render prop, you can clone any JSX element and apply the exact typography styles without leaving unwanted wrapper tags or sacrificing HTML5 validation.
1import { Text } from "xiod-ui/text";23{/* Renders an <h2> with custom id for anchor links */}4<Text5 variant="heading2"6 render={<h2 id="custom-heading" />}7 className="scroll-mt-20"8>9 Anchorable Section Header10</Text>1112{/* Renders a semantic <label> for an accessible form field */}13<Text14 variant="body"15 size="sm"16 weight="medium"17 render={<label htmlFor="email-input" />}18>19 Email address20</Text>2122{/* Renders a styled <blockquote> */}23<Text24 variant="heading3"25 render={<blockquote />}26 className="border-l-2 border-primary pl-4 italic"27>28 "Good design is as little design as possible."29</Text>A comprehensive editorial article demonstration showing how headings, lead text, pull quotes, metadata lines, and tabular stats unify into a harmonious visual presentation.
Modern digital interfaces thrive at the intersection of mathematical precision and tactile warmth. When typography carries proportional weight and rhythmic spacing, digital products feel solid, trustworthy, and effortless.
XiodUI Core Team
Design Systems & Architecture
Reading Time
5 min read
Published
September 2026
“Typography is to digital products what architecture is to physical spaces: it dictates how people navigate, dwell, and remember the experience.”
— Principles of Harmonic UI Design
Achieving visual hierarchy requires disciplined restraint. Every typographic change in size, weight, or tone should signify a genuine functional distinction. Headings establish landmarks for the reader's gaze, while secondary metadata provides context without creating visual distraction.
By encapsulating tracking, leading, and semantic tag rendering directly in the <Text> component, product teams eliminate typographic drift and ensure that design updates propagate universally.
Passing truncate enforces single-line ellipsis (truncate min-w-0), ensuring text never expands beyond constrained parent boundaries in dashboards, breadcrumbs, and tables.
Contrained container (max width 280px):
very-long-project-identifier-that-exceeds-bounds@organization.internal.io
1import { Text } from "xiod-ui/text";23<div className="w-48 rounded-lg border border-border/60 bg-muted/30 p-3">4 <Text variant="body" size="sm" truncate>5 very-long-project-identifier-that-exceeds-bounds@organization.internal.io6 </Text>7</div>Sphinx of black quartz
Sphinx of black quartz |
Sphinx of black quartz |
Sphinx of black quartz |
| xs | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz | Sphinx of black quartz |
Hydration Optimization
Font definitions use next/font for zero layout shift during load.
Deprecated Subpath Warning
Import from subpaths directly (xiod-ui/button, not xiod-ui).
Validation Error Encountered
Required authentication token is missing or has expired.
WCAG Contrast Compliance
Curated Typography Weights
Zero Runtime CSS Overhead