+
+
+
+ Unicode Lookup
+Design System
++ A reference of every token, primitive, and component available in the project. +
+ +
+
+
+ Colors
+HSL-based color system with light and dark theme support.
+
+
+
+ Theme
+
+
+
+
+ {{ c.label }}
+
+
+
+
+
+ {{ c.label }}
+
+
+
+
+ Primary
+
+
+
+
+ {{ c.label }}
+
+
+
+
+ Semantic
+
+
+
+
+
+
+
+
+ {{ name }}
+
+
+ Border & Link
+
+
+
+
+ {{ c.label }}
+
+
+
+
+ Typography
+System font stack with a harmonious type scale.
+
+
+
+ Headings
+
+
+
+ Heading {{ h }}
+
+
+
+
+
+
+
+
+ Sizes
+
+
+
+ Aa
+
+
+
+
+ Weights
+
+
+
+ The quick brown fox
+
+
+
+
+ Colors
+
+
+
+ {{ c.label }} text color
+
+
+
+
+ Spacing
+4px base unit scale for consistent spatial rhythm.
+
+
+
+
+
+ {{ s.key }}
+
+
+
+
+ {{ s.px }}px
+
+
+
+ Shadows
+Elevation system for layering and depth.
+
+
+
+
+
+
+ {{ s }}
+
+
+
+
+ Border Radius
+Corner rounding tokens from sharp to pill.
+
+
+
+
+
+
+ {{ r.key }}
+
+
+
+
+ Inputs
+Text input fields with validation and size variants.
+
+
+
+
+
+ Sizes
+
+
+
+
+
+
+
+ States
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TextArea
+Multi-line text input with resize control.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select
+Dropdown selection menus.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Controls
+Toggle and selection controls.
+
+
+
+
+
+ Checkbox
+
+
+
+
+
+ Radio
+
+
+
+
+ Switch
+
+
+
+
+
+ Labels
+Form field labels with optional/required indicators.
+
+
+
+
+
+
+
+
+
+
+
+
+ Alerts
+Contextual feedback messages for user actions.
+
+
+
+ This is an informational message with helpful context.
+ The operation completed successfully.
+ Please review your input before proceeding.
+ Something went wrong. Please try again.
+ Dismissible alert -- click the close button.
+
+
+
+
+ Badges
+Compact status indicators and labels.
+
+
+
+ Variants
+
+ Default
+ Primary
+ Success
+ Warning
+ Error
+ Info
+
+
+
+
+
+
+ Sizes
+
+ Small
+ Base
+ Large
+
+
+
+ Options
+
+ Pill
+ Dot
+ Pill + Dot
+
+
+
+
+ Spinners
+Loading indicators for async operations.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Modal
+Overlay dialog for focused interactions.
+
+
+
+
+
+
+ Dialog Title
+ Click outside or press Escape to close this dialog.
+
+
+
+
+
+