CSS Styling Standards

Core Principles

• Mobile-first design: Start with mobile styles, enhance for larger screens
• Accessibility compliance: Meet WCAG 2.1 AA standards
• Multilingual support: Proper display of accented characters and different writing systems
• Consistent naming: Use BEM methodology for class naming (unless using Mantine)
• Performance optimization: Minimize CSS size and loading time
• Mantine Integration: Use Mantine UI v8 component system for React frontend

Mantine UI v8 Integration

1. Theme Configuration

// frontend/src/theme.ts
import { createTheme, MantineColorsTuple } from '@mantine/core';