mui/material-ui
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 29, 2026
Elevated
Design risk in this codebase.
More findings
Verdict
Surface polish outpaces interaction fundamentals here: fluid type and gradient text look considered while basic keyboard and screen-reader access breaks down. The biggest risk is an icon toggle with no accessible name, a critical gap that shuts out assistive tech users entirely.
Files Rams reviewed
docs/src/pages/premium-themes/onepirate/modules/views/ProductHeroLayout.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Button.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Markdown.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Paper.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Snackbar.tsx
docs/src/pages/premium-themes/onepirate/modules/components/TextField.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Typography.tsx
docs/src/pages/premium-themes/onepirate/modules/views/AppAppBar.tsx
docs/src/pages/premium-themes/onepirate/modules/views/AppFooter.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductCTA.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductHowItWorks.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductValues.tsx
examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx
docs/src/pages/premium-themes/onepirate/modules/components/AppBar.tsx
docs/src/pages/premium-themes/onepirate/modules/components/Toolbar.tsx
docs/src/pages/premium-themes/onepirate/modules/views/AppForm.tsx
docs/src/pages/premium-themes/onepirate/modules/views/ProductSmokingHero.tsx
packages-internal/core-docs/src/AppLayout/components/EditPage.tsx
examples/material-ui-nextjs-ts/src/app/about/page.tsx
examples/material-ui-nextjs-ts/src/app/layout.tsx
examples/material-ui-nextjs-ts/src/app/page.tsx
examples/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx
examples/material-ui-remix-ts/app/src/Layout.tsx
docs/data/material/getting-started/templates/crud-dashboard/components/DashboardLayout.tsx
docs/src/pages/premium-themes/onepirate/ForgotPassword.tsx
docs/src/pages/premium-themes/onepirate/SignIn.tsx
docs/src/pages/premium-themes/onepirate/SignUp.tsx
docs/src/pages/premium-themes/onepirate/modules/form/FormFeedback.tsx
Accessibility
examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx:40
Theme toggle button has no accessible name for screen readers
The IconButton at line 39-42 that flips color scheme renders only an emoji, '🌙' or '🔆', as its content with no aria-label or visually hidden text. A screen reader announces it as an unlabeled button.
Why it matters
Blind and low-vision users relying on assistive tech cannot identify what this control does or that it exists, so the dark/light mode toggle is functionally unusable for them.
Fix
Add an aria-label describing the action so every icon-only control has an accessible name.
<IconButton sx={{ fontSize: 20, px: 1.5 }} onClick={toggleColorScheme}>
{colorScheme === 'light' ? '🌙' : '🔆'}
</IconButton><IconButton
sx={{ fontSize: 20, px: 1.5 }}
onClick={toggleColorScheme}
aria-label={colorScheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
>
{colorScheme === 'light' ? '🌙' : '🔆'}
</IconButton>docs/src/pages/premium-themes/onepirate/modules/components/Button.tsx:11
Button removes focus outline with no replacement indicator
ButtonRoot's `&:active, &:focus` rule sets `boxShadow: 'none'` on top of the base `boxShadow: 'none'`, stripping any focus box-shadow without supplying a replacement outline, ring, or border change.
Why it matters
Keyboard users tabbing through the page lose all visual confirmation of which button is focused, making keyboard navigation unreliable across every screen that uses this shared Button component.
Fix
Never remove a focus indicator without providing a visible replacement such as an outline or ring at 3:1 contrast.
'&:active, &:focus': {
boxShadow: 'none',
},'&:active': {
boxShadow: 'none',
},
'&:focus-visible': {
outline: `2px solid ${theme.palette.primary.main}`,
outlineOffset: 2,
},Components
examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx:50
Chip background hand-builds an rgba string instead of using theme alpha helpers
The Chip's sx prop sets `bgcolor: rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` by string-interpolating the CSS variable channel directly, rather than using MUI's `alpha()` utility or a token-based tint.
Why it matters
A hand-rolled rgba string is easy to typo and doesn't participate in the same tint pattern the rest of the theme could use, so future chips or badges drift toward inconsistent opacity values across the app.
Fix
Use the theme's alpha() helper for transparent tints so every tinted surface derives from the same token math.
bgcolor: `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
color: 'primary.dark',bgcolor: alpha(theme.palette.primary.main, 0.1),
color: 'primary.dark',Get this score on every PR.
Rams reviews each pull request on your repo and posts inline one-click fixes — about a minute per review.
Install Rams freeCraft
examples/material-ui-pigment-css-nextjs-ts/src/app/page.tsx:63
Gradient text fill on 'Material UI' headline trades legibility for effect
The span wrapping "Material UI" inside the h1 applies a `linear-gradient` background with `WebkitBackgroundClip: 'text'` and `WebkitTextFillColor: 'transparent'`, turning solid ink into a two-tone gradient fill for the hero's most important word.
Why it matters
Gradient text lowers contrast in the middle of the fill compared to a solid dark ink, and it reads as a generic template flourish rather than a deliberate brand decision, weakening the hero's primary message clarity.
Fix
Use solid text color and rely on size and weight, not gradient fills, to carry emphasis in a headline.
<span
sx={(theme) => ({
display: 'block',
background: `linear-gradient(145deg, ${
(theme.vars || theme).palette.primary.light
} 5%, ${(theme.vars || theme).palette.primary.dark} 90%)`,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
})}
>
Material UI
</span><span
sx={{
display: 'block',
color: 'primary.dark',
}}
>
Material UI
</span>Typography
Color
Spacing
Motion
UX
Working well
- Button.tsx drives padding and fontSize off `theme.spacing()` and `theme.typography.pxToRem()` for its small and large size variants, keeping every button size on the same scale instead of hardcoding pixel values.
- The hero heading combines `textWrap: 'balance'` with a clamp()-based fluid fontSize, which keeps 'Material UI Pigment CSS' from breaking into an awkward ragged line at in-between viewport widths.
Scored July 29, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of mui/material-ui’s UI code: 30 files read against 258 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; any confirmed critical issue caps it at 59.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
