# Conversion-Optimized > One goal per page: the sign-up form sits in the hero, trust badges sit next to the button, and the same bright CTA repeats down the page. - Nickname: Sign-up machine - Also called: High-converting landing page, Lead-gen page, Squeeze page - Category: Landing Page Patterns - Moods: Trustworthy, Bold, Serious - Industries: Fintech & Banking, SaaS, Startup & Tech, E‑commerce, Education - Style page: https://uilingo.dev/styles/conversion-optimized/ A landing pattern built backwards from a single action. Navigation links are removed so there are no exits, the sign-up form lives in the first screen, and one high-contrast CTA colour (used for nothing else) repeats in the sticky header, the form, a mid-page band and the closing block. Trust signals — security badges, star ratings, customer counts — are placed right beside every CTA, an urgency ribbon gives a reason to act now, and sections answer objections in order: proof, how it works, FAQ. ## Best for - Fintech account opening and sign-up pages - Paid-ads landing pages - Lead generation and waitlists - Free-trial and promo campaigns ## Avoid for - Brand storytelling and editorial sites - Luxury brands that should feel unhurried - Documentation or multi-goal homepages ## Do - Reserve bright green #12C26B for actions and progress (plus small checks on navy); on light backgrounds use the darker success #0B7A42 for icons and trust text (5.4:1 on white) — never green for decoration - Put the form or CTA above the fold and repeat it every 2–3 sections - Put a lock line under every form button and a check line (no minimum · cancel any time) under every CTA band - Keep the hero form to 3 fields (first name, last name, mobile); ask for the rest after sign-up ## Don't - Don’t show the full site navigation — every link is an exit - Don’t use fake countdowns or invented scarcity - Don’t give two different goals equal weight on one page ## Audit Passed after 5 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 "Conversion-Optimized" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line One goal per page: the sign-up form sits in the hero, trust badges sit next to the button, and the same bright CTA repeats down the page. Design keywords: form in the hero, single goal page, no nav links, repeated CTA, trust badges next to the button, urgency ribbon, star ratings, one bright CTA colour. ## Visual language A focused, slightly urgent sign-up page in deep navy and clean white, with one bright green that means 'do this'. The first screen is one navy band: a bold benefit headline with a checkmark promise and star rating on the left, a white elevated form card with a green top edge on the right. An amber ribbon across the very top gives a dated reason to act now, the header has no navigation links — only the logo and the same green button — and proof (security badges, ratings, numbers) always sits within a thumb's reach of a CTA. ## Signature details (must be visible) - No nav links on the landing page: a sticky white header with the logo, a 'Log in' ghost text link and the green CTA only — at every width, including below 480px (logo left; Log in as a plain text link and the small CTA right, 12px gaps) - Amber urgency ribbon above the header (#FFB020, text #2A1A00, 0.85rem weight 600, centred, 36px tall on one line; below 640px it wraps to two balanced lines, 56px tall) stating a real offer and end date. Thai: 'ข้อเสนอจำกัด · ฟรีค่าธรรมเนียมใบแจ้งหนี้ 3 เดือนแรก ถึง 31 ต.ค. 2569' (Thai month abbreviation, Buddhist-era year); English: 'Limited offer · No invoice fees for your first 3 months — ends 31 Oct' (the offer matches the product, a freelancer invoicing and tax wallet). The ribbon is not sticky: it scrolls away and only the white header bar stays pinned (e.g. ribbon inside the sticky header, header top: -36px / -56px) - Hero = the whole hero band is the navy gradient linear-gradient(160deg,#0B2A5B,#071A39), optionally with one soft blue glow radial-gradient(60% 80% at 85% 10%, rgba(76,125,240,.18), transparent 60%) — never a green glow. Copy sits left on navy, the white form card sits right (grid 1.1fr / 0.9fr). Copy column, top to bottom: the eyebrow as an amber pill (background rgba(255,176,32,.16), 1px rgba(255,176,32,.45) border, #FFC85A text, an 8px #FFB020 dot with a 4px rgba(255,176,32,.25) halo); the headline in solid white; the lead in white at 82%; the promise line, starting with a 24px disc rgba(18,194,107,.18) holding a 15px #12C26B check; and last the rating line (#FFC85A, weight 700), which has a 1px rgba(255,255,255,.15) border-top with padding-top 24px and margin-top 32px — it sits BELOW the hairline and nothing comes after it - Form card in the hero: white, radius 20px, shadow 0 30px 80px rgba(0,0,0,.35), and a 6px solid #12C26B border-top that follows the card's curved 20px top corners (no overflow:hidden on the card, because the tag below straddles its edge). Inside: a short heading, exactly 3 fields — first name / last name / mobile number (ชื่อ / นามสกุล / เบอร์มือถือ), labels above — then the full-width green submit (the card's only button), a consent note (one short muted sentence, 0.78rem, which may wrap to two lines on mobile), and the lock line as the card's last line. A 'Takes 5 minutes' / 'ใช้เวลา 5 นาที' amber tag (#FFB020, text #2A1A00, 0.8rem weight 700, pill) at position: absolute; top: -18px; right: 24px, so it straddles the card's top edge - Two greens, two jobs. CTA green #12C26B (primary) fills buttons, the 6px form top edge, step discs, progress bars, the active sidebar item and the tab underline. On light backgrounds every icon, check, lock line, FAQ toggle, eyebrow, text link ('See all') and default badge uses success #0B7A42 (5.4:1 on white — never #12C26B text on light, ~2.2:1); a default badge is #0B7A42 text on a 12% #0B7A42 tint. Never use either green for illustrations, glows or body decoration - CTA button: #12C26B with dark #03210F text and a ledge shadow 0 4px 0 #0A7A42 (pressed: 0 1px 0 #0A7A42 + translateY(3px)). The hero submit button alone gets a pulse ring: box-shadow 0 0 0 0 rgba(18,194,107,.5) → 0 0 0 14px rgba(18,194,107,0), 2.4s ease-out infinite (kept with the ledge), only inside @media (prefers-reduced-motion: no-preference) - What sits under each CTA (one rule): hero form and inner-page form buttons get the lock line — 15px lock icon + '256-bit encryption · Funds held at a Thai bank' / 'เข้ารหัส 256 บิต · เงินเก็บที่ธนาคารไทย', 0.82rem weight 600, #0B7A42 on white. The mid-page navy band and the final green band get one check line under the inline input + button — 'No minimum balance · Cancel any time' / 'ไม่มีขั้นต่ำ · ยกเลิกได้ทุกเมื่อ' (rgba(255,255,255,.8) with a #12C26B check on navy; #03210F with a navy check on green). The header CTA gets nothing - ★★★★★ 4.8/5 rating line — star colour #F5A300 on white, #FFC85A on navy — under the hero copy and on top of every testimonial card (not under the CTAs) - The CTA block repeats twice down the page. Each CTA band is a container-width block (inside the page container, not full-bleed) with radius 20px and 56px vertical padding (32px sides, 20px below 640px), holding a centred heading, a sub-line, an inline input for the mobile number only (placeholder 'Mobile number' / 'เบอร์มือถือ') + one button, and the check line. The band input is 58px tall to match the lg button, white fill, radius 10px — 0 border on the navy band, a 1.5px #0B2A5B border on the green band; on focus it gets no green halo, only the outline (3px #FFB020 on navy, 3px #0B2A5B on green). First comes a navy-gradient band (white heading, green #12C26B button with #03210F label); last a solid #12C26B band whose copy (heading, sub-line, check line) is #03210F and whose button is navy #0B2A5B with a white label and ledge 0 4px 0 #04142E. Both bands' buttons follow the one button rule (hover brightness 1.05 + translateY(-1px); pressed translateY(3px), ledge 0 1px 0). Never put white text on #12C26B (2.4:1) ## Design tokens — use these exact values Colours (light mode): - background #F4F7FB - surface #FFFFFF - surface-2 #E8EEF7 - text #0B1B33 - text-muted #4A5A72 - primary #12C26B (text on it #03210F) - secondary #0B2A5B (text on it #FFFFFF) - accent #FFB020 - border #D3DCE8 - success #0B7A42 · warning #A35F00 · danger #C9271B - chart series #0B2A5B, #4C7DF0, #FFB020, #8DA2C0, #A35F00 Radius: sm 6px, md 10px, lg 14px, xl 20px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(11,27,51,0.08)`, md `0 8px 24px rgba(11,27,51,0.10)`, lg `0 24px 60px rgba(11,27,51,0.20)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 160ms cubic-bezier(.2,.7,.3,1) ## Typography (Latin + Thai) - Headings: Manrope 700/800 with Thai fallback Noto Sans Thai 700/800 - Body: Inter 400/500/600/700 with Thai fallback IBM Plex Sans Thai 400/500/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap - CSS stacks: heading `"Manrope", "Noto Sans Thai", system-ui, sans-serif`; body `"Inter", "IBM Plex Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4rem), heading weight 800, 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: Noto Sans Thai at 800 matches Manrope’s sturdy, geometric headlines; IBM Plex Sans Thai pairs with Inter as a neutral, trustworthy reading face for forms and fine print. ## Components - Allowed off-token extras (decoration only): ledge shadow 0 4px 0 #0A7A42 (pressed 0 1px 0), form shadow 0 30px 80px rgba(0,0,0,.35), stars #F5A300 on white / #FFC85A on navy, navy gradient linear-gradient(160deg,#0B2A5B,#071A39), tag/ribbon text #2A1A00, navy-button ledge #04142E, hero blue glow rgba(76,125,240,.18), on-navy amber pill rgba(255,176,32,.16)/.45 with #FFC85A text, focus outline #0B2A5B / #FFB020 - Buttons, one rule for every green or navy button: hover = filter brightness(1.05) + translateY(-1px); pressed = translateY(3px) with the ledge shrinking to 0 1px 0. Primary: 58–60px tall at lg, radius 10px, weight 700, #12C26B with #03210F label and ledge 0 4px 0 #0A7A42. Navy (#0B2A5B, white label) uses ledge 0 4px 0 #04142E. Secondary is white with a 1px #D3DCE8 border; the header 'Log in' is a ghost link in #0B1B33 whose hover is #0B2A5B text with a 2px underline (4px offset), no fill. Never two greens competing in one view - Inputs: 50px tall, 1.5px #D3DCE8 border (overrides the 1px border token), radius 10px; focus = #0B7A42 border and a 4px #12C26B halo at 22% (the CTA-band inputs are the one exception, described above); labels always visible above the field. Keyboard focus on any button, link or field: 3px #0B2A5B outline at 2px offset on light backgrounds and on the #12C26B band, 3px #FFB020 outline on navy - Trust strip: a white strip right under the hero, an optional muted heading line above it (body font, 0.95rem weight 600, #4A5A72), then 4–5 pill badges on #E8EEF7 with #0B7A42 line icons — one centred row on desktop that wraps onto extra centred rows below 640px (pills shrink to 8px 12px padding, 0.82rem) - Stats: a full-width #E8EEF7 band with 4 columns; big navy #0B2A5B numbers sit directly on the band (no cards), centred over a muted #4A5A72 label - Testimonial cards: white, 1px border, five #F5A300 stars on top, quote in body font weight 500, avatar + name + role - FAQ: separate white rounded cards per question, #0B7A42 +/− toggles — written to answer objections - Steps: #12C26B 48px number discs with #03210F numerals and a soft 6px green halo ring at 18% - Badges: default = #0B7A42 text on a 12% #0B7A42 tint, radius 6px; status badges keep their own success/warning/danger tints; money amounts in lists sit in neutral pills (#E8EEF7 fill, #0B1B33 text, tabular numbers), never in green; the solid badge is amber #FFB020 with #2A1A00 text - Checkboxes, radios and switches when on: #0B7A42 fill with white mark; selected radio card = #0B7A42 border + 7% green tint - Dashboard: navy #0B2A5B sidebar with white text, active item filled #12C26B; funnel widget in green tints (it is the goal metric); chart series come from the chart tokens (#0B2A5B navy, #4C7DF0 blue, #FFB020 amber, #8DA2C0 slate, #A35F00 brown); the line chart is navy #0B2A5B main series vs #4C7DF0 blue comparison — never green for a data series - Inner-page form footer: one flex row — display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px. The help line (lock icon + PDPA consent text, itself display:flex; gap:8px) takes flex:1 1 220px on the left, then 'Save for later' (secondary) and the green submit side by side on the same line at desktop widths. The aside card is navy #0B2A5B with white text; its check icons are bright #12C26B (the dark #0B7A42 is only for icons on light backgrounds) - Footer: small, on white — one row with the logo on the left and at most 4 legal/help links (Help centre, Report fraud, Privacy, Terms) on the right, then a hairline and the licence line. No product, company or social nav — every link is an exit ## 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: copy on the left and a sign-up form card on the right. Navigation: bar style. Sections in order: hero → trust → stats → testimonials → cta → steps → faq → cta. Feature section as list. This overrides the generic landing outline: the hero has a headline, a sub-headline and a sign-up form card with ONE submit button — no second CTA and no product visual; 'bar' navigation here means logo + Log in + CTA only, with no links; and there is no features section at all, so ignore any 'feature section as …' line. Landing order: urgency ribbon + stripped header → navy hero band (copy, promise check, rating | form card) → white trust badge strip → #E8EEF7 stats band → testimonials with stars → navy CTA band → 3 steps → FAQ → final green CTA band → small one-row footer. The trust strip, stats and steps replace a features section. Every 2–3 sections the visitor meets the CTA again. Below 960px the hero stacks in the same order — eyebrow pill, headline, lead, promise line, rating line, then the form card — with no image. Eyebrows on light sections are #0B7A42 weight 700; the hero eyebrow is the amber pill described above. Keep copy short and benefit-led, one offer only. Inner pages keep the green-top elevated form card with the lock line under its submit button and a navy aside listing what you get; the dashboard is a calm navy-and-white app where only the goal metric and the action button are green. Article and inline images are never empty and never hue-shifted: the navy gradient with the soft blue glow plus on-style content, e.g. a centred mini 'Tax pocket · 62%' card (translucent white fill rgba(255,255,255,.07), 1px rgba(255,255,255,.16) border, radius 14px, white text, an 8px #12C26B progress bar — progress, which green is allowed for) and the brand name in a solid amber badge. Related-post thumbnails vary only between on-palette gradients: navy #0B2A5B→#071A39, blue #4C7DF0→#0B2A5B, and navy with a small #FFB020 tag pill. ## Content Use realistic product copy (fictional brand) suited to: Fintech account opening and sign-up pages. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Reserve bright green #12C26B for actions and progress (plus small checks on navy); on light backgrounds use the darker success #0B7A42 for icons and trust text (5.4:1 on white) — never green for decoration - Put the form or CTA above the fold and repeat it every 2–3 sections - Put a lock line under every form button and a check line (no minimum · cancel any time) under every CTA band - Keep the hero form to 3 fields (first name, last name, mobile); ask for the rest after sign-up ## Don't - Don’t show the full site navigation — every link is an exit - Don’t use fake countdowns or invented scarcity - Don’t give two different goals equal weight on one page - Showing the full site navigation or multiple competing offers - Bright #12C26B on icons on light backgrounds, illustrations, chart series, glows or decoration — on light, icons use success #0B7A42; the only green icons are the small checks on navy, and the only green chart is the funnel (the goal metric) - Fake countdown timers or invented scarcity — urgency must be real and dated - Forms with more than 3 fields above the fold - Moving trust signals away from the buttons into a distant footer - Calm, unhurried institutional styling with no repeated CTA (that reads as Trust & Authority) - Green words or a gradient in the hero headline — the headline stays solid white; no green words - White text on the #12C26B band, or a rating line stacked under every button ## Stack notes One self-contained HTML file with a