Conversion-Optimized

Also called: High-converting landing page, Lead-gen page, Squeeze page

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.

“Sign-up machine”Landing Page PatternsEra: 2010s → today (growth marketing)TrustworthyBoldSerious

Open full screen ↗

conversion-optimized / landingEN

conversion-optimized / 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 sm6pxRadius md10pxRadius lg14pxRadius xl20pxDensity×0.95Display 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.

form in the herosingle goal pageno nav linksrepeated CTAtrust badges next to the buttonurgency ribbonstar ratingsone bright CTA colour

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

Not to be confused with

Trust & Authority →Trust & Authority is a calm institutional look built on credentials; Conversion-Optimized is a pushy single-goal page with a form in the hero and a CTA repeated everywhere.Social Proof-Focused →Social-proof pages are built around testimonials and logos; here proof is a supporting strip beside the form and the action is the centre.Feature-Rich Showcase →Feature-rich pages explain many features with tabs and comparisons; Conversion-Optimized cuts content down to one offer and one button.

On mobile

Form and payment screens end with a sticky full-width green CTA on a white bar with the #0B7A42 lock line right under it; forms ask for 2–3 fields per step; home and profile keep the tab bar instead.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinManrope · 700/800

The quick brown fox

Heading · ThaiNoto Sans Thai · 700/800

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

