Minimal & Direct

Also called: Single-screen landing, Straight-to-the-point page, One-liner landing

The whole landing page is one screen: one plain sentence that says what it does, one button, and nothing else.

“One sentence, one button”Landing Page PatternsEra: 2020sCalmSeriousTrustworthy

minimal-direct / landingEN

minimal-direct / 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 lg16pxRadius xl24pxDensity×1.2Display 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.

one screen landingone sentenceone buttonno navigationcentred single columnwarm white backgroundblack pill buttonno decoration

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

Not to be confused with

Exaggerated Minimalism →Exaggerated minimalism makes the type huge as a statement; Minimal & Direct keeps one sentence at a calm, readable size with one button.Minimalism & Swiss Style →Swiss style is a grid-driven editorial system with rules and red accents; Minimal & Direct is a single centred sentence and button with no grid on show.Hero-Centric Design →Hero-centric pages put a giant headline over a full-bleed image; Minimal & Direct has no image at all.

On mobile

Each screen does one thing: a title, at most one short line of help, the content, and one full-width black pill at the bottom. Lists are hairline-separated rows on the background, not cards; the tab bar is text-light with a single dot for the active tab.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinGeist · 500/600

The quick brown fox

Heading · ThaiAnuphan · 500/600

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

Body · LatinGeist · 400/500

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500

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

