0xsmw/pulse-uptime
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
More findings
Verdict
Solid semantic bones undercut by scale drift: a hand-rolled grid formula and arbitrary 13px text sit right next to well-structured dl/dt/dd markup. Biggest risk is the bespoke stats grid setting a precedent for bypassing the layout scale elsewhere.
Files Rams reviewed
app/(auth)/join/[token]/page.tsx
app/(auth)/onboarding/page.tsx
app/(dashboard)/incidents/[incidentId]/page.tsx
app/(dashboard)/incidents/page.tsx
app/(dashboard)/incidents/reports/[reportId]/page.tsx
app/(dashboard)/incidents/reports/page.tsx
app/(dashboard)/layout.tsx
app/(dashboard)/monitors/[monitorId]/page.tsx
app/(dashboard)/page.tsx
app/(settings)/settings/layout.tsx
app/(settings)/settings/status-page/page.tsx
app/(settings)/settings/system/page.tsx
app/(settings)/settings/team/page.tsx
app/cli/authorize/page.tsx
app/docs/cli/page.tsx
app/layout.tsx
app/status/layout.tsx
app/status/reports/[reportId]/page.tsx
app/(auth)/layout.tsx
app/(auth)/login/page.tsx
app/(dashboard)/dependencies/[dependencyId]/page.tsx
app/(dashboard)/help/page.tsx
app/(dashboard)/incidents/reports/new/page.tsx
app/(settings)/settings/access/page.tsx
app/(settings)/settings/account/page.tsx
app/(settings)/settings/monitors/page.tsx
app/(settings)/settings/notifications/page.tsx
app/(settings)/settings/page.tsx
app/(settings)/settings/security/page.tsx
app/status/[group]/page.tsx
Typography
app/(dashboard)/incidents/[incidentId]/page.tsx:51
Arbitrary 13px text size repeated across three elements instead of a scale step
The back link "Incidents", the stat values in the <dl> (Started/Resolved/Duration), and the "Opening Failure" cause description all use text-[13px], an arbitrary value that sits between the type scale's text-xs (12px) and text-sm (14px). None of these are the same semantic role, yet they all reach for the same one-off number.
Why it matters
Every new component that needs 'small body text' now has to guess between text-xs, text-sm, or this undocumented 13px, so the type scale drifts wider with each addition and the page loses a single source of truth for text sizing.
Fix
Replace arbitrary text-[13px] with the nearest scale step (text-sm) so all small text traces back to one token.
className="-mt-1 mb-4 inline-flex items-center gap-1.5 py-2 text-[13px] text-[var(--fg-muted)] hover:text-[var(--fg)]"className="-mt-1 mb-4 inline-flex items-center gap-1.5 py-2 text-sm text-[var(--fg-muted)] hover:text-[var(--fg)]"app/(dashboard)/incidents/[incidentId]/page.tsx:56
Negative letter-spacing on text-xl heading adds drift with no visible benefit
The monitor name h1 ("{incident.monitorName}") uses tracking-[-0.02em] on a text-xl heading. Negative tracking is meant to correct optical spacing at larger display sizes; at text-xl the effect is imperceptible and the value is arbitrary rather than a scale token.
Why it matters
An untracked one-off value on a heading that other page headings don't share means the type system has no single rule for when tracking applies, making it unclear whether the next h1 built elsewhere should copy this number or skip it.
Fix
Drop arbitrary tracking on sizes where it has no visible effect and reserve tracking adjustments for the largest display headings only.
<h1 className="font-semibold text-xl tracking-[-0.02em]"><h1 className="font-semibold text-xl">Spacing
app/(dashboard)/incidents/[incidentId]/page.tsx:69
Bespoke auto-fit grid formula bypasses the layout scale for stats row
The stats <dl> wrapping Started/Resolved/Duration uses grid-cols-[repeat(auto-fit,minmax(160px,1fr))], a one-off arbitrary grid definition instead of a standard step like grid-cols-3 or sm:grid-cols-3.
Why it matters
A hand-tuned pixel threshold (160px) that lives only in this file means the next stats block elsewhere in the dashboard will invent its own breakpoint math instead of reusing a shared layout pattern, so column behavior diverges page to page.
Fix
Use a fixed grid-cols step at each breakpoint so the layout scale stays consistent across dashboard sections.
<dl className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] overflow-hidden rounded-xl border border-[var(--border-strong)] shadow-[var(--card-shadow)]"><dl className="mb-6 grid grid-cols-1 overflow-hidden rounded-xl border border-[var(--border-strong)] shadow-[var(--card-shadow)] sm:grid-cols-3">Accessibility
Color
Components
Motion
UX
Craft
Working well
- The empty-catch around the admin-count query is documented in intent as a readiness check and routes into a designed fallback rather than crashing silently, which is the right way to handle an edge state.
- Deciding notFound() only after both the report and settings promises settle via Promise.allSettled prevents a slow settings fetch from masking a real 404, and the choice is documented inline.
- The stats <dl> correctly pairs dt/dd for Started, Resolved, and Duration instead of styling generic divs, giving assistive tech real structure to navigate rather than a visually-only layout.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 22, 2026: 86/100. This rescore on v0.0.3: 94/100.
This page is an automated design review of 0xsmw/pulse-uptime’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; 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.
