INDUSTRIAL PROTOCOLSTEXT COMPONENTSTYPOGRAPHY

Typography

The structural language of 8eyond UI. A dual-layer system balancing technical precision with readability.

Preview

Core
Gradient Hero
Archetype_Ref

Alchemical Ascension

<Typography variant="h1" gradient>Alchemical Ascension</Typography>
Heading 1
Archetype_Ref

Architectural Entropy

<Typography variant="h1">Architectural Entropy</Typography>
Heading 2
Archetype_Ref

Transmission Protocols

<Typography variant="h2">Transmission Protocols</Typography>
Heading 3
Archetype_Ref

Kernel Alignment

<Typography variant="h3">Kernel Alignment</Typography>
Paragraph
Archetype_Ref

The alchemical process begins with the raw essence of data. Through careful distillation and precise structural alignment, we transmute information into high-performance visual artifacts.

<Typography variant="p">The alchemical process begins...</Typography>
Blockquote
Archetype_Ref
At the center of every architectural node lies the lead essence, waiting for the alchemist's touch to reach its golden potential.
<Typography variant="blockquote">At the center of...</Typography>
Unordered List
Archetype_Ref
  • Atomic Design Principles
  • Logical State Consistency
  • Architectural Purity Standard
<Typography variant="ul"> <Typography variant="li">Atomic Design</Typography> <Typography variant="li">Logical Order</Typography> </Typography>
Inline Code
Archetype_Ref

system.init()

<Typography variant="code">system.init()</Typography>
Muted Text
Archetype_Ref

Last updated: 0x0A2B

<Typography variant="muted">Last updated: 0x0A2B</Typography>

API Reference

Core
PropTypeDefaultDescription
variant"h1" | "h2" | "h3" | "h4" | "p" | "lead" | "large" | "small" | "muted" | "code" | "ul" | "li" | "blockquote""p"The typographic preset to apply.
asReact.ElementTypenullThe HTML element to render as (e.g. "span", "div").
gradientbooleanfalseApply adaptive metallic gradient effect.
align"left" | "center" | "right" | "justify""left"Text alignment.

Usage

Core
<Typography variant="h1"> Industrial_Core </Typography>