# Social Proof-Focused > A landing page that lets other people do the selling: star ratings, review cards, avatar stacks, logo walls and big numbers fill the page. - Nickname: Wall of love - Also called: Testimonial-led landing, Review-first landing - Category: Landing Page Patterns - Moods: Friendly, Trustworthy, Calm - Industries: Education, SaaS, E‑commerce, Startup & Tech, Fitness & Wellness - Style page: https://uilingo.dev/styles/social-proof-focused/ Social Proof-Focused pages replace the usual product screenshot with evidence. The hero carries an avatar stack, five gold stars and an average rating next to the CTA, and its visual is a fanned stack of review cards. A logo wall and a band of oversized numbers follow straight away, then a masonry “wall of love” with a rating breakdown. The skin stays warm and friendly — cream paper, white rounded review cards, one indigo action colour and gold reserved for stars. ## Best for - Course platforms and marketplaces with many happy users - Consumer apps competing on reputation - Products in crowded categories where buyers compare reviews - Launch pages after a strong beta ## Avoid for - Brand-new products with no real customers yet - Luxury brands that sell on exclusivity, not popularity - Regulated claims where testimonials need legal review ## Do - Put a rating (stars + number + count) within 40px of the primary CTA - Show real names, roles and avatars on every quote - Star gold #F59E0B only on stars, rating bars and small star/indicator glyphs; highlight gold #FFC53D for badges, marker underlines and stars on indigo - Follow the hero with logos and numbers before any feature list ## Don't - Don’t use anonymous quotes or stock-photo faces - Don’t bury testimonials below pricing - Don’t let the product screenshot compete with the proof in the hero ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Social Proof-Focused" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line A landing page that lets other people do the selling: star ratings, review cards, avatar stacks, logo walls and big numbers fill the page. Design keywords: star ratings everywhere, avatar stack, wall of love, review cards, logo wall, big numbers band, verified badge, rating breakdown bars. ## Visual language A warm, friendly landing page where evidence replaces the product shot: cream paper background, white rounded review cards with soft warm shadows, colourful ringed avatars and five-star rows repeated everywhere. One indigo #4338CA action colour drives every CTA. Two golds with separate, closed jobs: star gold #F59E0B for stars and small star/indicator glyphs on light surfaces, highlight gold #FFC53D for badges, the marker underline, the CTA submit and stars on indigo. The rhythm is hero → logos → giant numbers → wall of reviews, so a visitor sees hundreds of happy people before reading a single feature. ## Signature details (must be visible) - Two golds, one closed allow-list each. Star gold #F59E0B (accent) is only for: star glyphs on light surfaces, rating-breakdown bars, the eyebrow star, the 26×3px tab-bar indicator, KPI label icons, the onboarding active dot, quote marks and the profile-avatar ring. Highlight gold #FFC53D (secondary, always with #1C1B2E text) is only for: the marker underline, 'most popular'/featured badges, the CTA-panel submit button, star glyphs on indigo surfaces (featured review card, CTA panel, featured mobile card) and soft radial glows. Stars switch to #FFC53D on indigo backgrounds. Nothing else is gold - Rating cluster beside the primary CTA: 4–5 overlapping 40px avatars (2px white ring, -12px overlap) + five 16px filled #F59E0B stars + '4.8/5 average rating · 260k learners' - Hero visual is a fanned stack of 3 review cards in a position:relative stack container. The rating chip is the container's FIRST child, position:absolute at top -14px, right -6px, covering only card 1's corner. Target the cards with a class (.sp-review--1..3) or .review-card:nth-of-type(1..3), never nth-child. Chip: padding 10px 16px, width ~120px, a 2.2rem 800-weight number + a row of 14px stars, 18px radius, shadow-lg. Cards follow each other with margin-top -10px: card 1 rotate -2deg, margin-right 56px, padding-right 120px (clears the chip); card 2 rotate 1.6deg, margin-left 64px; card 3 rotate -0.8deg, margin 0 28px 0 20px - Logo wall band directly under the hero, framed by 1px top/bottom rules, labelled 'Trusted by …', logos at full opacity in muted ink #6E6A80, centred with flex-wrap so a wrapped row stays balanced (no single orphan logo) - Numbers band of 4 stats at clamp(2.6rem,5vw,4rem), weight 800, indigo #4338CA, separated by 1px dashed dividers - Masonry 'wall of love' (CSS columns, 3 × min 300px). Item 1 is the rating-breakdown card (top of column 1): 4.5rem score, 22px stars and 5 #F59E0B progress bars (82/12/4/1/1%). The solid-indigo featured review comes right after the breakdown card and one white review (item 3), so it opens column 2 — never at the bottom of a column. The wall uses 4–6 reviewers who are NOT the hero-stack reviewers - Every eyebrow is a white pill with a 15px #F59E0B star glyph before the text, drawn with clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%). Every reviewer name is followed by a verified icon = Lucide badge-check, 16px, indigo #4338CA (white on indigo cards), with the role in muted text on the next line - Highlighted headline words get a #FFC53D marker underline (linear-gradient 70–90%, 45% opacity) ## Design tokens — use these exact values Colours (light mode): - background #FBF8F3 - surface #FFFFFF - surface-2 #F4EEE4 - text #1C1B2E - text-muted #5C5A6E - primary #4338CA (text on it #FFFFFF) - secondary #FFC53D (text on it #1C1B2E) - accent #F59E0B - border #E7DFD2 - success #15803D · warning #B45309 · danger #DC2626 - chart series #4338CA, #0D9488, #E2557F, #8E8AAE, #B9A27A Radius: sm 8px, md 12px, lg 18px, xl 26px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(28,27,46,0.06), 0 1px 1px rgba(28,27,46,0.04)`, md `0 8px 24px rgba(60,45,20,0.09)`, lg `0 22px 50px rgba(60,45,20,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.2,.7,.2,1) ## Typography (Latin + Thai) - Headings: Outfit 600/700/800 with Thai fallback Prompt 600/700/800 - Body: DM Sans 400/500/700 with Thai fallback Anuphan 400/500/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=DM+Sans:wght@400;500;700&family=Prompt:wght@600;700;800&family=Anuphan:wght@400;500;700&display=swap - CSS stacks: heading `"Outfit", "Prompt", system-ui, sans-serif`; body `"DM Sans", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.4vw, 4.4rem), heading weight 700, heading tracking -0.025em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt shares Outfit’s round geometric bowls and confident weight; loopless Anuphan keeps DM Sans’ open, friendly reading rhythm in Thai. ## Components - Buttons: fully rounded pills; primary indigo #4338CA with 0 6px 16px indigo-28% shadow, hover darkens to #3730A3 and lifts 1px; secondary white with 1px #E7DFD2 border. Never star gold #F59E0B on any button - Review card: white, 18px radius, 1px warm border, stars row → 1.12rem 500-weight quote → avatar + bold full name + verified icon + muted role; one card per wall in solid indigo with #FFC53D stars, a white verified icon and its own reviewer (never a repeat of another card or of the hero stack) - Avatars: pastel fill/initial pairs rotating #E0DDFB/#2E2591, #FFE7A8/#6B4300, #C8F0EA/#0B5D55, #FFD9E3/#8A1F43, each with a 2px white ring - Stats: centred, 800 weight, indigo, label underneath in 500 weight muted - Trust row: 4 white pills under the wall of love, each a #15803D check/shield icon plus a short guarantee (e.g. accredited certificate, PDPA compliant, safe for under-18s, credit transfer), small shadow - Inputs: 12px radius, warm #DCD3C4 border, focus indigo border + 4px indigo-14% ring - Pricing: 26px-radius cards; featured plan solid indigo with a #FFC53D 'most popular' badge and a white button - CTA block: indigo panel with a #FFC53D radial glow top-right, avatar stack + #FFC53D stars above the headline, then one row: white email input (12px radius, no border) + #FFC53D submit button with #1C1B2E text, and a 0.85rem muted note under it (e.g. 'free 7-day trial, no card') - Dashboard: white cards, pill sidebar items with indigo tint when active, pill-shaped heatmap cells in an indigo ramp (#4338CA at --v opacity on #F4EEE4); KPI label icons in #F59E0B - Tab bar: plain bar on white; active item indigo with a 26×3px #F59E0B indicator above the icon - Decorative extras (allowed exceptions to 'every colour from tokens'): logo ink #6E6A80, primary hover #3730A3, input border #DCD3C4, and the avatar fill/initial pairs #E0DDFB/#2E2591, #FFE7A8/#6B4300, #C8F0EA/#0B5D55, #FFD9E3/#8A1F43 - Thai: stats keep Latin numerals (260k, 4.8/5, 92%); Thai headlines may phrase counts in Thai units (e.g. 'over 2.6 saen people'). Outfit 800 is for Latin stat numerals; Thai headlines use Prompt 700. Prompt 800 is loaded only so any 800-weight element containing Thai renders true bold — never faux bold. Review cards use full Thai names (Kittipong Rattana written in Thai script), never romanised initials ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → stats → testimonials → trust → features → pricing → faq → cta. Feature section as grid. Split hero: copy, CTAs and the rating cluster on the left, fanned review stack on the right (no product screenshot). Then a full-width logo wall, a 4-up numbers band, a masonry wall of 4–6 new reviewers with the rating breakdown first and the indigo featured card opening column 2, a row of trust pills, only then a compact 6-card feature grid, pricing, FAQ and an indigo CTA that repeats the avatar stack and stars. For a landing build, skip the Dashboard and Tab bar recipes; they apply to app screens only. Dashboards keep the warm skin with an engagement heatmap and a people-centric activity feed. ## Content Use realistic product copy (fictional brand) suited to: Course platforms and marketplaces with many happy users. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Put a rating (stars + number + count) within 40px of the primary CTA - Show real names, roles and avatars on every quote - Star gold #F59E0B only on stars, rating bars and small star/indicator glyphs; highlight gold #FFC53D for badges, marker underlines and stars on indigo - Follow the hero with logos and numbers before any feature list ## Don't - Don’t use anonymous quotes or stock-photo faces - Don’t bury testimonials below pricing - Don’t let the product screenshot compete with the proof in the hero - Anonymous quotes: every quote needs a full name plus a role or town; initials appear only inside avatars - A product screenshot or illustration as the hero visual - Star gold #F59E0B on buttons, links, badges, chart series or large fills; and #F59E0B stars on indigo (use #FFC53D there) - Navy, seals and certificate frames (that is Trust & Authority) - Dense feature sections before the reviews - Repeating the hero-stack reviewers or quotes in the wall of love ## Stack notes One self-contained HTML file with a