Design System¶

The AtiFLOW MTS Tablet design system is built on Material UI (MUI) v7 with a custom theme defined in src/theme.ts. All design tokens are applied globally via ThemeProvider in App.tsx.

Colour Palette¶

Primary Brand Colours¶

The old TabletHeader AppBar has been replaced by TabletSidebar. There is no fixed top app bar in the current layout.

Background Colours¶

Text Colours¶

Status & Semantic Colours¶

WIP Inventory Status Colours¶

Request Status Chip Colours¶

Typography¶

Font Families¶

Three font families are used:

Fonts are loaded via CSS imports in src/index.css.

Type Scale (MUI overrides)¶

Custom Typography in Components¶

Many components use inline sx typography for pixel-perfect density:

Spacing System¶

MUI's default 8px grid is used throughout. Common spacing values:

Responsive Breakpoints¶

MUI's default breakpoint scale is used throughout. All responsive sx values follow the object syntax:

// Example — column count changes at md
gridTemplateColumns: { xs: '1fr 110px', md: '1fr 155px 80px 110px' }

The sidebar switches from permanent to a temporary Drawer below md. Below md, a hamburger icon appears in a top bar inside the content card.

Border Radius¶

Touch Targets¶

All interactive elements meet the 44px minimum touch target (WCAG 2.1 AA) for gloved-hand industrial usage, enforced via MUI theme overrides:

MuiButton: { styleOverrides: { root: { minHeight: 44 } } }
MuiTab:    { styleOverrides: { root: { minHeight: 44 } } }

Note: Inline IconButton components within dense list rows (e.g. action buttons in the inventory list) use width: 36, height: 36. This is intentional in tight-fit row contexts. Full-width action buttons always meet 44px.

Elevation & Shadow¶

MUI's elevation system is used sparingly:

MUI Component Overrides Summary¶

From src/theme.ts:

MuiCssBaseline: {
  body: { backgroundColor: '#F5F7F9', overscrollBehavior: 'none' }
}
MuiButton: {
  textTransform: 'none',
  fontWeight: 600,
  letterSpacing: '0.02em',
  borderRadius: 6,
  minHeight: 44,
  containedPrimary: { boxShadow: 'none' }
}
MuiOutlinedInput: {
  fontSize: '0.9375rem',
  fieldset borderColor: '#DDE1E6',
  input padding: '12px 14px'
}
MuiChip: {
  borderRadius: 4,
  fontWeight: 500
}
MuiTab: {
  textTransform: 'none',
  fontWeight: 600,
  fontSize: '0.875rem',
  minHeight: 44
}
MuiDialog paper: {
  borderRadius: 10
}

Iconography¶

All icons are from @mui/icons-material (Material Icons). Key icon-to-concept mapping:

Dark Mode¶

The application does not support dark mode. The login page uses a dark background (TOPBAR_BG = '#263238') with a semi-transparent glass card, but this is a fixed login screen style, not a theme toggle.