Typeset output
Drop exported tokens after your 5h3ll-ui stylesheet.
Sans Geist Sans
Mono Geist Mono
Radius 0.625rem
shadcn-style typeset preview for vanilla HTML
Design the type system. Ship the markup.
Preview shadcn-style typography and theme tokens on 5h3ll-ui components.
Typography
Scale preview
Display
Build interfaces that travel well.
Heading 1
Design tokens, not rewrites.
Heading 2
Portable visual language.
Lead
Copy shadcn-style token output into 5h3ll-ui and preview how it lands across real vanilla components.
Body
This preview demonstrates the typography stack, color tokens, radius, controls, cards, tables, and inline code used by the docs and future blocks.
Small
Token-first compatibility for non-React stacks.
Tokens
Theme surface
Canvas
Background
--background mapped through the active style pack.
Action
Primary
--primary mapped through the active style pack.
Support
Secondary
--secondary mapped through the active style pack.
Subtle
Muted
--muted mapped through the active style pack.
Hover
Accent
--accent mapped through the active style pack.
Risk
Destructive
--destructive mapped through the active style pack.
Components
Real UI preview
Publish settings
Preview common form controls under the selected typeset.
Preview activity
Cards, badges, tables, and inline code inherit the same tokens.
Stable Typeset No React
| Token | Maps to | Status |
|---|---|---|
fontSans | --font-sans | Ready |
radius | --radius | Ready |
primary | --primary | Ready |
Export
Copy target
5h3ll-ui token layer
Use this shape for shadcn Typeset-style output. Keep it after the 5h3ll-ui import.
:root {
--font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
--font-heading: var(--font-sans);
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
}