Design System
Clarity UI is built on a set of core principles and tokenized values. This system ensures consistency, accessibility, and speed across all applications. It is designed to be invisible, letting your content take center stage.
Philosophy
Subtlety first
Interfaces should recede. We use high-contrast borders and subtle backgrounds to create depth without noise. Shadows are used sparingly.
Type is Interface
We rely on font weight and size hierarchy rather than color to define structure. Text varies in purpose: headings lead, body informs, and captions support.
Motion with meaning
Animations are fast (150ms-300ms), imperceptible, and used only to guide the eye or provide feedback. No bounce, no fluff.
Color Palette
We use strict semantic tokens mapped to a neutral scale. In light mode, we use Zinc. In dark mode, we drift slightly blue-gray for better contrast on OLED screens.
Base Scale (Zinc)
* Note: This is an approximation. We use standard Tailwind Zinc.
Clarity UI is built on a foundation of simplicity, accessibility, and visual harmony. Our core philosophy is *MINIMAL. We believe in:
Semantic Tokens
Typography
The quick brown fox
Jumps over the lazy dog
Sphinx of black quartz
Good typography makes the interface dissolve. We typically use Inter, configured withfont-feature-settings to enable tabular numbers in data tables and stylistic sets for structured legibility.
"Simplicity is the ultimate sophistication."
- Consistent line-height (leading-7)
- High contrast text (foreground)
- Subtle supporting text (muted-foreground)
Radii
rounded-smrounded-mdrounded-lgrounded-fullWe default to rounded-xl or 0.5rem (8px) for cards and inputs to create a softer, more modern friendliness without feeling bubbly.