Design System
A warm, paper-toned component library built with Tailwind CSS. Import from components/ui and compose your UI. Supports light and dark mode via CSS variables.
Colors
CSS variable-driven palette with automatic dark mode
Typography
Serif headings, sans-serif body, monospace accents
Good morning, Andrei
Inbox
Pending Approvals
Primary body text
Secondary body text
Detail text with relaxed leading
Tertiary detail
Muted caption text
Button
Primary, secondary, ghost, outline, destructive, icon, and size variants
Input
Text inputs with labels, placeholders, icons, and states
Please enter a valid email
Found in your settings
Textarea
Multi-line text input
Max 500 characters
This field is required
Select
Dropdown select input
Checkbox
Task-style with strikethrough and standard form checkboxes
Toggle
On/off switch component
Radio
Single-selection radio group
Badge
Status badges, counters, and notification indicators
Source Pill
Contextual source indicators with emoji + label
Card
Content containers in default, elevated, and accent variants
Default Card
Standard content container with cream background and light border.
Elevated Card
Interactive variant with hover shadow. Hover over me.
Inbox-style card with coral left stripe and source icon.
Avatar
User avatar with initials
Kbd
Keyboard shortcut indicators
Separator
Horizontal, vertical, and labeled dividers
Alert
Informational, success, warning, and error alerts
Heads up
Success
Warning
Error
Skeleton
Loading placeholders with shimmer animation
Tooltip
Hover tooltips for additional context
Dialog
Modal dialog for confirmations and forms
Tabs
Tabbed navigation with pill and underline variants
Content for All tab.