Introduction

Welcome to the Brand Design System documentation. Brand is a comprehensive design system featuring base building blocks (Elements), composed layouts (Components), and Material Design components with multi-brand theming support.

What is Brand?

Brand is a design system built to support multiple brands including iYURA and The Ayurveda Experience. It provides a consistent foundation for building digital products while allowing each brand to maintain its unique visual identity.

Key Concepts

• Elements - 14 base building blocks that form the foundation of all interfaces
• Components - 86 pre-composed layouts combining multiple elements
• Material Components - 35 Material Design 3 components adapted to work with Brand theming
• Design Tokens - Brand-specific values for colors, typography, spacing, and more

Getting Started

Start by exploring the foundations of the design system, then dive into the elements and components.

Multi-Brand Theming

Brand supports multiple brand themes out of the box. Use the theme switcher in the header to see how components adapt to different brand identities. Currently supported brands:

• iYURA - Celebratory, maximalist, Madhubani-inspired aesthetics
• The Ayurveda Experience - Sophisticated, natural, trustworthy feel

Adding New Brands

Adding a new brand is as simple as creating a new configuration file in the /brands directory. The system automatically detects new brands and makes them available in the theme switcher.

Elements vs Components

Design Principles

1. Consistency - Unified design language across all touchpoints
2. Flexibility - Adaptable to multiple brand identities
3. Accessibility - WCAG 2.1 AA compliance for all components
4. Performance - Optimized for fast loading and rendering
5. Developer Experience - Clear documentation and copy-ready code