Anuphan is a modern loopless Thai sans with Geist’s neutral, slightly geometric construction, so one sentence reads as one voice in both scripts.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 12px · lg 16px · xl 24px · pill 999px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.25rem, 4.6vw, 3.75rem)`
Motion	`200ms ease`
Density	`×1.2`

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 · Minimal & Direct (minimal-direct) — 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=Geist:wght@400;500;600&family=Geist+Mono:wght@400&family=Anuphan:wght@400;500;600&display=swap
 */
:root {
  --radius: 16px;
  --background: #F6F5F1;
  --foreground: #121212;
  --card: #FFFFFF;
  --card-foreground: #121212;
  --popover: #FFFFFF;
  --popover-foreground: #121212;
  --primary: #121212;
  --primary-foreground: #F6F5F1;
  --secondary: #E6E4DD;
  --secondary-foreground: #121212;
  --muted: #EEEDE7;
  --muted-foreground: #5F5E59;
  --accent: #EEEDE7;
  --accent-foreground: #121212;
  --destructive: #C42B1C;
  --border: #DCDAD2;
  --input: #DCDAD2;
  --ring: #121212;
  --chart-1: #121212;
  --chart-2: #2F5BFF;
  --chart-3: #9B9890;
  --chart-4: #C9C6BD;
  --chart-5: #5F5E59;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #121212;
  --sidebar-primary: #121212;
  --sidebar-primary-foreground: #F6F5F1;
  --sidebar-accent: #EEEDE7;
  --sidebar-accent-foreground: #121212;
  --sidebar-border: #DCDAD2;
  --sidebar-ring: #121212;
}

.dark {
  --background: #0F0F0E;
  --foreground: #F3F2EE;
  --card: #171716;
  --card-foreground: #F3F2EE;
  --popover: #171716;
  --popover-foreground: #F3F2EE;
  --primary: #F3F2EE;
  --primary-foreground: #0F0F0E;
  --secondary: #262624;
  --secondary-foreground: #F3F2EE;
  --muted: #1F1F1D;
  --muted-foreground: #A09F99;
  --accent: #1F1F1D;
  --accent-foreground: #F3F2EE;
  --destructive: #FF6B5E;
  --border: #2C2C2A;
  --input: #2C2C2A;
  --ring: #F3F2EE;
  --chart-1: #F3F2EE;
  --chart-2: #7B95FF;
  --chart-3: #77766F;
  --chart-4: #4A4945;
  --chart-5: #A09F99;
  --sidebar: #171716;
  --sidebar-foreground: #F3F2EE;
  --sidebar-primary: #F3F2EE;
  --sidebar-primary-foreground: #0F0F0E;
  --sidebar-accent: #1F1F1D;
  --sidebar-accent-foreground: #F3F2EE;
  --sidebar-border: #2C2C2A;
  --sidebar-ring: #F3F2EE;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Minimal & Direct (minimal-direct) — 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=Geist:wght@400;500;600&family=Geist+Mono:wght@400&family=Anuphan:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F6F5F1;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEEDE7;
  --color-text: #121212;
  --color-text-muted: #5F5E59;
  --color-primary: #121212;
  --color-on-primary: #F6F5F1;
  --color-secondary: #E6E4DD;
  --color-on-secondary: #121212;
  --color-accent: #2F5BFF;
  --color-border: #DCDAD2;
  --color-success: #1F7A45;
  --color-warning: #9A6400;
  --color-danger: #C42B1C;
  --color-chart-1: #121212;
  --color-chart-2: #2F5BFF;
  --color-chart-3: #9B9890;
  --color-chart-4: #C9C6BD;
  --color-chart-5: #5F5E59;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 24px 60px rgba(18,18,18,0.06);
  --font-heading: "Geist", "Anuphan", system-ui, sans-serif;
  --font-body: "Geist", "Anuphan", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0F0F0E;
  --color-surface: #171716;
  --color-surface-2: #1F1F1D;
  --color-text: #F3F2EE;
  --color-text-muted: #A09F99;
  --color-primary: #F3F2EE;
  --color-on-primary: #0F0F0E;
  --color-secondary: #262624;
  --color-on-secondary: #F3F2EE;
  --color-accent: #7B95FF;
  --color-border: #2C2C2A;
  --color-success: #4CC38A;
  --color-warning: #E0A53C;
  --color-danger: #FF6B5E;
  --color-chart-1: #F3F2EE;
  --color-chart-2: #7B95FF;
  --color-chart-3: #77766F;
  --color-chart-4: #4A4945;
  --color-chart-5: #A09F99;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Minimal & Direct (minimal-direct). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&family=Anuphan:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9608,
            0.9451
          ],
          "hex": "#f6f5f1"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9294,
            0.9059
          ],
          "hex": "#eeede7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0706,
            0.0706
          ],
          "hex": "#121212"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.3686,
            0.349
          ],
          "hex": "#5f5e59"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0706,
            0.0706
          ],
          "hex": "#121212"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9608,
            0.9451
          ],
          "hex": "#f6f5f1"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8941,
            0.8667
          ],
          "hex": "#e6e4dd"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0706,
            0.0706
          ],
          "hex": "#121212"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.3569,
            1
          ],
          "hex": "#2f5bff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.8549,
            0.8235
          ],
          "hex": "#dcdad2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4784,
            0.2706
          ],
          "hex": "#1f7a45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3922,
            0
          ],
          "hex": "#9a6400"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.1686,
            0.1098
          ],
          "hex": "#c42b1c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0706,
            0.0706
          ],
          "hex": "#121212"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.3569,
            1
          ],
          "hex": "#2f5bff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.5961,
            0.5647
          ],
          "hex": "#9b9890"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7765,
            0.7412
          ],
          "hex": "#c9c6bd"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.3686,
            0.349
          ],
          "hex": "#5f5e59"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0588,
            0.0549
          ],
          "hex": "#0f0f0e"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0902,
            0.0863
          ],
          "hex": "#171716"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.1216,
            0.1137
          ],
          "hex": "#1f1f1d"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.949,
            0.9333
          ],
          "hex": "#f3f2ee"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.6235,
            0.6
          ],
          "hex": "#a09f99"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.949,
            0.9333
          ],
          "hex": "#f3f2ee"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0588,
            0.0549
          ],
          "hex": "#0f0f0e"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.149,
            0.149,
            0.1412
          ],
          "hex": "#262624"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.949,
            0.9333
          ],
          "hex": "#f3f2ee"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.5843,
            1
          ],
          "hex": "#7b95ff"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1725,
            0.1647
          ],
          "hex": "#2c2c2a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7647,
            0.5412
          ],
          "hex": "#4cc38a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6471,
            0.2353
          ],
          "hex": "#e0a53c"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.3686
          ],
          "hex": "#ff6b5e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.949,
            0.9333
          ],
          "hex": "#f3f2ee"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.5843,
            1
          ],
          "hex": "#7b95ff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4667,
            0.4627,
            0.4353
          ],
          "hex": "#77766f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.2863,
            0.2706
          ],
          "hex": "#4a4945"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.6235,
            0.6
          ],
          "hex": "#a09f99"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0706,
              0.0706,
              0.0706
            ],
            "hex": "#121212",
            "alpha": 0.06
          },
          "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": [
        "Geist",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Geist",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Geist Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.1,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.2
  }
}

Prompt builder

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

PageTech stackContent languageMode

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