Principles¶
The five rules every other design decision flows from.
- Flat, not metallic. "Metallic gray" is the inspiration, not the rendering. No gradients, no shadows, no shimmer. Surface separation is conveyed by a hairline border and a single alt-surface fill.
- One accent. Teal carries primary action. Secondary actions are outlined or text-only. Semantic colors (success, warning, error, info) are muted enough not to compete with the teal.
- Density over breathing room. Operational software shows rosters and schedules with many rows. The base type size is 14px; tables are MUI
size="small"by default. - Borders, not shadows. Cards, papers, and the app bar all use a 1px hairline divider.
MuiPaperhaselevation={0}by default. - Portuguese for end users, English for code. Per the language policy. User-facing copy lives in
frontend/src/i18n/locales/; identifiers, codes, and developer-facing strings stay in English.