vuejs/core
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 29, 2026
More findings
Verdict
Custom properties do the theming work, but nobody checked what happens at the edges: dark mode, focus, contrast. The toolbar looks intentional yet fails the keyboard and low-vision users who rely on its core controls most.
Files Rams reviewed
packages-private/sfc-playground/src/App.vue
packages-private/sfc-playground/src/Header.vue
packages-private/sfc-playground/src/VersionSelect.vue
packages-private/sfc-playground/src/icons/Sun.vue
packages-private/dts-test/componentInstance.test-d.tsx
packages-private/dts-test/componentTypeExtensions.test-d.tsx
packages-private/dts-test/functionalComponent.test-d.tsx
packages-private/dts-test/tsx.test-d.tsx
packages-private/sfc-playground/src/download/template/index.html
packages-private/sfc-playground/src/icons/Copy.vue
packages-private/sfc-playground/src/icons/Download.vue
packages-private/sfc-playground/src/icons/GitHub.vue
packages-private/sfc-playground/src/icons/Moon.vue
packages-private/sfc-playground/src/icons/Reload.vue
packages-private/sfc-playground/src/icons/Share.vue
packages-private/template-explorer/style.css
packages/vue/__tests__/e2e/hydration-strat-custom.html
packages/vue/__tests__/e2e/hydration-strat-interaction.html
packages/vue/__tests__/e2e/hydration-strat-media.html
packages/vue/__tests__/e2e/hydration-strat-visible.html
packages/vue/examples/classic/commits.html
packages/vue/examples/classic/grid.html
packages/vue/examples/classic/markdown.html
packages/vue/examples/classic/svg.html
packages/vue/examples/classic/todomvc.html
packages/vue/examples/classic/tree.html
packages/vue/examples/composition/commits.html
packages/vue/examples/composition/grid.html
packages/vue/examples/composition/markdown.html
packages/vue/examples/composition/svg.html
Color
packages-private/sfc-playground/src/Header.vue:224
White label text on green toggle background fails contrast for DEV/SSR state
The .toggle-prod span ("DEV"/"PROD") and the enabled states of .toggle-ssr and .toggle-autosave ("SSR ON", "AutoSave ON") render white text (#fff) on var(--green). At ~2.97:1 this sits well under WCAG AA's 4.5:1 minimum for 12px text, so the label is one of the hardest-to-read elements in the header.
Why it matters
Users scanning the header for build mode or SSR/autosave state get a washed-out label that's hard to read at a glance, and the failure hits every state toggle in the toolbar, not just one.
Fix
Darken the green background or switch the label text to a near-black color so contrast clears 4.5:1 at this font size.
.toggle-prod span {
background: var(--green);
color: #fff;
}.toggle-prod span {
background: var(--green);
color: #0d0d0d;
}packages-private/sfc-playground/src/Header.vue:90
Nav icon color token never redefined for dark mode, dropping contrast
The `nav` block sets `--btn: #666` for icon and button color, but no `.dark nav` override redefines it. Against the dark nav background (~#1a1a1a), --btn computes to roughly 2.8:1, under the button/icon contrast used for GitHub link and toggle icons in Header.vue.
Why it matters
Anyone using dark mode gets low-contrast icons in the primary navigation, making the GitHub link and control icons harder to spot and click confidently.
Fix
Add a `.dark nav { --btn: <lighter gray>; }` override so icon contrast holds against the dark background.
nav {
--bg: #fff;
--btn: #666;
}nav {
--bg: #fff;
--btn: #666;
}
.dark nav {
--btn: #aaa;
}Accessibility
packages-private/sfc-playground/src/App.vue:197
Global button reset strips focus outline with no replacement for keyboard users
The global `button` reset in App.vue sets `outline: none` with no `:focus-visible` style anywhere nearby to restore an indicator. This rule applies to every button in the playground, including the prod/SSR/autosave toggles and icon actions in Header.vue.
Why it matters
Keyboard users tabbing through the toolbar get no visual confirmation of which control is focused, so they lose track of position and can trigger the wrong toggle.
Fix
Restore a visible focus indicator with a `:focus-visible` rule instead of removing outline outright.
button {
border: none;
outline: none;
cursor: pointer;
margin: 0;
background-color: transparent;
}button {
border: none;
cursor: pointer;
margin: 0;
background-color: transparent;
}
button:focus-visible {
outline: 2px solid var(--green);
outline-offset: 2px;
}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 freeTypography
packages-private/sfc-playground/src/App.vue:184
Body text set at 13px sits below comfortable reading size app-wide
The `body` rule in App.vue sets `font-size: 13px` as the base size for the entire playground shell, which cascades to every unstyled text node outside the editor panes.
Why it matters
Running the whole app a point below the 14px comfortable minimum for UI copy makes labels and secondary text harder to read, especially for users on lower-density displays.
Fix
Raise the base body font size to 14px so default text meets a comfortable reading minimum.
body {
font-size: 13px;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
--base: #444;
--nav-height: 50px;
}body {
font-size: 14px;
font-family:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
--base: #444;
--nav-height: 50px;
}Spacing
Components
Motion
UX
Craft
Working well
- The active version in VersionSelect is marked with both a distinct color and a real `.active` class tied to selection state, so the selected item's text still communicates which version is current even without relying on color alone.
- Hover feedback on `.links button` and `.github` is defined through a single shared selector in Header.vue, so every nav icon gets the same interactive affordance instead of one-off hover rules drifting per element.
- VersionSelect shows a "loading versions..." state instead of rendering blank while the fetch is in flight, which keeps the control from reading as broken during the wait.
Scored July 29, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of vuejs/core’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.
