AI SaaS Template

Este análisis aún no está disponible en español, así que se muestra en inglés.

Overall

SaaS landing page, modern and clean, medium density, light

Palette

background #FFFFFF; surfaces #FFFFFF, #F8F9FA; text #000000; muted text #6C757D; primary #000000; accents #000000, #1A1A1A

Type

headings Inter, 700, sentence-case; body Inter, 16px; scale h1 64px, h2 32px, h3 24px

Shape & spacing

button radius 8px, card radius 12px, borders none, shadows soft drop (0 4px 12px rgba(0,0,0,0.05)), section spacing 80px, content width 1200px

Sections (top to bottom)

• Header — horizontal layout, logo on left, nav links centered, login/signup on right, white background
• Hero — full-width, two-column layout (text on left, image on right), large headline, subheadline, two CTA buttons (primary and secondary), subtle funding badge above headline
• Dashboard preview — full-width, embedded screenshot of product interface with sidebar navigation, metrics cards (Total Users, New Signups, Conversion Rate), charts below, light gray background
• Mobile view overlay — smaller version of hero section, same layout but stacked, hamburger menu on top-right

Signature details

• Floating dashboard mockup with rounded corners and soft shadow
• Subtle grid pattern in background behind hero text
• Consistent use of black text on white for high contrast
• Minimalist UI with no decorative elements
• Rounded corners on all interactive elements
• Clean typography hierarchy with generous line height

Other pages

• /pricing: pricing table with three tiers, feature comparison
• /blog: blog list with featured article at top, card layout
• /contact: contact form with fields and map placeholder

1. 1

   Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.

2. 2

   Añade al briefing tu marca, tu público, las páginas y el contenido.

3. 3

   Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.