Typography
Typography — @wizeworks/silicaui's UI type ramp (distinct from .prose, which styles a block of long-form/markdown content).
Display · oversized hero ramp (size 1 → 3)
Display 1
Display 2
Display 3
Display (base · = size 3)
Heading · level = semantics, size = how big (independent)
Heading 1
Heading 2
Heading 3
h2 that reads as h5
h2 sized to display-2
Lead text — a slightly larger, muted intro paragraph.
Body text — the default paragraph style.
Body text bumped to size="xl".
Caption — small, muted, for metadata.
Blockquote · pull-quote with attribution
“Silica cut our design review time in half — everything just lines up on the same token system.”
No attribution needed for a short pull-quote.
Using Typography
Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.
Plain HTML — CSS classes
The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.
/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";Root class blockquote, with 13 modifiers:
.blockquote.blockquote-cite.caption.display.display-1.display-2.display-3.h1.h2.h3.h4.h5.h6.lead
The full API for Typography, on every path, is available through the Silica MCP server.