en-dash-consulting/n-dx
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 31, 2026
Verdict
The two Remix fixture routes are stub scaffolding with nothing yet to critique, so the real signal in this pass is analysis.css. The stylesheet mostly reads from a consistent token system (weights, transitions, colors), which makes the two or three spots where a hardcoded number slips in (a bare `500`, a bare `0.1s`, an unscoped `transition: all`) stand out as small but real drift points worth tightening before they get copy-pasted elsewhere.
Files Rams reviewed
packages/sourcevision/tests/fixtures/mixed-go-ts/web/src/components/Header.tsx
packages/sourcevision/tests/fixtures/remix-app/app/routes/_index.tsx
packages/sourcevision/tests/fixtures/remix-app/app/root.tsx
packages/sourcevision/tests/fixtures/remix-app/app/routes/_auth.login.tsx
packages/sourcevision/tests/fixtures/remix-app/app/routes/_auth.tsx
packages/sourcevision/tests/fixtures/remix-app/app/routes/users.$id.tsx
packages/web/src/viewer/index.html
packages/web/src/viewer/styles/analysis.css
packages/web/src/viewer/styles/badges.css
packages/web/src/viewer/styles/branding.css
packages/web/src/viewer/styles/breadcrumb.css
packages/web/src/viewer/styles/call-graph-explorer.css
packages/web/src/viewer/styles/cards.css
packages/web/src/viewer/styles/cli-timeout.css
packages/web/src/viewer/styles/commands.css
packages/web/src/viewer/styles/components.css
packages/web/src/viewer/styles/copy-link.css
packages/web/src/viewer/styles/crash-recovery.css
packages/web/src/viewer/styles/degradation-banner.css
packages/web/src/viewer/styles/deployed.css
packages/web/src/viewer/styles/detail.css
packages/web/src/viewer/styles/faq.css
packages/web/src/viewer/styles/feature-toggles.css
packages/web/src/viewer/styles/forms.css
packages/web/src/viewer/styles/graph.css
packages/web/src/viewer/styles/hench-config.css
packages/web/src/viewer/styles/hench-templates.css
packages/web/src/viewer/styles/index.css
packages/web/src/viewer/styles/integration-config.css
packages/web/src/viewer/styles/layout.css
Spacing
packages/web/src/viewer/styles/analysis.css:92
History entry hover uses a one-off 0.1s timing instead of the shared token
`.rex-analysis-history-entry` sets `transition: background 0.1s`, while the sibling `.rex-analysis-tab` in the same file uses `transition: all var(--transition-normal)` for its hover state. Two adjacent components in the same tab/history UI now animate hover feedback at different, disconnected speeds.
Why it matters
When hover timing differs between adjacent interactive elements in the same panel, the interface feels inconsistent even if a user can't articulate why: one control feels 'snappier' than its neighbor for no functional reason, and every future component that copies this rule locks in the drift.
Fix
Replace the hand-typed duration with the shared transition token used elsewhere in the file.
transition: background 0.1s;transition: background var(--transition-normal);Components
packages/web/src/viewer/styles/analysis.css:108
History event label hardcodes font-weight, breaking the type token scale
`.rex-analysis-history-event` sets `font-weight: 500` directly, while every other weight in this file (`.rex-analysis-tab`, `.rex-analysis-tab.active`) reads from `var(--weight-medium)` or `var(--weight-semibold)`. This one rule pulls its value from a bare number instead of the shared scale.
Why it matters
If the weight scale is ever retuned (e.g. `--weight-medium` moves from 500 to 450 for a lighter UI pass), this hardcoded value silently falls out of sync with every other medium-weight element, and nobody notices until the UI looks inconsistent side by side.
Fix
Reference the existing weight token instead of a literal number.
font-weight: 500;font-weight: var(--weight-medium);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
packages/web/src/viewer/styles/analysis.css:43
Tab button transitions every property instead of just color and background
The `.rex-analysis-tab` button uses `transition: all var(--transition-normal)`. Its actual state changes are limited to `color` and `background` (seen in the `:hover` and `.active` rules), so `all` also animates properties like `border`, `padding`, or `flex` if they ever shift from a future style change or JS-driven layout tweak, producing animation nobody intended.
Why it matters
Unscoped transitions make future style edits unpredictable: a developer adding an unrelated property to this class inherits an animation they didn't ask for, and debugging why something 'slides' becomes a hunt through cascade rules instead of a one-line read.
Fix
Scope the transition to the specific properties that actually change (color, background) instead of animating all properties.
transition: all var(--transition-normal);transition: color var(--transition-normal), background var(--transition-normal);Accessibility
Typography
Color
UX
Craft
Working well
- The `.rex-analysis-tab.active` state uses `color-mix(in srgb, var(--accent) 12%, transparent)` plus a weight bump to `var(--weight-semibold)` instead of introducing a new color for the selected state. This gives clear selected-tab feedback while staying inside the existing accent token, which is the right way to add emphasis without expanding the palette.
- The Remix fixture route in `root.tsx` is a minimal static shell with no interactive elements, styling, or real content, so there's nothing in its current form for the design layer to misfire on.
- The `_auth.login.tsx` fixture route similarly renders a static, non-interactive placeholder, leaving no rendered UI surface to critique at this stage.
Scored July 31, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of en-dash-consulting/n-dx’s UI code: 30 files read against 291 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.
