Prism
Tokens, components, and layout primitives for Designed.org. Every example on this page is the real, live component โ not a screenshot โ pulled straight from src/prism/.
Color
Semantic aliases first โ components should reach for these, not a hue directly (see src/prism/tokens.css's own comment on why). Brand hues and the neutral scale below back those aliases.
Semantic
Primary
--prism-color-primary
Primary hover
--prism-color-primary-hover
Accent
--prism-color-accent
Accent hover
--prism-color-accent-hover
Success
--prism-color-success
Warning
--prism-color-warning
Danger
--prism-color-danger
Info
--prism-color-info
Brand hues
Purple
--prism-color-purple
Blue
--prism-color-blue
Pink
--prism-color-pink
Yellow
--prism-color-yellow
Green
--prism-color-green
Gray scale
50
--prism-color-gray-50
100
--prism-color-gray-100
200
--prism-color-gray-200
300
--prism-color-gray-300
400
--prism-color-gray-400
500
--prism-color-gray-500
600
--prism-color-gray-600
700
--prism-color-gray-700
800
--prism-color-gray-800
900
--prism-color-gray-900
Typography
Heading โ h1 / display
Heading โ h2 / xl
Heading โ h3 / lg
Heading โ h4 / md
Heading โ h5 / sm
Heading โ h6 / xs
Text size="lg" โ for lead paragraphs.
Text size="base" โ the default body copy size.
Text size="sm" color="muted" โ captions, metadata.
Text weight="semibold"
Spacing
A plain 4px base scale โ see tokens.css's own comment on why this replaces the legacy $spacing-1..9 tokens, which baked a literal !important into every value.
Icons
The nav's line-icon set (src/icons/nav-icons.tsx) โ Lucide's path data, copied in as plain SVG rather than adding lucide-react as a dependency for ~25 icons. Shared between the legacy nav and Prism's own Header/Footer, so it lives outside src/prism/ proper; re-exported from here so it's still part of Prism's public surface.
newspaper
calendar
graduationCap
flaskConical
messageSquareText
headphones
users
messageCircle
folderKanban
briefcase
route
info
heart
handshake
gift
shoppingBag
circleHelp
search
rocket
settings
shield
lightbulb
circleCheck
triangleAlert
Link
Inline text links โ distinct from Button's own variant="link", which is a button-shaped control that happens to look like text. See src/prism/primitives/Link.tsx.
underline="hover" (default)
Badge
all variants
Card
Default
padding="md" (default), no hover behavior.
Interactive
interactive โ lifts and gains shadow on hover. Try it.
Avatar
sizes, and a fallback when there's no photo on file