t3-oss/create-t3-app
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
More findings
Verdict
Interaction design is ahead of visual system here, hover states and query gating already feel production-ready. The risk is that raw hex gradients and bracket-value overrides get copy-pasted straight into real apps with no token layer to catch them.
Files Rams reviewed
cli/template/extras/src/app/_components/post-tw.tsx
cli/template/extras/src/app/_components/post.tsx
cli/template/extras/src/app/page/base.tsx
cli/template/extras/src/app/page/with-auth-trpc-tw.tsx
cli/template/extras/src/app/page/with-auth-trpc.tsx
cli/template/extras/src/app/page/with-better-auth-trpc-tw.tsx
cli/template/extras/src/app/page/with-better-auth-trpc.tsx
cli/template/extras/src/app/page/with-better-auth-tw.tsx
cli/template/extras/src/app/page/with-better-auth.tsx
cli/template/extras/src/app/page/with-trpc-tw.tsx
cli/template/extras/src/app/page/with-trpc.tsx
cli/template/extras/src/app/page/with-tw.tsx
cli/template/extras/src/pages/index/base.tsx
cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx
cli/template/extras/src/pages/index/with-auth-trpc.tsx
cli/template/extras/src/pages/index/with-better-auth-trpc-tw.tsx
cli/template/extras/src/pages/index/with-better-auth-trpc.tsx
cli/template/extras/src/pages/index/with-better-auth-tw.tsx
cli/template/extras/src/pages/index/with-better-auth.tsx
cli/template/extras/src/pages/index/with-trpc-tw.tsx
cli/template/extras/src/pages/index/with-trpc.tsx
cli/template/extras/src/pages/index/with-tw.tsx
www/src/components/docs/breadCrumbs.tsx
www/src/components/docs/companyList.tsx
www/src/components/docs/introductionTab.tsx
www/src/components/docs/openSourceAppList.tsx
www/src/components/landingPage/ClipboardSelect.tsx
www/src/components/landingPage/cli.tsx
www/src/components/navigation/LanguageSelect.tsx
www/src/components/navigation/OnThisPageLinks.tsx
Typography
cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx:28
Arrow glyph in card headings ties link affordance to font rendering
Both card headings, "First Steps →" and "Documentation →", render the arrow as a raw Unicode `→` character concatenated into the heading text rather than an icon component.
Why it matters
A glyph's stroke weight and baseline shift with whatever font the browser or OS substitutes, so the arrow can look thin, misaligned, or disappear entirely on a different platform, undermining the link affordance it's meant to signal.
Fix
Replace the inline arrow character with an SVG icon or icon-font glyph sized and weighted to match the rest of the icon system.
<h3 className="text-2xl font-bold">First Steps →</h3><h3 className="text-2xl font-bold flex items-center gap-1">First Steps <ArrowRightIcon className="h-5 w-5" aria-hidden /></h3>Color
cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx:19
Hero background gradient uses raw hex stops with no reusable token
The <main> wrapper sets `bg-gradient-to-b from-[#2e026d] to-[#15162c]` as arbitrary Tailwind bracket values instead of a named color from the theme scale. Any other page that wants this same purple-to-navy backdrop has to copy these exact hex strings by hand.
Why it matters
When brand colors live as one-off hex strings instead of a shared value, a rebrand or dark-mode pass means hunting through every file for the literal string, and drift is guaranteed the moment someone copies it slightly wrong.
Fix
Move recurring hex values into Tailwind's theme.colors config and reference them by name so the gradient stays consistent everywhere it's reused.
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]"><main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-brand-900 to-brand-950">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 freeMotion
cli/template/extras/src/pages/index/with-auth-trpc-tw.tsx:74
Sign in/out button transitions every property instead of just background
The auth button uses a bare `transition` class with `hover:bg-white/20`. Tailwind's bare `transition` defaults to `transition-property: all`, animating far more than the background-color change the hover state intends.
Why it matters
Transitioning `all` means any future property added to this button (padding, transform, border) starts animating unintentionally, and it costs more paint work than a targeted transition for no visual benefit.
Fix
Name the specific property being transitioned so the animation stays scoped to the intended visual change.
className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition-colors hover:bg-white/20"Accessibility
Spacing
Components
UX
Craft
Working well
- The two feature-card links, "First Steps →" and "Documentation →", share identical structure, padding, and the same bg-white/10 to hover:bg-white/20 treatment, which reads as one consistent pattern instead of two one-off styles.
- Gating the secret-message query with `enabled: sessionData?.user !== undefined` correctly defers the fetch until session data resolves, avoiding an unauthorized or wasted request on first render.
- The auth button's label flips correctly between 'Sign in' and 'Sign out' based on session state, which is the right pattern for a toggle whose action changes meaning.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 89/100. This rescore on v0.0.3: 92/100.
This page is an automated design review of t3-oss/create-t3-app’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.
