StockFind Design System
Brand guidelines, design tokens, and component documentation for StockFind
Welcome to the StockFind Design System. This documentation covers our brand identity, design tokens, and HeroUI v3 component patterns.
Getting Started
Colors
Brand and semantic color palette
Typography
Font family and type scale
Spacing
8px grid system and gap utilities
Components
HeroUI v3 component library
Design Principles
- Clarity: Financial data must be easy to read and understand
- Consistency: Use semantic colors and spacing throughout
- Accessibility: All components meet WCAG 2.1 AA standards
- Performance: Lightweight components with minimal runtime overhead
Tech Stack
| Layer | Technology |
|---|---|
| Components | HeroUI v3 (React Aria) |
| Styling | Tailwind CSS v4 |
| Font | Geist Sans |
| Icons | Lucide React |