langfuse/langfuse
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·August 1, 2026
More findings
Verdict
A thoughtful destructive-action hierarchy is undermined by inputs that vanish for screen reader users the moment you focus them. The biggest risk is that the most dangerous action in the app, account deletion, hinges on a field with no accessible label at all.
Files Rams reviewed
web/src/features/monitors/pages/EditMonitorPage.tsx
web/src/features/monitors/pages/ListMonitorsPage.tsx
web/src/components/design-system/ThemeTokens/Layout.tsx
web/src/components/error-page.tsx
web/src/components/layouts/app-layout/variants/AuthenticatedLayout.tsx
web/src/components/layouts/container-page.tsx
web/src/components/layouts/page.tsx
web/src/components/table/resizable-filter-layout.tsx
web/src/components/trace/TracePage.tsx
web/src/components/ui/resizable-split-layout.tsx
web/src/features/annotation-queues/components/shared/AnnotationProcessingLayout.tsx
web/src/features/auth-credentials/components/ResetPasswordPage.tsx
web/src/features/batch-actions/components/BatchActionsSettingsPage.tsx
web/src/features/batch-exports/components/BatchExportsSettingsPage.tsx
web/src/features/datasets/components/DatasetItemDetailPage.tsx
web/src/features/rbac/components/MembershipInvitesPage.tsx
web/src/features/setup/components/SetupPage.tsx
web/src/app/layout.tsx
web/src/features/monitors/pages/NewMonitorPage.tsx
web/src/pages/account/settings/index.tsx
web/src/pages/organization/[organizationId]/settings/index.tsx
web/src/pages/project/[projectId]/dashboards/index.tsx
web/src/pages/project/[projectId]/datasets/[datasetId]/compare/index.tsx
web/src/pages/project/[projectId]/datasets/[datasetId]/experiments/index.tsx
web/src/pages/project/[projectId]/datasets/[datasetId]/items/[itemId]/index.tsx
web/src/pages/project/[projectId]/datasets/[datasetId]/items/index.tsx
web/src/pages/project/[projectId]/datasets/index.tsx
web/src/pages/project/[projectId]/experiments/index.tsx
web/src/pages/project/[projectId]/index.tsx
web/src/pages/project/[projectId]/observations/index.tsx
Accessibility
web/src/pages/account/settings/index.tsx:100
Display name input has no label, only a disappearing placeholder
The Input inside UpdateDisplayName's form (line 97-101) renders with `placeholder={session?.user?.name ?? ""}` and no FormLabel, label element, or aria-label. Placeholder text is not a substitute for a label: it vanishes on focus and many screen readers don't announce it consistently.
Why it matters
A screen reader user tabbing into this field hears no field name, only 'edit text', so they can't confirm what they're about to submit before saving their new display name.
Fix
Add a visible FormLabel or aria-label tied to the input so its accessible name persists regardless of focus state.
<FormItem>
<FormControl>
<Input
placeholder={session?.user?.name ?? ""}
{...field}
className="flex-1"
/>
</FormControl>
<FormMessage />
</FormItem><FormItem>
<FormLabel className="sr-only">Display name</FormLabel>
<FormControl>
<Input
placeholder={session?.user?.name ?? ""}
{...field}
className="flex-1"
/>
</FormControl>
<FormMessage />
</FormItem>web/src/pages/account/settings/index.tsx:214
Destructive delete confirmation input has no accessible label
The email confirmation Input in the Delete Account dialog (line 214) uses `placeholder={userEmail}` with no FormLabel or aria-label. This field gates a destructive, irreversible action, and the instruction text lives only in the DialogDescription, not tied to the input via label or aria-describedby.
Why it matters
A screen reader user reaches an unlabeled field in a destructive flow with no announced purpose, increasing the risk of submitting the wrong value or abandoning account deletion entirely.
Fix
Give the confirmation input a visible or screen-reader-only FormLabel stating what to type, matching the instruction already shown in the dialog description.
<FormItem>
<FormControl>
<Input placeholder={userEmail} {...field} />
</FormControl>
<FormMessage />
</FormItem><FormItem>
<FormLabel className="sr-only">Confirm your email address to delete account</FormLabel>
<FormControl>
<Input placeholder={userEmail} {...field} />
</FormControl>
<FormMessage />
</FormItem>Spacing
web/src/pages/account/settings/index.tsx:165
Delete Account dialog uses a raw pixel width outside the scale
DialogContent for the Delete Account dialog sets `className="sm:max-w-[425px]"`, a one-off arbitrary value instead of a standard Tailwind max-width step or shared dialog size class.
Why it matters
Every dialog that copies this pattern introduces its own pixel value, so dialog widths drift across the app and any future spacing-scale change has to be hunted down file by file instead of updated in one token.
Fix
Replace the arbitrary pixel value with a standard Tailwind max-width step (e.g. sm:max-w-md) shared across dialogs.
<DialogContent className="sm:max-w-[425px]"><DialogContent className="sm:max-w-md">Typography
Color
Components
Motion
UX
Craft
Working well
- The destructive delete button correctly escalates visual weight: the trigger uses variant="destructive-secondary" while the final confirm inside the dialog uses variant="destructive", so the user gets a clear low-to-high commitment signal instead of two identical warnings.
- The dialog branches cleanly between the blocked state (last owner of an organization) and the confirmable delete state, giving users an accurate explanation instead of a single generic error when deletion isn't allowed.
Scored August 1, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 59/100. This rescore on v0.0.3: 59/100.
This page is an automated design review of langfuse/langfuse’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.
