Public demo
UI kit · Foundations & typography
Headings, body text, captions, inline code, keyboard hints, blockquotes, and semantic color swatches—baseline tokens for any design system.
Typography scale and neutral/semantic color roles as static stubs, aligned with how documentation sites introduce tokens before components.
UI showcase
Static composition for reference—swap in generated output when your pipeline is connected. Everything below is local markup only.
Use this page as the vocabulary anchor before swapping in your real type ramp and token JSON.
Why this demo works
- Establishes hierarchy and legibility rules without committing to a font vendor yet.
- Color swatches map directly to CSS variables or design-tool variables.
Suggested use cases
- Design system onboarding and token audits
- Marketing + product alignment on type scale
What's included
- Display and section heading samples
- Body, caption, inline link, code, and kbd
- Blockquote for pull quotes or policy callouts
- Six-slot semantic palette strip (ink, muted, line, accent, warn, ok)
Editable in Frontuna
Framework-agnostic markup; pair with any headless or styled component library.
Use this page as a briefing artifact: copy structure, swap copy, and connect your components—no fake generated code required.
Build notes
- Bind swatches to theme.css or Tailwind @theme in Frontuna.
- Replace span-based type samples with your Heading/Text primitives.