Expert design reviews
on every PR.

Rams catches design issues in your code before they ship. Spacing, hierarchy, accessibility, and more, directly in your GitHub workflow.

rams-design-review bot
acme/web-app #42 · Update pricing page
74/100 · 8 files · 12.4s

Button group uses identical styling for primary and secondary actions — both "Get Started" and "Learn More" are filled white buttons at the same size, so there's no visual hierarchy between the conversion action and the informational one.

Suggested change
- <button className="px-6 py-3 text-black bg-white rounded-lg">Learn More</button>
+ <button className="px-6 py-3 text-white rounded-lg border border-neutral-700">Learn More</button>
Apply suggestionAdd suggestion to batch

Stats section uses hardcoded hex colorsstyle={{ color: '#22c55e' }} bypasses the design system. When you change your theme or add dark mode, these values won't update.

Suggested change
- <span style={{ color: '#22c55e' }}>+12%</span>
+ <span className="text-emerald-500">+12%</span>
Apply suggestionAdd suggestion to batch

Feature grid cards are visually identical — all six cards share the same weight, color, and spacing. Nothing draws the eye to any single card, so users scan headings without absorbing content. Vary icon color or highlight one card to create an entry point.

3 issues with inline suggestions
2 more on changed files
Rams · Automated Design Reviews

How it works

Install the GitHub App, select your repos, and every pull request gets reviewed automatically. No config files, no CI setup, no workflow changes.

1

Install the Rams GitHub App

2

Select which repos to review

3

Open a PR and get a design review

Install Rams

From accessibility to
visual design

Over a hundred rules across 8 categories. Accessibility, color, typography, spacing, components, UX, motion, and AI-generated slop detection. Built from how senior design engineers actually review code, not how linters check syntax.

Alt textFocus indicatorsTouch targetsContrast ratiosKeyboard navScreen reader labels
Alt textFocus indicatorsTouch targetsContrast ratiosKeyboard navScreen reader labels
Color tokensOne gray scaleDark modePalette limitsSemantic colorsContrast on backgrounds
Color tokensOne gray scaleDark modePalette limitsSemantic colorsContrast on backgrounds
Type scaleFont smoothingTabular numsLine-heighttext-balanceLetter spacing
Type scaleFont smoothingTabular numsLine-heighttext-balanceLetter spacing
Spacing scaleBorder radiusOptical alignmentGap over marginz-index scaleConcentric radii
Spacing scaleBorder radiusOptical alignmentGap over marginz-index scaleConcentric radii
Loading statesForm validationHit areasButton semanticsInput font sizeEmpty states
Loading statesForm validationHit areasButton semanticsInput font sizeEmpty states
prefers-reduced-motionInterruptible transitionsScale on pressExit animationsNo blur > 20pxEasing
prefers-reduced-motionInterruptible transitionsScale on pressExit animationsNo blur > 20pxEasing
No gradientsNo glowNo transition:allVisual monotonyNo placeholder textisolation:isolate
No gradientsNo glowNo transition:allVisual monotonyNo placeholder textisolation:isolate
Accessible primitivesComponent reuseDesign tokensVariant patternscn() conditionalsTypeScript props
Accessible primitivesComponent reuseDesign tokensVariant patternscn() conditionalsTypeScript props
Scroll-margin-topSafe area insetsImage outlinesShadows over borderswill-change usageNo ease-in
Scroll-margin-topSafe area insetsImage outlinesShadows over borderswill-change usageNo ease-in
Input font sizeNo dead zonesCheckbox labelsCmd+Enter submitCurly quotesEllipsis char
Input font sizeNo dead zonesCheckbox labelsCmd+Enter submitCurly quotesEllipsis char
Concentric radiiScale on pressTheme transitionsTransform originNo scroll animationsStagger reveals
Concentric radiiScale on pressTheme transitionsTransform originNo scroll animationsStagger reveals
Tabular numstext-prettyFont familiesWeight hierarchyLine clampTruncation
Tabular numstext-prettyFont familiesWeight hierarchyLine clampTruncation

Works with your stack

Rams reviews JSX, TSX, Vue SFCs, Svelte components, and CSS/SCSS files. It understands Next.js app directory, SvelteKit routes, Vue pages, and React Native screens.

Don't see your framework?
Request support and we'll add it.

Next.js
React
Vue
Svelte

Pricing

Basic · Public Beta

Automated design reviews on every pull request with inline fix suggestions.

$179 / month
GitHub App integration
Inline fix suggestions
109 design rules
1 repository
10 PR reviews per day
Email support
Get Started
Pro · Public Beta

For teams shipping across multiple repos. More capacity, priority support.

$499 / month
GitHub App integration
Inline fix suggestions
109 design rules
5 repositories
25 PR reviews per day
Priority support
Get Started
Enterprise

Unlimited reviews for large teams. Custom rules, SSO, and dedicated support.

Custom
Everything in Pro
Unlimited repositories
Unlimited PR reviews
Custom rule configuration
SSO / SAML
Dedicated support & SLA
Contact Us
Skill · Free forever
Install Free