Skip to content

Principles

The five rules every other design decision flows from.

  1. 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.
  2. 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.
  3. 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.
  4. Borders, not shadows. Cards, papers, and the app bar all use a 1px hairline divider. MuiPaper has elevation={0} by default.
  5. 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.