Clarity
FreeClean SaaS design system inspired by Stripe. Precise typography, restrained palette, and generous whitespace for professional web applications.
Style: Clean SaaS·16 components·Fonts: Inter, DM Sans
Quick Install
Install a single component:
npx shadcn@latest add https://vibedesign.systems/api/registry/clarity/button
Or tell your AI agent:
Use the Clarity design system from vibedesign.systems. Read https://vibedesign.systems/systems/clarity/llms.txt for details.
Components
Alert: Something happened
alert
clarity/alertVD
AB
avatar
clarity/avatarDefault
Secondary
badge
clarity/badgePrimary
Outline
button
clarity/buttonCard Title
Description text here
card
clarity/card✓
checkbox
clarity/checkboxDialog Title
Dialog content goes here
Confirm
dialog
clarity/dialogPlaceholder text...
input
clarity/inputForm Label
label
clarity/labelSelect option...▾
select
clarity/selectseparator
clarity/separatorskeleton
clarity/skeletonswitch
clarity/switchTab 1
Tab 2
tabs
clarity/tabsEnter text...
textarea
clarity/textareaTooltip text
tooltip
clarity/tooltipDesign Tokens
| Token | Value | Preview |
|---|---|---|
| --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) | |
| --radius | 0.375rem |