Prism
FreeVibrant brand design system inspired by Resend and Supabase. White backgrounds with bold emerald-green primary and strong geometric typography for API products and developer platforms.
Style: Vibrant Brand·16 components·Fonts: Space Grotesk, IBM Plex Mono
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/button
Or tell your AI agent:
Use the Prism design system from vibedesign.systems. Read https://vibedesign.systems/systems/prism/llms.txt for details.
Components
Alert: Something happened
alert
prism/alertVD
AB
avatar
prism/avatarDefault
Secondary
badge
prism/badgePrimary
Outline
button
prism/buttonCard Title
Description text here
card
prism/card✓
checkbox
prism/checkboxDialog Title
Dialog content goes here
Confirm
dialog
prism/dialogPlaceholder text...
input
prism/inputForm Label
label
prism/labelSelect option...▾
select
prism/selectseparator
prism/separatorskeleton
prism/skeletonswitch
prism/switchTab 1
Tab 2
tabs
prism/tabsEnter text...
textarea
prism/textareaTooltip text
tooltip
prism/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --primary | oklch(0.62 0.20 155) | |
| --primary-foreground | oklch(0.98 0 0) | |
| --background | oklch(0.995 0 0) | |
| --foreground | oklch(0.15 0.01 260) | |
| --muted | oklch(0.96 0.005 155) | |
| --muted-foreground | oklch(0.50 0.02 260) | |
| --border | oklch(0.91 0.005 260) | |
| --card | oklch(1 0 0) | |
| --accent | oklch(0.55 0.18 270) | |
| --destructive | oklch(0.58 0.22 25) | |
| --radius | 0.625rem |