# Prism Design System

> Vibrant 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.

## Overview

- Style: Vibrant Brand
- Tier: free
- Fonts: Space Grotesk (--font-display), IBM Plex Mono (--font-code)
- Border radius: 0.625rem
- Spacing base: 4px
- Components: 16

## Design Tokens

### Colors
- --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)

### Typography
- Space Grotesk: var(--font-display)
- IBM Plex Mono: var(--font-code)

## Components

### alert
Prism alert — informational banner with icon support and vibrant styling. Supports default and destructive variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/alert

### avatar
Prism avatar — circular image container with fallback initials and emerald-tinted muted background.
Dependencies: @radix-ui/react-avatar
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/avatar

### badge
Prism badge — small vibrant label for status and categories. Supports default, secondary, destructive, and outline variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/badge

### button
Prism button — vibrant emerald-green primary with bold hover states. Supports default, destructive, outline, secondary, ghost, and link variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/button

### card
Prism card — white container with subtle border and shadow. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/card

### checkbox
Prism checkbox — accessible checkbox with checked state using the system's primary color.
Dependencies: @radix-ui/react-checkbox
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/checkbox

### dialog
Prism dialog — modal overlay with header, footer, title, and description. Includes close button and animations.
Dependencies: @radix-ui/react-dialog
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/dialog

### input
Prism input — clean text input with emerald-green focus ring for vibrant brand identity.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/input

### label
Prism label — form label with consistent typography and disabled state handling.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/label

### select
Prism select — accessible dropdown select with trigger, content, item, label, and separator components.
Dependencies: @radix-ui/react-select
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/select

### separator
Prism separator — horizontal or vertical divider line using the system's border color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/separator

### skeleton
Prism skeleton — animated loading placeholder using the system's muted color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/skeleton

### switch
Prism switch — toggle switch with the system's primary color when checked.
Dependencies: @radix-ui/react-switch
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/switch

### tabs
Prism tabs — accessible tab navigation with list, trigger, and content components.
Dependencies: @radix-ui/react-tabs
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/tabs

### textarea
Prism textarea — multi-line text input with focus ring matching the system's primary color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/textarea

### tooltip
Prism tooltip — small popup on hover with provider, trigger, and content components.
Dependencies: @radix-ui/react-tooltip
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/prism/tooltip

## Quick Start

Install all components:
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/alert
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/avatar
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/badge
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/button
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/card
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/checkbox
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/dialog
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/input
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/label
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/select
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/separator
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/skeleton
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/switch
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/tabs
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/textarea
npx shadcn@latest add https://vibedesign.systems/api/registry/prism/tooltip

## Links

- System page: https://vibedesign.systems/systems/prism
- Registry API: https://vibedesign.systems/api/registry/prism
- Platform: https://vibedesign.systems/llms.txt