Consistent & Scalable UI/UX Patterns
The official design system for eggnasasas products, featuring reusable components, style guides, and design tokens for rapid development and brand consistency.
🧰 Explore Components🔧 Core Principles
Consistency
Unified design elements across all products for predictable user experiences.
Accessibility
WCAG 2.1 AA compliant components with keyboard and screen reader support.
Performance
Lightweight components optimized for fast rendering and responsiveness.
🎨 Color System
Base Purple
Cyan Accent
Dark Purple
Mid Blue
Warning Yellow
Error Red
Success Green
Background Gray
🔤 Typography Hierarchy
Display
Used for headlines and large-scale content
Display/Small
Secondary large text for sections and titles
Headings
Standard body copy size with generous line height
Labels
For small text like captions and annotations
🧱 Ready-to-Use Components
Buttons
Input Fields
Cards
Card Title
Elevated surface for content and actions
Modals
Dialog Title
This is a modal dialog message
📘 Implementation Guide
1. Install Design System: npm install @eggnasasasas/design-system
2. Import Components: import { Button, Card } from '@eggnasasasas/design-system';
3. Use Tokens: Reference color.palette.primary in your CSS/SCSS files