UI Design System
Documentation of Hardal's UI components and design patterns
UI Design System
At Hardal, we use shadcn/ui as the foundation for our user interface components. This provides us with a consistent, accessible, and customizable design system that aligns with our brand identity.
Why shadcn/ui?
We chose shadcn/ui for several key reasons:
-
Component-First Approach: shadcn/ui provides beautifully designed, accessible components that we can copy and paste directly into our projects.
-
Customization: Unlike traditional component libraries, shadcn/ui allows us to own and customize the code, giving us complete control over our UI.
-
Tailwind CSS Integration: Built on Tailwind CSS, it provides a utility-first approach that makes styling efficient and consistent.
-
Radix UI Foundation: The components are built on Radix UI primitives, ensuring accessibility and robust interaction patterns.
-
Modern Design Language: The aesthetic aligns well with our brand's balance of professionalism and approachability.
Color System
Our color system is defined through CSS variables in our global stylesheet. The primary colors reflect our brand identity, with mustard yellow as our primary accent color.
Base Colors
| Variable | Light Mode | Dark Mode | Usage |
|---|---|---|---|
--primary |
Mustard yellow | Lighter mustard | Primary actions, focus states |
--secondary |
Light gray | Dark gray | Secondary actions, backgrounds |
--accent |
Soft yellow | Muted yellow | Highlights, accents |
--destructive |
Red | Lighter red | Error states, destructive actions |
Semantic Colors
| Variable | Purpose |
|---|---|
--background |
Page backgrounds |
--foreground |
Primary text |
--card |
Card backgrounds |
--card-foreground |
Text on cards |
--popover |
Popover backgrounds |
--popover-foreground |
Text on popovers |
--muted |
Muted backgrounds |
--muted-foreground |
Muted text |
--border |
Borders |
--input |
Form input borders |
--ring |
Focus rings |
Typography
We use a combination of fonts to create a distinctive but readable typographic hierarchy:
- Primary Font: Inter (sans-serif) for most UI text
- Secondary Font: Poppins (sans-serif) for most UI text
- Accent Font: Lora (serif) for specific accent text
Type Scale
We follow a consistent type scale throughout our applications:
| Size | Usage |
|---|---|
| xs (0.75rem) | Fine print, captions |
| sm (0.875rem) | Secondary text |
| base (1rem) | Body text |
| lg (1.125rem) | Emphasized body text |
| xl (1.25rem) | Subheadings |
| 2xl (1.5rem) | Section headings |
| 3xl (1.875rem) | Page headings |
| 4xl (2.25rem) | Major headings |
Component Usage
For detailed documentation on how to use specific components, refer to the shadcn/ui documentation. When implementing components, maintain these principles:
- Consistency: Use components as designed without unnecessary modifications
- Accessibility: Preserve accessibility features built into the components
- Responsiveness: Ensure components work well across all device sizes
- Performance: Keep component implementations lightweight