# Get a practical design critique for a Tailwind landing page [Open the live Fudge conversation](https://design.withfudge.com/share/website-design-critique-for-my-tailwind-landing-page) Last updated: 2026-08-25 A strong Tailwind landing-page critique should tell you what is unclear, why it matters, and what to change first. Review the page as a visitor would: identify the offer, scan the first screen, find the next action, and then check whether the rest of the page supports that decision. ## Start with the decision Use this first-screen test before discussing style. In five seconds, can a visitor answer: - What is this? - Who is it for? - What problem does it solve? - What should I do next? If any answer is missing, fix the message before changing colors, illustrations, or card shapes. A visually polished page can still lose people when the headline is vague or the primary action is buried. Next, trace the reading path. The heading should lead to a short explanation, relevant proof, and one obvious action. Secondary links can remain available, but they should not compete with the main choice. Check whether the hero, navigation, and button use the same language. Small wording changes can make a page feel more coherent than a large visual redesign. ## Captured pages [![The system for product development](https://pin.fontofweb.com/6434?format=jpg)](https://design.withfudge.com/share/pin-6434) [The system for product development](https://design.withfudge.com/share/pin-6434) ## Linear typography - **Inter** — weight 400 · Body copy, labels, navigation, and controls. - **Inter** — weight 500 · Headings and emphasized interface text. ## Critique the visual system Once the page is clear, inspect the choices that control its rhythm: - **Content width:** Wide text blocks make headings and paragraphs harder to scan. Narrow them until line lengths feel comfortable. - **Type scale:** Use a visible difference between labels, body copy, subheadings, and the main heading. Avoid making every text element bold or oversized. - **Weight:** Reserve heavier weights for emphasis. Medium text can often establish hierarchy without adding another font. - **Spacing:** Look for a repeatable relationship between section padding, card gaps, and text-to-button spacing. Random gaps make a page feel unfinished. - **Color:** Keep the strongest color for important actions or meaningful emphasis. Muted text still needs enough contrast to remain readable. - **Surfaces:** Borders, radii, shadows, and backgrounds should explain grouping. If every section is a separate card, the page may feel fragmented. The captured Linear example below offers a concrete typography reference: Inter appears in regular weight for body copy, labels, navigation, and controls, with medium weight used for headings and emphasized interface text. The broader lesson is to create contrast through a controlled type scale and muted color rather than adding many unrelated font treatments. ## Turn findings into Tailwind edits Write critique notes in a format that leads directly to implementation: **Finding:** The hero paragraph is too wide and competes with the heading. **Change:** Add a narrower max-width to the paragraph and reduce its line length. **Check:** Read the hero at the normal viewport width and confirm the heading remains the visual entry point. **Finding:** Three buttons look equally important. **Change:** Keep one filled primary button, make the other actions quieter, and place them in a consistent order. **Check:** Ask someone to point to the recommended next step without explanation. **Finding:** Cards use different padding and corner treatments. **Change:** Move shared values into the card component or common Tailwind classes. **Check:** Compare card edges and internal spacing across every section. Use the same structure for mobile issues. Mention the viewport, the component, the current behavior, the proposed class or layout change, and the expected result. This is more useful than saying a page feels "off." ## Rank the critique A practical critique has three levels. Fix comprehension problems first: unclear copy, weak hierarchy, missing proof, or an unclear action. Fix usability problems second: low contrast, cramped controls, poor keyboard focus, awkward wrapping, or a mobile layout that hides important content. Only then prioritize taste-level changes such as a different radius, shadow, gradient, or decorative treatment. Review the page in its actual responsive states. Check navigation, heading wraps, button widths, card stacking, image crops, and section order. If the page uses a dark surface or muted text, verify that contrast remains comfortable rather than relying on the desktop screenshot alone. End with a short implementation plan: three urgent changes, three follow-up changes, and one experiment. That gives you a clear next session and makes it easier to tell whether the critique improved the page. ## Use this in your AI agent > Give me a practical design critique of my Tailwind landing page. Review the visitor's first-screen understanding, headline and CTA hierarchy, content width, responsive behavior, typography, spacing, color contrast, surfaces, proof placement, and accessibility risks. Separate observations from recommendations, rank issues by visitor impact, and suggest exact Tailwind classes or component changes. Use relevant captured examples for comparison, but do not copy their branding or invent product facts. Finish with three urgent fixes, three later improvements, and one testable experiment. [Install Fudge for your AI agent](/mcp) --- Use this pass from top to bottom: 1. **Message:** The heading states the offer plainly, the supporting copy adds useful context, and one primary action is obvious. 2. **Layout:** The main content has a readable max-width, consistent horizontal padding, and a clear section order. 3. **Typography:** Heading, body, label, and button styles have distinct roles. Line heights and wrapping work at mobile widths. 4. **Spacing:** Sections, cards, buttons, and text groups follow a repeatable rhythm instead of using arbitrary gaps. 5. **Color:** Body text and controls are readable, accents are limited, and the main action is easy to spot. 6. **Proof:** Evidence appears close to the claim it supports and does not interrupt the main path. 7. **Responsive behavior:** Navigation, columns, buttons, cards, images, and headings remain usable when the viewport narrows. 8. **Implementation:** Shared patterns use shared classes or components, so the fix does not require many one-off overrides. Mark each item as clear, needs work, or needs testing. Fix every "needs work" item that affects understanding or action before polishing visual details. --- Convert each critique note into one implementation task with a visible success check. For example, replace "the hero feels weak" with "rewrite the heading to state the result, limit the paragraph width, and confirm the primary button is visible without scrolling." Group the tasks into three passes. Pass one fixes comprehension: heading, supporting copy, CTA order, and proof. Pass two fixes consistency: shared type scale, spacing values, container widths, card padding, borders, and button states. Pass three tests responsive behavior and experiments such as alternate copy or a different accent color. Keep the first pass small. Three to five changes are enough to reveal whether the direction is working. Capture or review the revised page at the same desktop and mobile sizes, then compare the original checklist. If a change improves similarity to a reference but makes the page less clear, remove it. The goal is a clearer, more usable landing page, not a visual imitation. ## Related questions - [Website Design Critique for a Vibe-Coded Website](/share/website-design-critique-for-my-vibe-coded-website) - [Website Design Critique for a SaaS Landing Page](/share/website-design-critique-for-my-saas-landing-page) - [AI website review for generated layouts and typography](/share/ai-website-review-for-ai-generated-website-layout-and-typography) - [Website design critique for your pricing page](/share/website-design-critique-for-my-pricing-page)