Platform-Native Semantic Primitives

Typography System

Proportional typographic scale with optical letter-spacing, fluid font hierarchies, and standardized semantic text roles. Zero Shadow DOM barriers, rendering instantly with pure semantic HTML.

Interactive Type Explorer

Test fluid type rendering, optical tracking, and font weights live.

Sample Preview Text

Size

Weight

Font Family

Universal Light-DOM UI Architecture engineered for modern web platforms.

Size: 1.75rem (28px)Weight: 700 BoldTracking: -0.025emLine-Height: 1.3

Type Hierarchy & Scale

Standard proportional display and heading roles with optical letter-spacing (tracking).

Display 3XL

2.25rem (36px)Weight 800Tracking -0.035em

Design for the Modern Platform

Marketing hero banners, high-impact landing headlines.

Display 2XL

1.75rem (28px)Weight 700Tracking -0.025em

Enterprise Application Dashboard

Primary Page Titles (H1), top-level view headers.

Heading XL

1.35rem (21.6px)Weight 600Tracking -0.02em

Real-Time Telemetry & Performance

Major section titles (H2), dashboard panel headers.

Heading LG

1.15rem (18.4px)Weight 600Tracking -0.015em

Authentication & Security Policies

Subsections (H3), dialog headers, modal titles.

Heading MD

1.0rem (16px)Weight 600Tracking Normal

Card Title & Widget Header

Card headers (H4), settings group titles.

Heading SM

0.875rem (14px)Weight 600Tracking Normal

Sidebar Group Label & Column Title

Table column headers, sidebar group titles (H5).

Semantic Text Roles

Built-in body, lead, muted, code, and quote primitives for readable content layouts.

Body & Lead Textdata-variant

data-variant="lead"

NNUI-KIT delivers three-tier platform-native UI architecture with zero Shadow DOM barriers and sub-40 KB runtime footprint.

data-variant="body"

Components render into standard Light-DOM trees, allowing direct CSS styling with Tailwind or vanilla CSS, native HTML form submissions with FormData, and accessibility inspection by screen readers.

data-variant="muted"

Updated 2 minutes ago · Version 1.0.1 · MIT Licensed

Code, Quotes & Form BindingsSpecialized Roles

Blockquote Callout

"Shadow DOM creates isolation, but in enterprise web apps, isolation quickly turns into an accessibility and styling prison."

Inline Code & Shortcuts

Run npm install nnuikit or press ⌘K to search docs.

Form Helper & Error Primitives

ℹ️ Password must be at least 8 characters with one special symbol.

⚠️ Email address is required for 2FA notification dispatch.

Layout & Feedback Primitives

Zero-JS structural primitives that establish clean visual hierarchy across applications.

Layout Containers (Zero-JS)data-ui

data-ui="stack" (Flexbox gap alignment)

Flex RowGap TokenZero JS

data-ui="grid" (Responsive columns)

Col 1

Col 2

Col 3

Feedback & Status IndicatorsZero-JS

Accessible Spinners

Pure CSS keyframe spin

📁

Empty State Primitive

data-ui="empty" zero-data feedback

Code Examples & Implementation

<!-- 1. Semantic Headings with Optical Tracking -->
<h1 data-ui="heading" data-size="3xl">Enterprise Platform Architecture</h1>
<h2 data-ui="heading" data-size="2xl">Analytics & Metrics</h2>
<h3 data-ui="heading" data-size="xl">Security & Audit Logs</h3>

<!-- 2. Standardized Semantic Text Roles -->
<p data-ui="text" data-variant="lead">High-hierarchy introductory paragraph.</p>
<p data-ui="text" data-variant="body">Standard content typography.</p>
<p data-ui="text" data-variant="muted">Secondary metadata and captions.</p>
<p data-ui="text" data-variant="small">Footnotes and legal disclaimers.</p>

<!-- 3. Form Validation Messages -->
<div data-ui="field-hint">Helper guidance text for form fields.</div>
<div data-ui="field-error">Live accessible validation error message.</div>

<!-- 4. Layout & Feedback Primitives -->
<div data-ui="stack" data-direction="col" data-gap="3">...</div>
<div data-ui="spinner" data-size="md" role="status"></div>