Body · LatinInter · 400/500/600/700

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/600/700

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 14px · xl 20px · pill 999px`
Border	`1px`
Shadow	`0 8px 24px rgba(11,27,51,0.10)`
Display	`clamp(2.5rem, 5vw, 4rem)`
Motion	`160ms cubic-bezier(.2,.7,.3,1)`
Density	`×0.95`

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 · Conversion-Optimized (conversion-optimized) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * 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=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
 */
:root {
  --radius: 14px;
  --background: #F4F7FB;
  --foreground: #0B1B33;
  --card: #FFFFFF;
  --card-foreground: #0B1B33;
  --popover: #FFFFFF;
  --popover-foreground: #0B1B33;
  --primary: #12C26B;
  --primary-foreground: #03210F;
  --secondary: #0B2A5B;
  --secondary-foreground: #FFFFFF;
  --muted: #E8EEF7;
  --muted-foreground: #4A5A72;
  --accent: #E8EEF7;
  --accent-foreground: #0B1B33;
  --destructive: #C9271B;
  --border: #D3DCE8;
  --input: #D3DCE8;
  --ring: #12C26B;
  --chart-1: #0B2A5B;
  --chart-2: #4C7DF0;
  --chart-3: #FFB020;
  --chart-4: #8DA2C0;
  --chart-5: #A35F00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B1B33;
  --sidebar-primary: #12C26B;
  --sidebar-primary-foreground: #03210F;
  --sidebar-accent: #E8EEF7;
  --sidebar-accent-foreground: #0B1B33;
  --sidebar-border: #D3DCE8;
  --sidebar-ring: #12C26B;
}

.dark {
  --background: #08131F;
  --foreground: #EEF3FA;
  --card: #0F1E30;
  --card-foreground: #EEF3FA;
  --popover: #0F1E30;
  --popover-foreground: #EEF3FA;
  --primary: #22D37A;
  --primary-foreground: #03210F;
  --secondary: #8FB4FF;
  --secondary-foreground: #08131F;
  --muted: #16283D;
  --muted-foreground: #9FB0C6;
  --accent: #16283D;
  --accent-foreground: #EEF3FA;
  --destructive: #FF6B5E;
  --border: #22364F;
  --input: #22364F;
  --ring: #22D37A;
  --chart-1: #8FB4FF;
  --chart-2: #C3A6FF;
  --chart-3: #FFC14D;
  --chart-4: #5E7391;
  --chart-5: #FF9F5A;
  --sidebar: #0F1E30;
  --sidebar-foreground: #EEF3FA;
  --sidebar-primary: #22D37A;
  --sidebar-primary-foreground: #03210F;
  --sidebar-accent: #16283D;
  --sidebar-accent-foreground: #EEF3FA;
  --sidebar-border: #22364F;
  --sidebar-ring: #22D37A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Conversion-Optimized (conversion-optimized) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * 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=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
 */
@theme {
  --color-bg: #F4F7FB;
  --color-surface: #FFFFFF;
  --color-surface-2: #E8EEF7;
  --color-text: #0B1B33;
  --color-text-muted: #4A5A72;
  --color-primary: #12C26B;
  --color-on-primary: #03210F;
  --color-secondary: #0B2A5B;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FFB020;
  --color-border: #D3DCE8;
  --color-success: #0B7A42;
  --color-warning: #A35F00;
  --color-danger: #C9271B;
  --color-chart-1: #0B2A5B;
  --color-chart-2: #4C7DF0;
  --color-chart-3: #FFB020;
  --color-chart-4: #8DA2C0;
  --color-chart-5: #A35F00;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11,27,51,0.08);
  --shadow-md: 0 8px 24px rgba(11,27,51,0.10);
  --shadow-lg: 0 24px 60px rgba(11,27,51,0.20);
  --font-heading: "Manrope", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Inter", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #08131F;
  --color-surface: #0F1E30;
  --color-surface-2: #16283D;
  --color-text: #EEF3FA;
  --color-text-muted: #9FB0C6;
  --color-primary: #22D37A;
  --color-on-primary: #03210F;
  --color-secondary: #8FB4FF;
  --color-on-secondary: #08131F;
  --color-accent: #FFC14D;
  --color-border: #22364F;
  --color-success: #3BD68A;
  --color-warning: #FFC14D;
  --color-danger: #FF6B5E;
  --color-chart-1: #8FB4FF;
  --color-chart-2: #C3A6FF;
  --color-chart-3: #FFC14D;
  --color-chart-4: #5E7391;
  --color-chart-5: #FF9F5A;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Conversion-Optimized (conversion-optimized). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9686,
            0.9843
          ],
          "hex": "#f4f7fb"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.9333,
            0.9686
          ],
          "hex": "#e8eef7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1059,
            0.2
          ],
          "hex": "#0b1b33"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3529,
            0.4471
          ],
          "hex": "#4a5a72"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.7608,
            0.4196
          ],
          "hex": "#12c26b"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0118,
            0.1294,
            0.0588
          ],
          "hex": "#03210f"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1647,
            0.3569
          ],
          "hex": "#0b2a5b"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0.1255
          ],
          "hex": "#ffb020"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8627,
            0.9098
          ],
          "hex": "#d3dce8"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.4784,
            0.2588
          ],
          "hex": "#0b7a42"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.1529,
            0.1059
          ],
          "hex": "#c9271b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.1647,
            0.3569
          ],
          "hex": "#0b2a5b"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.4902,
            0.9412
          ],
          "hex": "#4c7df0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6902,
            0.1255
          ],
          "hex": "#ffb020"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5529,
            0.6353,
            0.7529
          ],
          "hex": "#8da2c0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0745,
            0.1216
          ],
          "hex": "#08131f"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.1176,
            0.1882
          ],
          "hex": "#0f1e30"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1569,
            0.2392
          ],
          "hex": "#16283d"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9529,
            0.9804
          ],
          "hex": "#eef3fa"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.6902,
            0.7765
          ],
          "hex": "#9fb0c6"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.8275,
            0.4784
          ],
          "hex": "#22d37a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0118,
            0.1294,
            0.0588
          ],
          "hex": "#03210f"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.7059,
            1
          ],
          "hex": "#8fb4ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.0745,
            0.1216
          ],
          "hex": "#08131f"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.302
          ],
          "hex": "#ffc14d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.2118,
            0.3098
          ],
          "hex": "#22364f"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.8392,
            0.5412
          ],
          "hex": "#3bd68a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.302
          ],
          "hex": "#ffc14d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.3686
          ],
          "hex": "#ff6b5e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.7059,
            1
          ],
          "hex": "#8fb4ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7647,
            0.651,
            1
          ],
          "hex": "#c3a6ff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.302
          ],
          "hex": "#ffc14d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.451,
            0.5686
          ],
          "hex": "#5e7391"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6235,
            0.3529
          ],
          "hex": "#ff9f5a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "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.0431,
              0.1059,
              0.2
            ],
            "hex": "#0b1b33",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.1059,
              0.2
            ],
            "hex": "#0b1b33",
            "alpha": 0.1
          },
          "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.0431,
              0.1059,
              0.2
            ],
            "hex": "#0b1b33",
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 5
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!