# Clarity Design System

> Clean SaaS design system inspired by Stripe. Precise typography, restrained palette, and generous whitespace for professional web applications.

## Overview

- Style: Clean SaaS
- Tier: free
- Fonts: Inter (--font-sans), DM Sans (--font-display)
- Border radius: 0.375rem
- Spacing base: 4px
- Components: 16

## Design Tokens

### Colors
- --primary: oklch(0.55 0.17 250)
- --primary-foreground: oklch(0.98 0 0)
- --background: oklch(0.995 0 0)
- --foreground: oklch(0.13 0.02 260)
- --muted: oklch(0.965 0.005 260)
- --muted-foreground: oklch(0.55 0.02 260)
- --border: oklch(0.92 0.005 260)
- --card: oklch(1 0 0)
- --accent: oklch(0.62 0.21 265)
- --destructive: oklch(0.58 0.22 25)

### Typography
- Inter: var(--font-sans)
- DM Sans: var(--font-display)

## Components

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

### avatar
Clarity avatar — circular image container with fallback initials. Clean border and consistent sizing.
Dependencies: @radix-ui/react-avatar
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/clarity/avatar

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

### button
Clarity button — clean, precise hover states with Stripe-inspired styling. Supports default, destructive, outline, secondary, ghost, and link variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/clarity/button

### card
Clarity card — clean 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/clarity/card

### checkbox
Clarity 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/clarity/checkbox

### dialog
Clarity 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/clarity/dialog

### input
Clarity input — clean text input with subtle focus ring in the system's primary blue.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/clarity/input

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

### select
Clarity 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/clarity/select

### separator
Clarity 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/clarity/separator

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

### switch
Clarity 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/clarity/switch

### tabs
Clarity 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/clarity/tabs

### textarea
Clarity 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/clarity/textarea

### tooltip
Clarity 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/clarity/tooltip

## Quick Start

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

## Links

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