# Minimal & Direct > The whole landing page is one screen: one plain sentence that says what it does, one button, and nothing else. - Nickname: One sentence, one button - Also called: Single-screen landing, Straight-to-the-point page, One-liner landing - Category: Landing Page Patterns - Moods: Calm, Serious, Trustworthy - Industries: AI Products, Startup & Tech, SaaS, Creative & Portfolio, Web3 & Crypto - Style page: https://uilingo.dev/styles/minimal-direct/ A landing pattern that trusts the product to speak for itself. There is no hero image, no feature grid, no testimonials and no footer — just the logo, one sentence set at a readable size in the middle of a calm, warm-white screen, and one black pill button. Every other screen follows the same rule: one clear task per view, generous whitespace, hairline separators instead of boxes, and no decoration. The directness is the brand. ## Best for - Pre-launch and waitlist pages - AI and developer tools with a self-explanatory product - Apps with one obvious action - Personal sites and tiny utilities ## Avoid for - Products that must explain pricing or many features - SEO-heavy marketing sites - Audiences that need lots of reassurance (banking, health) ## Do - Write the sentence first; if it needs a second sentence, the product is not ready for this pattern - Set the sentence at 2.25–3.75rem, weight 500, max ~18 characters per em width (≈18ch line) - Use exactly one filled button per screen; everything else is a text link - Keep the page to 100vh with the content optically centred ## Don't - Don’t add feature grids, logo strips or testimonials below the fold - Don’t blow the type up to poster size — directness, not drama - Don’t add illustrations, gradients or shadows to fill the space ## 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 "Minimal & Direct" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The whole landing page is one screen: one plain sentence that says what it does, one button, and nothing else. Design keywords: one screen landing, one sentence, one button, no navigation, centred single column, warm white background, black pill button, no decoration. ## Visual language A single quiet screen on warm off-white (#F6F5F1): a small round black logo and a 'Sign in' text link at the top, and in the optical centre one plain sentence that says what the product does, set in a medium-weight neutral sans at a calm 2.25–3.75rem, followed by one black pill button with an arrow and a tiny line of microcopy. No image, no eyebrow, no sub-headline, no sections below, no footer. The rest of the product keeps the same restraint — hairline borders instead of shadows, one action per screen, near-monochrome with a single blue reserved for focus and a second data series. ## Signature details (must be visible) - Landing = exactly one viewport (min-height 100vh minus the 68px header), content centred horizontally and vertically, nothing below it - One sentence as the headline: weight 500, line-height 1.12, letter-spacing -0.025em, max-width 18ch, text-wrap: balance — never larger than ~3.75rem - One button: black #121212 pill, 56px tall, label in #F6F5F1, arrow icon that slides 4px right on hover; no secondary button on the same screen - No eyebrow, lead paragraph, product shot, logo strip or footer on the landing page; header shows only the logo and a muted 'Sign in' text link - Surfaces: 1px #DCDAD2 hairlines, radius 12–16px, box-shadow: none everywhere - Badges are text with a 6px status dot (no filled pills); avatars and icon tiles are hairline circles - Focus ring: 2px solid #2F5BFF outline, offset 2px — the only colour in the UI besides status colours ## Design tokens — use these exact values Colours (light mode): - background #F6F5F1 - surface #FFFFFF - surface-2 #EEEDE7 - text #121212 - text-muted #5F5E59 - primary #121212 (text on it #F6F5F1) - secondary #E6E4DD (text on it #121212) - accent #2F5BFF - border #DCDAD2 - success #1F7A45 · warning #9A6400 · danger #C42B1C - chart series #121212, #2F5BFF, #9B9890, #C9C6BD, #5F5E59 Radius: sm 8px, md 12px, lg 16px, xl 24px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `0 24px 60px rgba(18,18,18,0.06)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.2 density Motion: 200ms ease ## Typography (Latin + Thai) - Headings: Geist 500/600 with Thai fallback Anuphan 500/600 - Body: Geist 400/500 with Thai fallback Anuphan 400/500 - Mono: Geist Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&family=Anuphan:wght@400;500;600&display=swap - CSS stacks: heading `"Geist", "Anuphan", system-ui, sans-serif`; body `"Geist", "Anuphan", system-ui, sans-serif`; mono `"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.25rem, 4.6vw, 3.75rem), heading weight 500, 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: Anuphan is a modern loopless Thai sans with Geist’s neutral, slightly geometric construction, so one sentence reads as one voice in both scripts. ## Components - Primary button: black pill, weight 500; hover = 14% lighter, no lift, no glow. Secondary: transparent pill with hairline border. Ghost: muted text that underlines on hover - Inputs: white fill, 1px hairline, radius 12px; focus = border turns #121212, no halo - Cards: white or transparent with a hairline, no shadow; hover only darkens the border - Segmented control and chips: hairline pills; selected = solid black with off-white text - Switch and checkbox: checked = black; progress bars are 4px black lines on #EEEDE7 - Dashboard: icon rail with a round black active item, KPIs as borderless columns separated by a left hairline with 2.6rem numbers, a black 1.75px line chart (no area fill) with a blue dashed comparison - Lists: hairline-separated rows directly on the background, never boxed in cards - Article: centred 720px column, medium-weight title, pull quote as a centred plain sentence, figures as flat #EEEDE7 panels ## 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: minimal style. Sections in order: hero. Feature section as list. The landing page has one section: the hero. Logo top-left, 'Sign in' top-right, then the sentence, one button and one line of microcopy centred in the viewport. Inner pages (form, article, dashboard) keep the default navigation but stay sparse: lots of whitespace (density 1.2), flat hairline cards, a single filled black button per view, and at most three dashboard widgets (KPIs, one chart, activity) on an icon rail. ## Content Use realistic product copy (fictional brand) suited to: Pre-launch and waitlist 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 - Write the sentence first; if it needs a second sentence, the product is not ready for this pattern - Set the sentence at 2.25–3.75rem, weight 500, max ~18 characters per em width (≈18ch line) - Use exactly one filled button per screen; everything else is a text link - Keep the page to 100vh with the content optically centred ## Don't - Don’t add feature grids, logo strips or testimonials below the fold - Don’t blow the type up to poster size — directness, not drama - Don’t add illustrations, gradients or shadows to fill the space - Adding any section below the hero — features, testimonials, pricing, FAQ or a footer - Poster-sized type or extreme letter-spacing (that is Exaggerated Minimalism) - Visible grids, numbered sections and a red accent (that reads as Swiss style) - A background image, gradient or illustration behind the sentence (that becomes Hero-Centric) - Two buttons of equal weight, drop shadows, or decorative icons filling the empty space - A sub-headline that explains the headline — if it needs one, rewrite the sentence ## Stack notes One self-contained HTML file with a