Minimal UI/UX

Overview

Design and implement minimalist UI screens in pure HTML/CSS, optimized for clarity, hierarchy, and usability.

Core Guidelines

• •Use only white, black, and grayscale tones; prioritize contrast for readability.
• •Use Inter as the primary font with modest sizes and clear hierarchy.
• •Keep layouts sparse: meaningful whitespace, no visual noise, no decorative clutter.
• •Use semantic HTML and modern CSS (flex/grid). No JS unless explicitly requested.
• •Ensure the UI is intuitive: obvious primary actions, legible labels, and predictable structure.

Typography & Hierarchy

• •Default body: 14–16px; headings scale gently (e.g., 20–28px).
• •Use font-weight for hierarchy before size jumps.
• •Limit to 2–3 text sizes per view.
• •Line-height: 1.4–1.6 for body text.

Layout & Components

• •Prefer centered, single-column layouts for login/forms; use max-width 360–480px.
• •Dashboards: use a clean grid with 2–3 columns on desktop, single column on mobile.
• •Buttons: clear primary vs secondary (filled vs outline), high contrast, consistent padding.
• •Inputs: full-width, clear labels, subtle borders, visible focus states.

Output Requirements

• •Deliver a complete HTML file and an embedded or separate CSS block.
• •Include CSS variables for grayscale palette and spacing scale.
• •Ensure responsive behavior (mobile-first).
• •Keep all assets self-contained (no external images).

Example Requests Covered

• •“Diseña un login minimalista para una app de voluntariado.”
• •“Elabora un dashboard con información visible en todo momento e importante.”
• •“Elabora un formulario simple en estilo vertical y con botones de acción diferenciables.”