angular/components
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 29, 2026
More findings
Verdict
A token-disciplined system stumbles at the interaction layer, not the structure. Keyboard focus, hover motion, and mobile viewport math all need recalibration before this reads as fully considered.
Files Rams reviewed
docs/src/app/pages/component-category-list/component-category-list.html
docs/src/app/pages/component-category-list/component-category-list.scss
docs/src/app/pages/component-sidenav/component-sidenav.html
docs/src/app/pages/component-sidenav/component-sidenav.scss
docs/src/app/pages/component-viewer/component-api.html
docs/src/app/pages/component-viewer/component-styling.html
docs/src/app/pages/component-viewer/component-viewer.scss
docs/src/app/pages/component-viewer/token-table.html
docs/src/app/pages/guide-viewer/guide-viewer.scss
docs/src/app/pages/homepage/homepage.html
docs/src/app/pages/homepage/homepage.scss
docs/src/app/pages/component-page-header/component-page-header.html
docs/src/app/pages/component-page-header/component-page-header.scss
docs/src/app/pages/component-sidenav/component-nav.html
docs/src/app/pages/component-viewer/component-api.scss
docs/src/app/pages/component-viewer/component-examples.html
docs/src/app/pages/component-viewer/component-overview.html
docs/src/app/pages/component-viewer/component-viewer.html
docs/src/app/pages/component-viewer/token-table.scss
docs/src/app/pages/guide-list/guide-list.html
docs/src/app/pages/guide-list/guide-list.scss
docs/src/app/pages/guide-viewer/guide-viewer.html
docs/src/app/pages/not-found/not-found.html
docs/src/app/pages/not-found/not-found.scss
docs/scenes/src/app/scenes/table/table-scene.html
docs/src/app/shared/example-viewer/example-viewer.html
docs/src/app/shared/footer/footer.scss
docs/src/app/shared/navbar/navbar.html
docs/src/app/shared/navbar/navbar.scss
docs/src/app/shared/support/support.html
Accessibility
docs/src/app/pages/homepage/homepage.scss:218
Carousel items lose focus outline with no replacement indicator
`[carousel-item]:hover, [carousel-item]:focus` sets `outline: none` with nothing added in its place. Hover and focus are collapsed into the same rule, but focus is reached by keyboard and hover by mouse, and only the mouse path has a visual affordance built in elsewhere.
Why it matters
A keyboard user tabbing through the carousel gets no visible indication of which item is focused, so they can't tell what they're about to activate.
Fix
Keep `outline: none` for `:hover` only and give `:focus` (or `:focus-visible`) its own visible ring.
[carousel-item]:hover,
[carousel-item]:focus {
outline: none;[carousel-item]:hover {
outline: none;
}
[carousel-item]:focus-visible {
outline: 2px solid var(--mat-sys-outline);
outline-offset: 2px;Spacing
docs/src/app/pages/guide-viewer/guide-viewer.scss:30
100vh on TOC/content wrapper misjudges real viewport on mobile Safari
`.docs-guide-toc-and-content` sets `min-height: 100vh` to keep the footer pinned down while content loads, per the adjacent comment. On mobile Safari and Chrome, 100vh is calculated against the viewport before the address bar and toolbar collapse, so the element reserves more height than is actually visible and the footer or trailing content can end up partly hidden behind browser chrome on load.
Why it matters
On mobile, users landing on a guide page can see the layout jump or clip near the browser toolbar, undermining the exact stability this min-height was added to guarantee.
Fix
Use the dvh unit (with a vh fallback) so min-height tracks the real visible viewport on mobile browsers.
min-height: 100vh;min-height: 100vh;
min-height: 100dvh;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 freeMotion
docs/src/app/pages/homepage/homepage.scss:176
Featured component card image zooms too aggressively on hover
`.docs-featured-components-carousel-item:hover img` and `:focus img` scale the image to `scale(1.1)`, a 10% zoom inside a container capped at `max-height: 200px` with `overflow: hidden`.
Why it matters
A 10% zoom on a small card image reads as a jarring jump rather than a subtle hover cue, and it also crops more of the image than a restrained hover treatment would.
Fix
Use a subtler scale (around 1.03-1.05) for card hover states to signal interactivity without visual jolt.
&:hover, &:focus {
img {
transform: scale(1.1);
}
}&:hover, &:focus {
img {
transform: scale(1.04);
}
}Typography
Color
Components
UX
Craft
Working well
- Responsive width and padding values throughout the file derive from shared SCSS constants like `constants.$content-padding-guides-side` and `constants.$small-breakpoint-width` instead of magic numbers, keeping breakpoint behavior centralized and easy to update in one place.
- The comment above `min-height: 100vh` on `.docs-guide-toc-and-content` explains the intent (keeping the footer pinned and preventing layout jump while loading) directly in the code, which makes the tradeoff easy for future maintainers to evaluate rather than guess at.
- The mobile-only logo and header display toggles use a single media query keyed to a named breakpoint rather than scattered one-off overrides, which keeps the responsive logic legible.
Scored July 29, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of angular/components’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.
