Styling Patterns with Zest Design System

Core Principles

Follow the styling hierarchy: Zest components → useZestStyles → useZestTheme. Use design tokens for all values and extract style configs outside components for performance.

Why: Zest provides consistent theming, accessibility, responsive design, and automatic platform adaptations across the app.

When to Use This Skill

Use these patterns when:

• Styling any React Native component
• Creating custom layouts or compositions
• Implementing responsive designs
• Handling platform-specific styling (iOS vs Android)
• Applying conditional or dynamic styles
• Ensuring consistent spacing and colors
• Building theme-aware interfaces