Before and after Rams.
Everything on the left renders and works. It shipped anyway. Rams catches what tests cannot: one card reviewed whole, ranked, and scored. Then twenty components with the finding, the fix, and the code change.
One card, reviewed the way Rams reviews.
A review runs everything at once, ranks what it finds, and scores the result. Every fix posts inline.
Before54Pro planEverything your team needsOne subscription. Every feature. Cancel whenever you like.$49/ monthUnlimited projects and membersPriority support includedStart your free trial now
After96Everything your team needsOne subscription. Every feature. Cancel whenever you like.$49per monthUnlimited projects and membersPriority support includedStart free trial
CriticalAccessibilityThe subhead and the price period fail contrast on the card background.
CriticalAccessibilityPricing terms at 9px. The number is legible. Its meaning is not.
SeriousCraftA two-hue gradient on the primary action. Decoration standing in for hierarchy.
SeriousTypographyEight sizes and three weights on one card, doing the work of four and two.
ModerateUXFeature lines at two different sizes. The list cannot be scanned.
ModerateCraftA tracked all-caps kicker above the headline, adding nothing the headline does not say.
Every line passes contrast.
Pricing terms readable at 13px.
One solid primary.
Four sizes, two weights.
One size for the feature list.
The headline opens the card.
Two criticals cap this card at 59 before anything else counts. With every fix applied it scores 96. Push the fixes and Rams re-reviews, checking each finding by name.
Component by component.
Twenty single checks from the same engine: the finding, the fix, and the code change each one posts inline.
01Primary buttonCraft
BeforeGet started free today
AfterGet started
The gradient competed with its own label.
One solid color. The label reads first.
Why
A gradient on a primary action is decoration, not hierarchy. It pulls the eye to the surface instead of the label, and 11px type makes the most important words on the card the hardest ones to read. This is slop: paint standing in for structure.
02Button pairUX
BeforeSave changesPreview
AfterSave changesPreview
Two actions styled as primary.
One primary. One secondary.
Why
When two buttons carry equal visual weight, the screen stops answering the user's question: what happens next. Every screen has one primary action. The rest support it.
03Destructive actionUX
BeforeCancelDelete project
AfterCancelDelete project
Red on the safe action.
Red only on the destructive action.
Why
Red is a learned signal. Put it on the safe action and users learn to fear the wrong button; the day someone acts on habit, they delete a project. Color has to match consequence.
04Text inputAccessibility
BeforeEmail address
AfterEmailyou@company.com
The placeholder was the label. It disappears on input.
A fixed label. The placeholder shows an example.
Why
A placeholder is not a label. It disappears the moment typing starts, gives autofill nothing to match, and screen readers cannot rely on it. The field keeps its name only if the name lives outside the field.
05Error stateAccessibility
Beforeeli@rams
Aftereli@ramsEnter a valid email address.
The error was shown by color alone.
The error is stated in text.
Why
Roughly 1 in 12 men cannot reliably distinguish the red border, so an error carried by color alone is invisible to them and silent to screen readers. role="alert" plus visible text makes the failure readable by everyone, including machines.
06BadgeColor
BeforeBeta
AfterBeta
Low-contrast text on a tinted background.
Solid background. Readable text.
Why
Light blue on lighter blue fails contrast at any size, and 9px uppercase with wide tracking makes a hard label harder. A badge is metadata: small is correct. Unreadable is not.
07TabsAccessibility
BeforeOverviewMembersSettings
AfterOverviewMembersSettings
The active tab was marked by color alone.
The active tab is underlined and darker.
Why
State shown by color alone fails for color-blind users and disappears entirely in forced-colors mode. An underline and a brightness step survive every mode. Color does not.
08ToggleUX
Before
After
On and off were both blue.
On is dark. Off is light.
Why
Two blues read as two intensities of on. A binary control must look binary: if you need a legend to tell the states apart, the control has failed.
09TooltipUX
BeforeClick here to copy your workspace API key to the clipboard for use in external tools
AfterCopy API key
9px text, and too much of it.
Readable size. Four words.
Why
A tooltip is a label, not a paragraph. Forty words belong in help text, and 9px is unreadable at the exact moment someone is asking for help.
10Warning calloutColor
BeforeYour trial expires in 3 days
AfterYour trial expires in 3 days
Amber text on an amber background.
Neutral background. The text passes. The icon marks the warning.
Why
Amber text on an amber tint fails contrast exactly where the message matters. The tint already says warning before a word is read. Keep the signal in the icon and put the message in readable neutral text.
11Card title rowTypography
BeforeQ3 revenue reportUpdated 2h ago
AfterQ3 revenue reportUpdated 2h ago
Title and metadata were the same size and color.
The title is larger and darker than the metadata.
Why
Hierarchy is what makes a card scannable. When the title and its metadata share one size and one color, scanning stops working and every card has to be read in full. One size step and one brightness step restore the order.
12BreadcrumbsUX
BeforeProjects » Design system » Tokens
AfterProjects › Design system › Tokens
Every level had equal weight.
The current page is dark. The path is gray.
Why
A trail exists to answer one question: where am I. When every level looks current, it answers nothing. aria-current also tells assistive tech which crumb is the page.
13Numbers in a tableTypography
Before1,024.5087.0012,003.25
After1,024.5087.0012,003.25
Numbers were centered.
Right-aligned, tabular figures. Magnitudes line up.
Why
Centered numbers put ragged space on both sides, so magnitudes cannot be compared by eye. Right alignment plus tabular figures gives every digit the same width and lines the columns up.
14PaginationAccessibility
Before4567
After4567
The current page looked like every other page.
The current page is marked.
Why
An unmarked current page asks users to remember instead of look. aria-current="page" names it for assistive tech; the solid fill marks it for everyone else.
15Avatar rowSpacing
BeforeMaya Okafor2h
AfterMaya Okafor2h ago
20px avatar, 10px name, 4px gaps.
Larger avatar. Readable name and time. Real gaps.
Why
At 20px a face is unrecognizable, and at 4px gaps the avatar, name, and time read as one object. Each needs size and separation to read as a separate piece of information.
16Empty stateUX
BeforeNo results found. Try adjusting your filters or search terms to find what you are looking for.
AfterNo results.Clear filters
A long 9px message in a dashed box.
A short message and a clear next action.
Why
An empty state has two jobs: say what happened and offer the way forward. A long 9px apology does neither. A short message states the fact; the button removes the dead end.
17ToastColor
BeforeChanges saved successfully!
AfterChanges saved
White text on bright green failed contrast.
Dark background. The text passes. A check marks success.
Why
White on bright green fails contrast, and success is the one message users should be able to confirm at a glance. A dark neutral surface keeps the text readable; the green check keeps the meaning.
18Label and help textAccessibility
BeforeWorkspace nameShown to your team and in invoices
AfterWorkspace nameShown to your team and in invoices.
10px label and help text in light gray.
Both lines read. Both pass contrast.
Why
Help text exists for the moment someone is unsure. 10px light gray fails contrast precisely for the person squinting at it. Small type is fine. Illegible type is not.
19Icon buttonAccessibility
Before
After
The hit area was the icon itself, 14px.
A 36px hit area.
Why
A 14px glyph as its own hit area misses fingers and sits far below the minimum target size. A bare icon with a click handler is also not a button: no focus, no keyboard, no accessible name. Wrapping it fixes all three.
20Link in proseAccessibility
BeforeRead the usage guidelines before inviting your team.
AfterRead the usage guidelines before inviting your team.
The link was pale blue with no underline.
Underlined, high contrast.
Why
A link marked by color alone vanishes for color-blind readers and in grayscale. The underline is the one signal that survives every mode. In prose, links are underlined.
Twenty examples.
194 checks on every PR.
Rams reviews every pull request and every agent session against all of them: accessibility, typography, color, spacing, components, UX, motion, and craft. Findings post inline as one-click fixes, with a score, in about a minute.
194
checks
8
categories
0–100
score
Free to start. No CI config.
Frameworks