Azyrom automatically generates dark mode, size, and state variants for all mobile UI components, expanding the library from 217 base components to ~2,000+ variants for comprehensive design coverage.
Variant Types
- Theme Variants - Light + Dark mode (175 dark variants)
- Size Variants - Small (75%), Medium (100%), Large (125%) - (~450 variants)
- State Variants - Default, Hover, Active, Disabled, Focus (~1,400 variants)
Dark Mode Variants
What It Is
Automatic dark mode color transformations following iOS and Material Design dark mode guidelines.
How It Works
- All 217 components have dark mode counterparts (175 applicable)
- Dark variants use inverted color schemes
- Light backgrounds → Dark backgrounds
- Dark text → Light text
- High contrast maintained for accessibility
- iOS dark mode follows Apple Human Interface Guidelines
- Material dark mode follows Material Design 3 specifications
Accessing Dark Mode
- Component names include "/ Dark" suffix (e.g., "Button / Primary / Dark")
- Browse Components panel → Look for purple "Dark" badges 🟣
- Drag dark variant onto canvas
- All dark variants are pre-generated (no manual color adjustments needed)
Color Mappings
iOS Dark Mode:
- Background: #FFFFFF → #000000 (black)
- Secondary Background: #F2F2F7 → #1C1C1E (dark gray)
- System Blue: #007AFF → #0A84FF (lighter blue)
- Label: #000000 → #FFFFFF (white)
Material Dark Mode:
- Surface: #FEF7FF → #1C1B1F (dark background)
- Primary: #6750A4 → #D0BCFF (lighter purple)
- On Primary: #FFFFFF → #381E72 (darker text)
Size Variants
What It Is
Small, Medium, and Large size variants for interactive components (buttons, inputs, controls, cards).
Size Multipliers
- Small: 75% of base size (compact interfaces)
- Medium: 100% of base size (default, standard)
- Large: 125% of base size (accessibility, prominent CTAs)
Which Components Get Sizes
- ✅ Buttons - All iOS and Material button types
- ✅ Text Fields - iOS and Material input fields
- ✅ Controls - Sliders, switches, checkboxes, radio buttons, chips
- ✅ Cards - All card variants
- ✅ List Items - Interactive list items with touch targets
- ❌ Navigation Bars - Fixed height (iOS/Material specs)
- ❌ Tab Bars - Fixed height (iOS/Material specs)
- ❌ Dialogs - Fixed width (iOS/Material specs)
Size Examples
Button Sizes:
- Small: 343×33px (75% of 44px)
- Medium: 343×44px (standard iOS touch target)
- Large: 343×55px (125% of 44px)
When to Use Each Size
- Small: Compact interfaces, secondary actions, toolbar buttons
- Medium: Default for most use cases, follows platform guidelines
- Large: Primary CTAs, accessibility needs, elderly users
Visual Indicators
- Blue badge labeled "S" or "L" 🔵
- Small icon: photo_size_select_small
- Large icon: photo_size_select_large
- Medium has no badge (it's the default)
State Variants
What It Is
Interactive state variants (Hover, Active, Disabled, Focus) for interactive components.
State Types
- Default - Normal resting state (original component)
- Hover - Mouse hover state (8% opacity overlay)
- Active - Pressed/clicked state (12% opacity overlay)
- Disabled - Non-interactive state (38% opacity, grayed out)
- Focus - Keyboard focus state (focus indicator visible)
Which Components Get States
- ✅ Buttons - All button variants
- ✅ Text Fields - Input fields, search bars
- ✅ Controls - Sliders, steppers, switches, checkboxes, radio buttons
- ✅ Chips - Filter, input, assist chips
- ✅ Interactive Containers - Clickable cards, list items
- ✅ Navigation Items - Tabs, navigation drawer items
- ❌ Static Components - Progress bars, badges, activity indicators
- ❌ Dialogs - Alert dialogs, modals (non-interactive containers)
State Visual Changes
Hover State:
- Visual: 8% opacity overlay
- Purpose: Subtle feedback on mouse hover
- Example: Button background slightly darkens/lightens
Active/Pressed State:
- Visual: 12% opacity overlay (stronger than hover)
- Purpose: Strong feedback on click/touch
- Example: Button background darkens/lightens prominently
Disabled State:
- Visual: 38% opacity on entire component
- Purpose: Indicate non-interactive state
- Example: Button appears grayed out, text faded
Focus State:
- Visual: Focus indicator (outline ring or border)
- Purpose: Keyboard navigation indicator
- Example: 2-4px blue ring around focused button (accessibility)
Visual Indicators
- Orange badge 🟠: Hover/Active states
- Gray badge ⚪: Disabled state
- Green badge 🟢: Focus state
- Badge icons indicate specific state type
Using Variants
Browsing Variants
- Open Components panel in right sidebar
- Click 📦 Mobile UI button to load components
- Look for colored badges on component cards
Searching Variants
- Use search bar at top of Components panel
- Search by component name (e.g., "Button Primary")
- Search by variant type (e.g., "Dark", "Large", "Hover")
- Search by state (e.g., "Disabled", "Focus")
Instantiating Variants
- Find variant in library (with appropriate badges)
- Drag onto canvas for precise placement
- Or click to place at canvas center
- Variant appears with correct colors, sizes, and states
Variant Combinations
Components can have multiple variants combined:
- Example: "Button / Primary / Large / Dark / Hover"
- Size + Theme + State all pre-generated
- All combinations available instantly
Performance
- All variants pre-generated (no generation delay)
- Components load instantly from library
- No performance impact from variant count
- Efficient storage (variants share base structure)
Best Practices
- Use Medium size for most designs (platform standard)
- Use Large size for primary CTAs and accessibility
- Use Small size for compact interfaces
- Always design both light and dark modes
- Include Disabled states in prototypes
- Show Focus states for accessibility compliance
- Use Hover/Active states for interactive prototypes
Use Cases
- Prototyping - Show interactive states in prototypes
- Handoff - Provide developers with all state specifications
- Accessibility - Ensure focus states are designed
- UI Kits - Complete component libraries with all states
- Dark Mode Design - Test designs in both light and dark