# Hero-Centric Design > One full-screen scene, one giant headline and one CTA carry the page — everything below the fold is short and quiet. - Nickname: Big hero - Also called: Full-bleed hero, Above-the-fold hero, Immersive hero landing - Category: Landing Page Patterns - Moods: Dreamy, Bold, Luxury, Calm - Industries: Travel & Hospitality, Real Estate, Luxury & Premium, Food & Restaurant, Creative & Portfolio - Style page: https://uilingo.dev/styles/hero-centric-design/ A landing pattern where the first viewport does almost all the selling. A full-bleed photograph or illustrated scene fills the screen edge to edge, a transparent nav floats on top, and a huge white headline (7–9rem on desktop) sits over a dark scrim with exactly one dominant call to action. The sections after the hero are deliberately lean — three postcards, one quote, one closing banner that repeats the scene — so nothing competes with the opening moment. ## Best for - Travel, hotels and destinations - Product launches with one hero visual - Real-estate and architecture showcases - Event and campaign pages ## Avoid for - Feature-heavy B2B tools that must explain a lot - Pages where speed on slow mobile data matters most - Dashboards and utility apps ## Do - Make the hero 100vh with the image edge to edge and a 35–70% dark scrim behind the text - Give the hero exactly one filled CTA; demote the second action to a text link - Keep sections after the hero to 3–4 and reuse the hero scene in a closing banner - Serve the hero image responsive and compressed (AVIF/WebP, < 250 KB) ## Don't - Don’t put a product screenshot, form or carousel inside the hero - Don’t place white text on a bright image without a scrim - Don’t follow the hero with long feature grids, pricing tables and FAQs ## Audit Passed after 1 round · 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 "Hero-Centric Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line One full-screen scene, one giant headline and one CTA carry the page — everything below the fold is short and quiet. Design keywords: full-bleed hero image, giant headline over photo, one dominant CTA, transparent overlay nav, dark scrim for legibility, scroll cue, lean sections below the fold, bookend image banner. ## Visual language A landing page that is mostly its first screen. A full-bleed photograph or illustrated scene (dusk mountains, a beach, a building) runs edge to edge under a transparent nav, darkened by a top-and-bottom scrim so a giant white headline (7–9rem, extra-bold, tight tracking, 2–3 lines, centred) reads perfectly. One big coral pill CTA sits under a short lead, the second action is only an underlined text link, and a small mouse-shaped scroll cue sits at the bottom edge. Below the fold the page turns calm and light: warm off-white, few sections, generous spacing, and a closing banner that repeats the hero scene. ## Signature details (must be visible) - Hero = 100vh (clamp 720px–1000px), background: dark scrim linear-gradient(180deg, rgba(8,12,22,.55), rgba(8,12,22,.12) 34%, rgba(8,12,22,.78)) over a cover image, no product shot, form or carousel inside - Display headline in white at clamp(3.5rem, 9vw, 8.5rem), weight 800, line-height 0.92, letter-spacing -0.035em, soft text-shadow 0 4px 40px rgba(8,12,22,.35) - Exactly one filled CTA in the hero: 64px tall pill, primary #C2410C, 1.15rem label, glow shadow 0 18px 50px rgba(194,65,12,.45); the secondary action is a white underlined text link - Nav is position:absolute over the hero, transparent, white links, with a white pill CTA; on every other page it becomes a solid bar - Frosted eyebrow pill above the headline (rgba(255,255,255,.16) + 1px rgba(255,255,255,.35) border + blur 8px), uppercase with 0.14em tracking - Mouse-shaped scroll cue (26×42px outline, radius 14px) centred 34px from the bottom of the hero - Only 3–4 sections after the hero; the last one is a full-width rounded (32px) banner that reuses the hero image with a dark scrim ## Design tokens — use these exact values Colours (light mode): - background #FAF7F2 - surface #FFFFFF - surface-2 #F2ECE2 - text #16212B - text-muted #59636E - primary #C2410C (text on it #FFFFFF) - secondary #0F3D3E (text on it #FFFFFF) - accent #F2A541 - border #E4DBCC - success #2F7D4F · warning #A86A12 · danger #B3261E - chart series #C2410C, #0F3D3E, #F2A541, #5B8DB8, #8A6E57 Radius: sm 8px, md 14px, lg 22px, xl 32px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(22,33,43,0.06)`, md `0 14px 34px rgba(22,33,43,0.10)`, lg `0 30px 80px rgba(22,33,43,0.20)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 600ms cubic-bezier(.16,1,.3,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 700/800 with Thai fallback Kanit 600/800 - Body: DM Sans 400/500/700 with Thai fallback Noto Sans Thai 400/500/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;700&family=Kanit:wght@600;800&family=Noto+Sans+Thai:wght@400;500;700&display=swap - CSS stacks: heading `"Bricolage Grotesque", "Kanit", system-ui, sans-serif`; body `"DM Sans", "Noto Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.5rem, 9vw, 8.5rem), heading weight 800, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - 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: Kanit’s heavy, loopless strokes hold up at poster size next to Bricolage’s chunky grotesque; Noto Sans Thai matches DM Sans’ open, neutral body text. ## Components - Buttons: pills everywhere; primary coral with a soft coloured shadow; secondary white with a 1px warm border; on images use white-glass secondary (rgba(255,255,255,.16), blur 8px) - Cards as postcards: radius 22px, no border, shadow 0 14px 34px rgba(22,33,43,.10); a 4:3 image crop on top, a round white icon badge floating on the image, text below; hover lifts 6px - Testimonials: a single large centred quote (1.6–2.4rem, bold) instead of a grid - Inputs: 14px radius, white fill, 1px warm border; focus = coral border + 4px coral halo at 16% - Dashboard header: a 220px tall scene banner with the page title in white and white-glass controls; KPI and chart cards stay plain white - Badges and chips: pills; active chip filled coral; status badges tinted - Charts: coral first series, deep teal second, warm sand gold accent; rounded-top vertical bars - Mobile featured card: 260px tall image card with a bottom scrim and the title in white over the image ## 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: full-viewport immersive hero with centred copy over the background effect. Navigation: split style. Sections in order: hero → features → testimonials → cta. Feature section as grid. Open with the immersive hero filling the viewport: transparent nav on top, eyebrow, giant centred headline, one-line lead, one pill CTA, text-link alternative, small reassurance note and a scroll cue. Then keep it lean: one three-card 'postcard' row, one big quote, one closing image banner with an email + CTA, and the footer. No pricing tables, FAQs or long feature grids. Inner pages (form, article, components) each open with a scene element — an image aside card, a 16:9 hero figure or a banner — so the hero idea carries through. The dashboard uses a top nav and a scene banner as its page header. ## Content Use realistic product copy (fictional brand) suited to: Travel, hotels and destinations. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Make the hero 100vh with the image edge to edge and a 35–70% dark scrim behind the text - Give the hero exactly one filled CTA; demote the second action to a text link - Keep sections after the hero to 3–4 and reuse the hero scene in a closing banner - Serve the hero image responsive and compressed (AVIF/WebP, < 250 KB) ## Don't - Don’t put a product screenshot, form or carousel inside the hero - Don’t place white text on a bright image without a scrim - Don’t follow the hero with long feature grids, pricing tables and FAQs - Putting a product screenshot, signup form or carousel in the hero — the scene and headline are the whole message - Two equally weighted CTAs side by side in the hero - White text on a bright image without a scrim - Following the hero with many dense sections (pricing, comparison, FAQ) — that becomes a feature-rich page - Layered parallax scenes scrolling one after another (that is parallax storytelling) - Small, polite headline sizes under ~4rem on desktop ## Stack notes One self-contained HTML file with a