Instruction file imported from andersori/oficina-digital (.github/instructions/brand-design.instructions.md). Copyright stays with the author.

Brand & Material Design 3 Integration

Always use Material Design 3 (Material You) components with Oficina Digital brand customization.

Material Design 3 Setup

Framework: Use Material UI v5+ with Material Design 3 tokens Documentation: https://m3.material.io/ React Library: @mui/material with Material You theming

Component Guidelines

• Buttons: Use Material 3 button variants (filled, outlined, text)
• Cards: Follow Material 3 elevation and surface guidelines
• Navigation: Use Material 3 navigation patterns
• Forms: Material 3 text fields with brand color theming

How to Use

1. Install: npm install @mui/material @emotion/react @emotion/styled
2. Create Material 3 theme with brand colors
3. Use Material components with brand token overrides

Design Principles

• High Contrast: Minimum 4.5:1 ratio for accessibility
• Consistent Spacing: Use 8px grid system
• Clear Hierarchy: Distinct visual levels
• Brand Recognition: Red for actions, black/gray for content