# UI Design & User Experience
## Design System
### Color System
Our color system is defined in CSS variables with both light and dark mode variants:
```css
:root {
/* Core colors */
--background: 0 0% 100%;
--foreground: 222 47% 11%;
/* Primary colors */
--primary: 217 91% 60%;
--primary-foreground: 0 0% 100%;
/* Card colors */
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
/* Additional semantic colors */
--muted: 210 40% 96%;
--muted-foreground: 215 16% 47%;
--accent: 210 40% 96%;
--accent-foreground: 222 47% 11%;
/* ... additional color definitions ... */
}
.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
/* ... dark mode variants ... */
}
```
### Typography
We use the Geist font family for its clean, modern appearance:
```typescript
import { GeistSans } from 'geist/font/sans';
```
### Spacing System
Consistent spacing using Tailwind's scale:
- `space-1`: 0.25rem (4px)
- `space-2`: 0.5rem (8px)
- `space-4`: 1rem (16px)
- `space-6`: 1.5rem (24px)
- `space-8`: 2rem (32px)
## Component Architecture
### Base Components
All base components are built on Radix UI primitives and styled with Tailwind:
```typescript
// Example Button Component
const Button = React.forwardRef<
HTMLButtonElement,
ButtonProps
>(({ className, variant, size, ...props }, ref) => {
return (
);
});
```
### Layout Components
#### Page Layout
```typescript
export function PageLayout({ children }: { children: React.ReactNode }) {
return (
);
}
```
#### Sidebar Navigation
The sidebar uses a floating design with dynamic content based on context:
```typescript
export function AppSidebar({ ...props }: SidebarProps) {
return (
);
}
```
### Form Components
Forms use React Hook Form with Zod validation:
```typescript
const form = useForm({
resolver: zodResolver(schema),
defaultValues: {
title: "",
description: "",
},
});
return (
);
```
## Responsive Design
### Breakpoints
We follow Tailwind's default breakpoints:
- `sm`: 640px
- `md`: 768px
- `lg`: 1024px
- `xl`: 1280px
- `2xl`: 1536px
### Mobile-First Approach
```typescript
export function StudyCard({ study }: StudyCardProps) {
return (
{/* Card content */}
);
}
```
## Animation System
### Transition Utilities
Common transitions are defined in Tailwind config:
```javascript
theme: {
extend: {
transitionTimingFunction: {
'bounce-ease': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
},
},
}
```
### Page Transitions
Using Framer Motion for smooth page transitions:
```typescript
export function PageTransition({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
## Loading States
### Skeleton Components
```typescript
export function CardSkeleton() {
return (
);
}
```
### Loading Indicators
```typescript
export function LoadingSpinner({ size = "default" }: { size?: "sm" | "default" | "lg" }) {
return (
);
}
```
## Accessibility
### ARIA Labels
All interactive components include proper ARIA labels:
```typescript
export function IconButton({ label, icon: Icon, ...props }: IconButtonProps) {
return (
);
}
```
### Keyboard Navigation
Support for keyboard navigation in all interactive components:
```typescript
export function NavigationMenu() {
return (
);
}
```
## Best Practices
1. **Component Organization:**
- One component per file
- Clear prop interfaces
- Consistent file naming
2. **Style Organization:**
- Use Tailwind utility classes
- Extract common patterns to components
- Maintain consistent spacing
3. **Performance:**
- Lazy load non-critical components
- Use React.memo for expensive renders
- Implement proper loading states
4. **Accessibility:**
- Include ARIA labels
- Support keyboard navigation
- Maintain proper contrast ratios
5. **Testing:**
- Component unit tests
- Integration tests for flows
- Visual regression testing