helicone/helicone
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
More findings
Verdict
A system exists and mostly gets used, but every deviation is a literal value sitting right next to the token it should have called instead. The unguarded GitHub fetch is the real risk here, a single API hiccup shouldn't be able to take the whole layout down.
Files Rams reviewed
bifrost/app/components/Layout.tsx
bifrost/app/components/auth/AuthLayout.tsx
examples/vercel-ai-sdk-example/src/app/page.tsx
bifrost/app/components/templates/pricing/AvailableDiscounts.tsx
bifrost/app/components/templates/pricing/BaseCard.tsx
bifrost/app/components/templates/pricing/CustomerHighlights.tsx
bifrost/app/components/templates/pricing/EnterpriseCard.tsx
bifrost/app/components/templates/pricing/FreeCard.tsx
bifrost/app/components/templates/pricing/PlansTable.tsx
bifrost/app/components/templates/pricing/PricingComparisonTable.tsx
bifrost/app/components/templates/pricing/PricingComparisonTableV2.tsx
bifrost/app/components/templates/pricing/ProductComparisonTable.tsx
bifrost/app/components/templates/pricing/RequestLogTableV2.tsx
bifrost/app/components/templates/pricing/ScaleCard.tsx
bifrost/app/components/templates/pricing/Slider.tsx
bifrost/app/components/templates/pricing/TeamCard.tsx
bifrost/app/components/templates/pricing/UsageEstimator.tsx
bifrost/app/stats/components/Leaderboard.tsx
bifrost/app/stats/components/SingleUsageChart.tsx
bifrost/app/stats/components/UsageChart.tsx
bifrost/app/agent-course/page.tsx
bifrost/app/blog/[file-path]/layout.tsx
bifrost/app/blog/[file-path]/page.tsx
bifrost/app/changelog/[file-path]/layout.tsx
bifrost/app/changelog/[file-path]/page.tsx
bifrost/app/changelog/page.tsx
bifrost/app/comparison/[comparison]/layout.tsx
bifrost/app/comparison/[comparison]/page.tsx
bifrost/app/contact/page.tsx
bifrost/app/credits/page.tsx
Color
bifrost/app/components/auth/AuthLayout.tsx:11
Auth page left panel uses a raw hex instead of a gray token
The left dashboard-preview panel in `AuthLayout` is set with `bg-[#F8FAFC]`, a literal hex value, while the rest of the file uses Tailwind gray/slate/white utility classes (`bg-white`, `text-gray-600`).
Why it matters
A one-off hex value drifts from the gray scale used everywhere else, so a future palette or dark-mode update has to hunt down this literal instead of updating a shared token.
Fix
Replace hardcoded hex values with the nearest Tailwind gray/slate token already used in the file.
<div className="hidden lg:flex w-1/2 bg-[#F8FAFC] p-8 flex-col justify-between"><div className="hidden lg:flex w-1/2 bg-slate-50 p-8 flex-col justify-between">bifrost/app/components/templates/pricing/CustomerHighlights.tsx:93
Primary tier CTA overrides the Button variant with a hardcoded class
The CTA button already receives `variant={highlight.tier.isPrimary ? "default" : "secondary"}` from the Button component's own variant system, but then adds `className={highlight.tier.isPrimary ? "bg-brand text-white" : ""}` on top, duplicating styling the `default` variant should already provide.
Why it matters
Overriding a variant's own styling with a manual className means the two can drift out of sync: if the `default` variant's colors change later, this one button won't follow, and any theme update needs to be applied in two places instead of one.
Fix
Let the Button variant system own the primary CTA's color instead of re-declaring it with a manual className override.
<Button
variant={highlight.tier.isPrimary ? "default" : "secondary"}
className={
highlight.tier.isPrimary ? "bg-brand text-white" : ""
}
asChild
><Button
variant={highlight.tier.isPrimary ? "default" : "secondary"}
asChild
>Spacing
bifrost/app/components/templates/pricing/AvailableDiscounts.tsx:23
Badge corner radius doesn't match the rounded-lg/md used elsewhere
The four discount badges use `rounded-[3px]`, while the surrounding card uses `rounded-md` and the grid uses `rounded-lg` / `rounded-tr-lg` / `rounded-bl-lg`.
Why it matters
A near-square 3px radius next to lg/md rounded corners in the same card reads as an unintentional mismatch rather than a deliberate contrast, since nothing else in the layout uses a sharp corner.
Fix
Use an existing radius token (rounded-sm or rounded) instead of an arbitrary pixel value to keep corner treatment consistent within the component.
<h3 className="text-sm font-medium bg-[#F1F5F9] w-fit px-[16px] py-[8px] rounded-[3px] text-slate-900"><h3 className="text-sm font-medium bg-[#F1F5F9] w-fit px-[16px] py-[8px] rounded-sm text-slate-900">bifrost/app/components/templates/pricing/AvailableDiscounts.tsx:9
Section heading size set as arbitrary pixel value off the type scale
The "Available discounts" heading uses `text-[36px]` instead of a scale class like `text-4xl` (which Tailwind maps to 36px anyway).
Why it matters
An arbitrary pixel value can't be tracked or bulk-updated the way a scale token can, so a global type-scale change misses this heading and it silently drifts from every other section title.
Fix
Replace arbitrary pixel font sizes with the closest step in the existing Tailwind type scale.
<span className="text-[36px] font-bold text-slate-900"><span className="text-4xl font-bold text-slate-900">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 freeAccessibility
bifrost/app/components/templates/pricing/CustomerHighlights.tsx:82
Customer logo alt text gives screen readers no context
`Image alt={highlight.logoAlt}` renders lowercase brand names like "sunrun" or "qawolf" with no surrounding context about why the logo appears next to the metric and CTA.
Why it matters
A screen reader user hears just a bare company name with no relationship to the metric or tier it's paired with, losing the point of the social-proof card entirely.
Fix
Write alt text that describes the logo's role in context, not just the bare brand name.
<Image
src={highlight.logoSrc}
alt={highlight.logoAlt}
width={1000}
height={50}
/><Image
src={highlight.logoSrc}
alt={`${highlight.logoAlt} logo`}
width={1000}
height={50}
/>UX
bifrost/app/components/Layout.tsx:17
Unhandled GitHub API fetch can crash every page's layout
Layout.tsx calls `fetch("https://api.github.com/repos/helicone/helicone")` and immediately reads `githubResponse.json()` with no try/catch. Since this Layout wraps every route, a GitHub rate-limit response or network timeout throws an unhandled error that takes down the whole page shell, not just the star count in the navbar.
Why it matters
A third-party API hiccup becomes a site-wide outage instead of a missing number, since every page renders through this same Layout component.
Fix
Wrap external fetches in try/catch and fall back to a default value so a dependency failure degrades gracefully instead of crashing the page.
const githubResponse = await fetch(
"https://api.github.com/repos/helicone/helicone"
);
const githubData = await githubResponse.json();
const stars = githubData.stargazers_count;let stars: number | undefined;
try {
const githubResponse = await fetch(
"https://api.github.com/repos/helicone/helicone"
);
const githubData = await githubResponse.json();
stars = githubData.stargazers_count;
} catch {
stars = undefined;
}Typography
Components
Motion
Craft
Working well
- Marking only the middle tier with `isPrimary` and giving it the solid `default` Button variant while the rest stay `secondary` creates one clear focal action per row in CustomerHighlights, avoiding competing CTAs.
- Layout.tsx falls back to a sensible default object for `featuredBlogMetadata` ("Check out our latest blog") when the fetch returns nothing, so NavBar never renders blank or broken on a data miss.
- AvailableDiscounts shares a single grid with `divide-x`/`divide-y` for card separators instead of stacking individual borders per cell, which keeps edges crisp and avoids doubled border lines.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 59/100. This rescore on v0.0.3: 82/100.
This page is an automated design review of helicone/helicone’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.
