Most advice about a bad AI-generated hero says to change the palette. This one keeps it. The before and the after below use the same five colors and the same font, Poppins. What changes is how much of each color there is, where each one is allowed to go, and what the page asks the visitor to do.
The whole redesign, one fix at a time. Watch it on YouTube.
The palette: white #FFFFFF, indigo #4936A9, coral #D78780, lime #B6D877 and charcoal #303642. Every
contrast ratio below is the WCAG 2.x relative-luminance ratio, measured for these exact hex values.
1. Proportion: 60-30-10
- Before: all five colors at the same volume. An indigo background, lime nav links, a lime word in the headline, a coral badge, one coral button and one lime button.
- Fix: 60% charcoal for the background, 30% white for text and surfaces, 10% for the three accents together.
- Why: when every color is loud, none of them means anything. The 60-30-10 split gives the eye a base, a reading layer and a few places to land.
2. Contrast: a button you can't see
- Before: once the background goes charcoal, the indigo button sits on it at 1.4:1. WCAG asks for at least 3:1 between a control and what surrounds it, so the button barely exists.
- Fix: put the button on white. Indigo on white is 8.8:1.
- Why: a palette is a list of pairs, not a list of colors. Check every pair you actually use on screen.
3. One job per color
- Charcoal is not black. It is a blue drained almost to gray (16% saturation). White on it is 12.1:1, well above the 7:1 AAA line, and softer than pure black at 21:1.
- Indigo means action. It only goes on things you can click.
- Coral and lime are siblings. In HSL they share the same lightness (67% and 66%) and almost the same saturation (52% and 55%), so neither shouts over the other. Coral says "look here"; lime says "yes, available".
- Lime only on charcoal. Lime on charcoal is 7.6:1; lime on white is 1.6:1, unreadable.
- Coral carries charcoal text, not white. White on coral is 2.7:1 and fails even for large text. Charcoal on coral is 4.4:1, which passes only for large text, so the tag is set bold at 19px (WCAG counts bold text from about 18.7px as large).
4. One font family, many weights
- Before: Poppins at 600 to 800 everywhere, headline, body and nav alike. Everything is bold, so nothing is.
- Fix: the headline at 600, the body at 400, the nav at 500.
- Why: Poppins is a geometric sans-serif (Indian Type Foundry, 2014) built from near-perfect circles and straight lines. One family keeps the page coherent, and weight alone does the hierarchy.
5. Break the frame, cut a step
- Before: an empty rectangle where the image should be.
- Fix: the tower is cut out of its photo and breaks out of an arch-shaped outline, above it and below it. The panel gets a curved step at the bottom, and the search bar sits right on that edge, half dark, half white.
- Why: an image inside a box is decoration. One that breaks its frame gives the page depth, and the step leads the eye straight to the one thing to do.
6. One action
- Before: "Get Started" and "Learn More", same size, same weight.
- Fix: one search bar, with location, price and a single indigo Search button.
- Why: Hick's law: every extra option of equal weight slows the decision. On a property site the action is searching, so that is the only thing the hero asks for.
The palette checklist
Before an AI-generated hero goes to production:
- The background color takes about 60% of the screen, and the accents together about 10%.
- Every color pair on screen is checked: 4.5:1 for body text, 3:1 for buttons and large text.
- Each accent has one job, and the action color appears only on things you can click.
- One font family, with weight doing the hierarchy.
- There is one primary action, and it is the thing visitors came to do.
Give your agent the rules before it writes
Coding agents like Claude Code and Codex fall back on these defaults when nothing tells them otherwise. SynthesisUI puts your design system's tokens, components and rules in front of the agent before it writes, and checks what it wrote at the end of every turn.
Ridgeline is a fictional brand made for this example; the copy, the listing numbers and the cities are illustrative. The palette and the font are the ones a designer published with a hero they made; the layout and the copy here are ours. The contrast ratios and HSL values are measured. The photo was generated for the post.