Design System
Welcome to the StudyBoost Design System documentation. This guide provides a comprehensive overview of the UI/UX principles, components, and tokens that define our product's visual identity.
Core Principles
- Precision-First — Intentional spacing, sizing, and alignment drive every design decision
- Campus-Modern — A clean, professional aesthetic rooted in academic environments
- Accessibility — WCAG-compliant contrast, focus states, and semantic HTML
- Performance — Lightweight components optimized for fast rendering
- Consistency — Unified tokens and patterns across all screens
Design System Structure
- Colors & Palettes — Custom OKLCH color tokens, themes, and usage
- Typography — Font family, scales, weights, and hierarchy
- Components — Radius, spacing, sizing, and component standards
- Icons — Primary icon library and best practices
- Libraries — Tech stack, deps, and integration guides
Quick Reference
| Aspect | Value |
|---|---|
| Base Radius | 7px (sleek, precision-focused) |
| Color Mode | OKLCH (modern, perceptually uniform) |
| Primary Color | Campus Teal: #0D9488 |
| Icon Library | Remixicon (primary), Lucide-react (secondary) |
| Component Library | shadcn/ui (base-nova style) |
| CSS Framework | Tailwind CSS v4 with CSS variables |
Getting Started
Developers should read these docs in order:
- Start with Colors & Palettes to understand the token system
- Review Typography for font hierarchy and sizing
- Check Components for spacing and radius standards
- Learn Icons for icon selection and usage
- Reference Libraries for setup and integration
File Structure
All design documentation lives in /docs/src/app/design-system/. Component implementations follow the same patterns and can be found in /frontend/components/ui.
Last Updated: April 5, 2026
Version: 1.0