Strong systemic discipline eroded by a handful of precise, fixable slip-ups in type scale and color token hygiene. Sub-12px text is the sharpest risk: it degrades legibility for every visitor, not just assistive-tech users.

Files Rams reviewed

src/app/layout.tsx

src/app/page.tsx

src/app/globals.css

src/app/work/knotcms/page.tsx

src/components/CaseStudyMedia.tsx

src/components/Contact.tsx

src/components/ExperienceToolkit.tsx

src/components/Hero.tsx

src/components/HowIWork.tsx

src/components/KnotcmsArchitecture.tsx

src/components/PopIn.tsx

src/components/SectionHead.tsx

src/components/ThemeProvider.tsx

src/components/Work.tsx

src/components/Footer.tsx

src/components/TopBar.tsx

96/100

Accessibility

2 serious

Accessibility·src/app/work/knotcms/page.tsx:240Serious

src/app/work/knotcms/page.tsx:240

Live-dot indicator in FactGrid is color-only with no text alternative

The spec summary in `FactGrid` marks live items with `<span className="live-dot size-1.5 bg-green" aria-hidden />` and green text color. The dot is hidden from assistive tech and no text label like "Live" or "Active" is appended to the `dd` value, so screen readers read the value with no indication of its live status.

Why it matters

Screen reader users get the metric value but miss the live/active status entirely, removing a key piece of product context.

Fix

Add a visually hidden text label alongside the decorative dot so the status is announced without affecting visual layout.

<span className="live-dot size-1.5 bg-green" aria-hidden />
{item.value}

<span className="live-dot size-1.5 bg-green" aria-hidden />
<span className="sr-only">Live: </span>
{item.value}

Accessibility·src/components/CaseStudyMedia.tsx:62Serious

src/components/CaseStudyMedia.tsx:62

Sub-12px text in three components breaks legibility for all users

Three files set text below 12px: `CaseStudyMedia` uses `text-[0.65rem]` (10.4px) on "Missing image" and `text-[0.66rem]` (10.56px) on the figcaption; `Contact` uses `text-[0.6rem]` (9.6px) on the email label; `ExperienceToolkit` uses `text-[0.62rem]` (~9.9px) on the record count and tag rows. All four instances are below the browser minimum for reliable rendering.

Why it matters

Text below 12px renders blurry on non-retina screens and fails legibility for users with any degree of visual impairment.

Fix

Set minimum body copy and label text to 12px (text-xs); use opacity or color to de-emphasize, not size reduction.

<span className="font-mono text-[0.65rem] tracking-[0.14em] text-muted uppercase">
  Missing image
</span>
<span className="font-mono text-[0.72rem] text-fg">
  {src.split("/").pop()}
</span>
...
<figcaption className="font-mono text-[0.66rem] leading-relaxed text-muted">
  {caption}
</figcaption>

<span className="font-mono text-xs tracking-wider text-muted uppercase">
  Missing image
</span>
<span className="font-mono text-xs text-fg">
  {src.split("/").pop()}
</span>
...
<figcaption className="font-mono text-xs leading-relaxed text-muted">
  {caption}
</figcaption>

98/100

Color

1 serious

Design System·src/components/Contact.tsx:63Serious

src/components/Contact.tsx:63

Hardcoded hex literals in Contact bypass the token layer

The email anchor uses `bg-[#f8f6ef]` and `text-[#111111]` as inline Tailwind values; the step list uses `border-[#111111]/25`. The token layer in `globals.css` defines `bg`, `fg`, `border`, and `line` tokens that cover these surfaces. These three literals will drift if the palette changes.

Why it matters

Theme changes or dark-mode additions require hunting down every raw hex instead of updating one token, compounding maintenance cost.

Fix

Replace raw hex literals with the repo's named tokens: `bg-surface`, `text-fg`, and `border-line`.

className="group flex min-w-0 items-center justify-between gap-4 border-2 bg-[#f8f6ef] px-6 py-6 text-[#111111] transition-colors hover:bg-[#111111] hover:text-green"
...
className="grid grid-cols-[2.75rem_1fr] gap-4 border-b py-5 border-[#111111]/25"

className="group flex min-w-0 items-center justify-between gap-4 border-2 bg-surface px-6 py-6 text-fg transition-colors hover:bg-fg hover:text-green"
...
className="grid grid-cols-[2.75rem_1fr] gap-4 border-b py-5 border-line"

Typography

No issues found

Spacing

No issues found

Components

No issues found

Motion

No issues found

UX

No issues found

Craft

No issues found

Working well

The `aria-labelledby` wiring across `CaseSection` (section landmark pointing to its `h2`) and `ExperienceToolkit` (section pointing to `experience-head`) is complete and correct. Screen readers announce each landmark by its real heading with zero redundant `aria-label` strings to maintain.
The skip link is present, keyboard-only via `sr-only` until focused, and routes to `#work`: most portfolios omit this entirely. The focus ring uses `focus:border-border` and `focus:bg-yellow` so it is both visible and on-brand.

Scored September 16, 2026 with Rams Engine v0.0.4 · Engine changelog

This page is an automated design review of gururajj77/dev-me-page’s UI code: 16 files read against 313 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

assistant-ui/assistant-ui94/100 simstudioai/sim94/100 0xsmw/pulse-uptime94/100 vercel/commerce94/100

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.

Or get a design review on every pull requestInstall Rams