Social Proof-Focused

Also called: Testimonial-led landing, Review-first landing

A landing page that lets other people do the selling: star ratings, review cards, avatar stacks, logo walls and big numbers fill the page.

“Wall of love”Landing Page PatternsEra: 2010s → todayFriendlyTrustworthyCalm

Open full screen ↗

social-proof-focused / landingEN

social-proof-focused / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg18pxRadius xl26pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

star ratings everywhereavatar stackwall of lovereview cardslogo wallbig numbers bandverified badgerating breakdown bars

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

Not to be confused with

Trust & Authority →Trust & Authority shows certifications, seals and expert credentials in conservative navy; Social Proof shows crowds of ordinary users — stars, faces and quotes on warm cream.Conversion-Optimized →Conversion-Optimized puts a form in the hero and repeats one CTA; Social Proof puts reviews in the hero and lets the evidence carry the page.Feature-Rich Showcase →Feature-Rich Showcase is dominated by product screens and feature rows; here features are a short grid squeezed between walls of reviews.

On mobile

Lead the home screen with a rating chip and avatar stack, render reviews as a horizontal swipe of cards, and keep stars at 14–16px so they stay crisp. Indigo for action, #F59E0B for stars, #FFC53D for highlights.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOutfit · 600/700/800

The quick brown fox

Heading · ThaiPrompt · 600/700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinDM Sans · 400/500/700

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Prompt shares Outfit’s round geometric bowls and confident weight; loopless Anuphan keeps DM Sans’ open, friendly reading rhythm in Thai.

Colour palette

Design tokens

Radius	`sm 8px · md 12px · lg 18px · xl 26px · pill 999px`
Border	`1px`
Shadow	`0 8px 24px rgba(60,45,20,0.09)`
Display	`clamp(2.6rem, 5.4vw, 4.4rem)`
Motion	`200ms cubic-bezier(.2,.7,.2,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Social Proof-Focused (social-proof-focused) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 18px;
  --background: #FBF8F3;
  --foreground: #1C1B2E;
  --card: #FFFFFF;
  --card-foreground: #1C1B2E;
  --popover: #FFFFFF;
  --popover-foreground: #1C1B2E;
  --primary: #4338CA;
  --primary-foreground: #FFFFFF;
  --secondary: #FFC53D;
  --secondary-foreground: #1C1B2E;
  --muted: #F4EEE4;
  --muted-foreground: #5C5A6E;
  --accent: #F4EEE4;
  --accent-foreground: #1C1B2E;
  --destructive: #DC2626;
  --border: #E7DFD2;
  --input: #E7DFD2;
  --ring: #4338CA;
  --chart-1: #4338CA;
  --chart-2: #0D9488;
  --chart-3: #E2557F;
  --chart-4: #8E8AAE;
  --chart-5: #B9A27A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1C1B2E;
  --sidebar-primary: #4338CA;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4EEE4;
  --sidebar-accent-foreground: #1C1B2E;
  --sidebar-border: #E7DFD2;
  --sidebar-ring: #4338CA;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Social Proof-Focused (social-proof-focused) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FBF8F3;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4EEE4;
  --color-text: #1C1B2E;
  --color-text-muted: #5C5A6E;
  --color-primary: #4338CA;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFC53D;
  --color-on-secondary: #1C1B2E;
  --color-accent: #F59E0B;
  --color-border: #E7DFD2;
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-danger: #DC2626;
  --color-chart-1: #4338CA;
  --color-chart-2: #0D9488;
  --color-chart-3: #E2557F;
  --color-chart-4: #8E8AAE;
  --color-chart-5: #B9A27A;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28,27,46,0.06), 0 1px 1px rgba(28,27,46,0.04);
  --shadow-md: 0 8px 24px rgba(60,45,20,0.09);
  --shadow-lg: 0 22px 50px rgba(60,45,20,0.14);
  --font-heading: "Outfit", "Prompt", system-ui, sans-serif;
  --font-body: "DM Sans", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Social Proof-Focused (social-proof-focused). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9725,
            0.9529
          ],
          "hex": "#fbf8f3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9333,
            0.8941
          ],
          "hex": "#f4eee4"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.1804
          ],
          "hex": "#1c1b2e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.3529,
            0.4314
          ],
          "hex": "#5c5a6e"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2627,
            0.2196,
            0.7922
          ],
          "hex": "#4338ca"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7725,
            0.2392
          ],
          "hex": "#ffc53d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.1804
          ],
          "hex": "#1c1b2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.6196,
            0.0431
          ],
          "hex": "#f59e0b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.8745,
            0.8235
          ],
          "hex": "#e7dfd2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.502,
            0.2392
          ],
          "hex": "#15803d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3255,
            0.0353
          ],
          "hex": "#b45309"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.149,
            0.149
          ],
          "hex": "#dc2626"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2627,
            0.2196,
            0.7922
          ],
          "hex": "#4338ca"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.5804,
            0.5333
          ],
          "hex": "#0d9488"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.3333,
            0.498
          ],
          "hex": "#e2557f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.5412,
            0.6824
          ],
          "hex": "#8e8aae"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.6353,
            0.4784
          ],
          "hex": "#b9a27a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.1059,
              0.1804
            ],
            "hex": "#1c1b2e",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.1059,
              0.1804
            ],
            "hex": "#1c1b2e",
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 1,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1765,
              0.0784
            ],
            "hex": "#3c2d14",
            "alpha": 0.09
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1765,
              0.0784
            ],
            "hex": "#3c2d14",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 22,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Outfit",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "DM Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!