openstatushq/openstatus
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
Low
Design risk in this codebase.
More findings
Verdict
A disciplined table undone by two shortcuts: color-only status and an arbitrary dialog height. Fix the status square's redundant, hover-only signal first, since it's the one gap some users can't work around.
Files Rams reviewed
apps/dashboard/src/app/(dashboard)/status-pages/[id]/components/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/components/page.tsx
apps/web/src/app/(landing)/play/cdn-checker/components/monitor-cta.tsx
apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx
apps/web/src/app/(landing)/play/cdn-checker/components/summary-card.tsx
apps/dashboard/src/app/(dashboard)/agents/page.tsx
apps/dashboard/src/app/(dashboard)/chat/layout.tsx
apps/dashboard/src/app/(dashboard)/cli/page.tsx
apps/dashboard/src/app/(dashboard)/layout.tsx
apps/dashboard/src/app/(dashboard)/monitors/[id]/incidents/layout.tsx
apps/dashboard/src/app/(dashboard)/monitors/[id]/incidents/page.tsx
apps/dashboard/src/app/(dashboard)/monitors/[id]/layout.tsx
apps/dashboard/src/app/(dashboard)/monitors/create/page.tsx
apps/dashboard/src/app/(dashboard)/overview/layout.tsx
apps/dashboard/src/app/(dashboard)/overview/page.tsx
apps/dashboard/src/app/(dashboard)/settings/(list)/page.tsx
apps/dashboard/src/app/(dashboard)/settings/account/page.tsx
apps/dashboard/src/app/(dashboard)/settings/general/layout.tsx
apps/dashboard/src/app/(dashboard)/settings/general/page.tsx
apps/dashboard/src/app/(dashboard)/settings/integrations/layout.tsx
apps/dashboard/src/app/(dashboard)/settings/integrations/page.tsx
apps/dashboard/src/app/(dashboard)/settings/private-locations/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/history/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/page.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/[reportId]/page.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/layout.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/status-reports/page.tsx
apps/dashboard/src/app/(dashboard)/status-pages/[id]/subscribers/page.tsx
Accessibility
apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx:26
Cache status square communicates state through color and hover title only
CacheStatusIndicator renders a bare 4x4 div colored via CACHE_STATUS_COLOR[status], with the only textual description living in a `title` attribute (CACHE_STATUS_DESCRIPTION[status]). Title tooltips don't fire on touch and aren't exposed to most screen reader navigation modes, so the only accessible signal for 'hit', 'miss', 'stale', etc. per row is the square's color.
Why it matters
A screen reader user hits this element with no announced role or text and gets nothing; a colorblind user can't distinguish status colors from each other. In a diagnostic tool like a CDN checker, that's the core data point going unread.
Fix
Pair the color swatch with visually hidden text or an aria-label so status is announced regardless of color perception or input method.
return (
<div
className={cn("size-4", CACHE_STATUS_COLOR[status])}
title={CACHE_STATUS_DESCRIPTION[status]}
/>
);return (
<div
className={cn("size-4", CACHE_STATUS_COLOR[status])}
title={CACHE_STATUS_DESCRIPTION[status]}
role="img"
aria-label={CACHE_STATUS_DESCRIPTION[status]}
/>
);Spacing
apps/web/src/app/(landing)/play/cdn-checker/components/results-table.tsx:80
Details dialog height is an arbitrary viewport value outside the sizing scale
DialogContent in the CDN cache details modal uses `max-h-[90vh]` as an arbitrary bracket value rather than a scale token, alongside `rounded-none!` forcing off the design system's default dialog radius.
Why it matters
One-off viewport-relative values drift from whatever sizing scale the rest of the dialog system uses, so this modal will behave differently from every other Dialog in the app if the scale changes later, and maintenance cost grows as more one-offs accumulate.
Fix
Use the design system's dialog size tokens/utilities instead of arbitrary bracket values so all dialogs resize consistently.
<DialogContent className="max-h-[90vh] overflow-x-hidden overflow-y-auto rounded-none! font-mono sm:max-w-5xl"><DialogContent className="max-h-[85vh] overflow-x-hidden overflow-y-auto font-mono sm:max-w-5xl">Typography
Color
Components
Motion
UX
Craft
Working well
- The paywall Note pairs the icon with explicit text ('This is a paid feature...') rather than relying on color alone, keeping the gating state legible for all users, a pattern the cache status indicator should borrow.
- Using tabular-nums on the cache ratio and uncached-region counts keeps digits aligned instead of jittering as data refreshes, exactly where a user is scanning a live-updating number.
- The uncached regions list truncates at 6 with an explicit '+N more' count rather than silently cutting off data, so nothing is lost without a trace.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 82/100. This rescore on v0.0.3: 96/100.
This page is an automated design review of openstatushq/openstatus’s UI code: 30 files read against 309 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.
