nuxt/nuxt
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
28 files reviewed·August 1, 2026
More findings
Verdict
One critical contrast bug undermines an otherwise minimal, restrained UI. The version badge's text is nearly invisible against its own fill, the single fix that would matter most here.
Files Rams reviewed
packages/nuxt/src/app/components/error-404.vue
packages/nuxt/src/app/components/error-500.vue
packages/nuxt/src/app/components/nuxt-error-boundary.vue
packages/nuxt/src/app/components/nuxt-error-page.vue
packages/nuxt/src/app/components/nuxt-root.vue
packages/nuxt/src/app/components/nuxt-time.vue
packages/nuxt/src/app/components/welcome.vue
packages/nuxt/src/pages/runtime/app.vue
packages/nuxt/test/components-fixture/components/client/WithClientOnlySetup.vue
packages/nuxt/test/imports-preset-fixture/app/app.vue
packages/nuxt/test/pages-fixture/pages/index.vue
playground/app/app.vue
packages/nuxt/test/components-fixture/components/HelloWorld.vue
packages/nuxt/test/components-fixture/components/Nuxt3.client.vue
packages/nuxt/test/components-fixture/components/Nuxt3.server.vue
packages/nuxt/test/components-fixture/components/client/ComponentWithProps.vue
packages/nuxt/test/components-fixture/components/global/Glob.vue
packages/nuxt/test/components-fixture/components/islands/Isle.vue
packages/nuxt/test/components-fixture/components/parent-folder/index.server.vue
packages/nuxt/test/components-fixture/components/same-name/same/Same.vue
packages/nuxt/test/components-fixture/components/some-glob.global.vue
packages/nuxt/test/components-fixture/components/some.island.vue
packages/ui-templates/templates/error-404/index.html
packages/ui-templates/templates/loading/index.html
packages/ui-templates/index.html
packages/ui-templates/templates/error-500/index.html
packages/ui-templates/templates/spa-loading-icon/index.html
packages/ui-templates/templates/welcome/index.html
Color
packages/nuxt/src/app/components/welcome.vue:55
Version badge text is nearly invisible against its own fill
The version badge "5.0.0-0" in welcome.vue renders text-[#00DC82] on a bg-[#00DC42]/10 fill, both drawn from the same green hue at a whisper of opacity. That computes to 1:1, and the badge sits at 12px (14px on desktop), well under the size where low contrast could be excused.
Why it matters
Text this close in luminance to its own background is unreadable for low-vision users and marginal for everyone else, and a version number is exactly the kind of label a developer needs to actually read at a glance.
Fix
Reuse the text-green-700/bg-green-50 pairing this same file already applies to the <NuxtWelcome/> and app.vue inline tags, since it sits in the same brand-green family and is proven to pass contrast elsewhere in the page.
<span class="bg-[#00DC42]/10 border border-[#00DC42]/50 font-mono font-semibold group-hover:bg-[#00DC42]/15 group-hover:border-[#00DC42] inline-block leading-none px-2 py-1 rounded sm:px-2.5 sm:py-1.5 sm:text-[14px] text-[#00DC82] text-[12px]">5.0.0-0</span><span class="bg-green-50 border border-green-600/20 font-mono font-semibold inline-block leading-none px-2 py-1 rounded sm:px-2.5 sm:py-1.5 sm:text-[14px] text-green-700 text-[12px]">5.0.0-0</span>Accessibility
Typography
Spacing
Components
Motion
UX
Craft
Working well
- Every icon-only social link in the footer (GitHub, Discord, X, Bluesky, LinkedIn) carries a sr-only span naming the destination, so screen reader users get a real accessible name instead of a mystery icon.
- The stack trace injection uses escapeHtml before interpolating into the span markup, correctly preventing XSS from error stack content that could contain user-influenced paths.
- Using tabular-nums on the status code heading is exactly right: the number never shifts width even though it's the most visually dominant element on the page.
- This is a compiler test fixture, not user-facing UI, so design/UX rules don't meaningfully apply.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 29, 2026: 59/100. This rescore on v0.0.3: 59/100.
This page is an automated design review of nuxt/nuxt’s UI code: 28 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
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.
