UI Components Documentation
UI Components
Comprehensive documentation for all UI atoms and molecules in the design system. Each component is designed for reusability, accessibility, and consistent styling.
UI Atoms
9 ComponentsFundamental UI building blocks that cannot be broken down further. These are the basic elements that form the foundation of more complex components.
Badge
Status indicators and labels with multiple variants and sizes.
Card
Container component with glass morphism effects and multiple variants.
SectionWrapper
Layout container with animated backgrounds and gradient variants.
BackgroundPattern
Animated background with moving circles and gradient effects.
HexagonPattern
SVG-based hexagonal pattern with scaling animations.
UI Molecules
3 ComponentsComplex components built by combining multiple atoms. These provide specific functionality and represent common UI patterns used throughout the application.
ContactForm
Complete contact form with validation and API integration.
ProjectCard
Project showcase with image, tech stack, and action buttons.
BlogCard
Blog post preview with metadata, tags, and featured highlighting.
Design System Principles
Consistency
- Unified color palette and typography
- Consistent spacing and sizing scales
- Standardized interaction patterns
- Glass morphism design language
Accessibility
- WCAG 2.1 AA compliance
- Keyboard navigation support
- Screen reader compatibility
- High contrast color ratios