Getting Started
Getting Started
Welcome to WEC Design System
Section titled “Welcome to WEC Design System”WEC Design System is a collection of reusable components, design tokens, and guidelines for building consistent and accessible digital products. This documentation showcases all available components with their variants, states, and usage patterns.
What’s Included
Section titled “What’s Included”Foundation
Section titled “Foundation”The foundation layer provides the building blocks for designs:
- Colors - Color palette and semantic color tokens
- Typography - Type scale, font families, and text styles
- Spacing - Spacing scale for consistent layouts
- Shadows - Elevation and depth tokens
- Design Tokens - Complete token reference
Components
Section titled “Components”Ready-to-use UI components built with accessibility in mind:
- Button - Interactive buttons with multiple variants
- Input - Form input fields with validation states
- Card - Container component for content grouping
- Badge - Status indicators and labels
- Package Detail - Package information display organism
Guidelines
Section titled “Guidelines”Best practices for designing with WEC:
- Design Principles - Core design values
- Accessibility - WCAG 2.1 AA compliance guidelines
- Content Guidelines - Writing and microcopy standards
- Responsive Design - Mobile-first approach
Component Structure
Section titled “Component Structure”Each component documentation includes:
| Section | Description |
|---|---|
| Overview | Component purpose, tags, and related components |
| Anatomy | Visual breakdown of component elements |
| Variants | Available styles and configurations |
| States | Default, hover, focus, error, disabled states |
| Behavior | Interactions, animations, responsiveness |
| Usage Guidelines | When to use, best practices, do’s and don’ts |
| Accessibility | ARIA attributes, keyboard navigation, screen reader support |
Design Tokens
Section titled “Design Tokens”Our design tokens are synchronized between design and code:
- Semantic Naming - Clear, descriptive token names
- Consistent Scale - 4px base spacing, modular type scale
- Theme Support - Light and dark mode ready
- Cross-Platform - Same tokens for web, mobile, and other platforms
For complete token reference, see Design Tokens.
Accessibility
Section titled “Accessibility”All components in WEC Design System are built to meet WCAG 2.1 AA standards:
- Keyboard navigation support
- Screen reader friendly
- Proper ARIA labels and roles
- Focus management
- Color contrast compliance
Next Steps
Section titled “Next Steps”- Explore the Foundation tokens
- Browse Components documentation
- Read Design Principles
- Learn about Accessibility guidelines
Storybook
Section titled “Storybook”For interactive component examples, code implementation, and live previews, visit our Storybook.