Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukreveladorDesarrollamos herramientas de IA para empresas. De alta calidad. A precios asequibles.Escribir por Telegram
Steep — una vista previa de un sitio con este estilo

Steep

Análisis de fuentes con serifa en papel cálido

Steep presenta los análisis como contenido editorial: los titulares con serifa Signifier flotan sobre un lienzo blanco casi monocromático, y un único acento de color melocotón cálido (#fbe1d1) subraya el sistema, por lo demás acromático. La página se lee como una doble página de una revista de productos: tipografía grande y cursiva, amplio espacio para texto, tarjetas grandes con bordes suaves de 24 px de radio y controles en forma de píldora integrados en la superficie. Los componentes se sienten tranquilos y ligeros: las sombras son sutiles, los bordes son finos y el color se usa para enfatizar la funcionalidad (llamada melocotón, letras marrón oscuro sobre fondo melocotón). Las superficies de producto (tablas de regiones, diagramas de activación, constructores de IA) se presentan como elementos flotantes alrededor del encabezado en lugar de estar anidadas dentro de la estructura del panel.

El diseño de la página tiene un ancho máximo de 1200 px, centrado, con las secciones principales ocupando casi todo el ancho de la página pero manteniéndose dentro del contenedor. El diseño principal presenta un encabezado centrado con una fuente serif grande, un subencabezado y un par de botones de píldora, rodeados por cuatro tarjetas flotantes de descripción de productos (tabla de región arriba a la izquierda, tarjeta de registro a la derecha, diagrama de activación abajo a la izquierda, editor de IA abajo al centro) que se superponen a un lienzo blanco con diferentes desplazamientos. Las secciones alternan entre fondos Paper White y Card Mist, creando un ritmo tranquilo sin un fuerte contraste. Las secciones de características utilizan un diseño de dos columnas de texto e interfaz de usuario con amplios márgenes verticales de 80 px. La navegación es una única barra superior transparente (sin fondo, borde ni sombra) con el logotipo a la izquierda, enlaces de navegación en el centro y dos llamadas a la acción (enlace de texto + botón de píldora relleno) a la derecha. La densidad general del diseño es espaciosa: la página "respira" entre secciones y el contenido nunca se satura en los bordes.

El diseño visual se centra en el producto, no en el estilo de vida: los elementos flotantes de la interfaz de usuario (tablas regionales con datos de cinco filas, gráficos lineales que muestran las activaciones de agosto a noviembre, anillos de progreso radiales, campos de entrada de IA) se organizan como capturas de pantalla recortadas alrededor de los titulares editoriales. No hay fotografías, ilustraciones ni gráficos abstractos. Todos los elementos visuales del producto se colocan en tarjetas flotantes blancas con bordes finos y sombras suaves. Los círculos de avatar presentan un pequeño indicador direccional del cursor, un motivo visual que señala la interacción en tiempo real. La composición principal es un collage de texto e interfaz de usuario, en lugar de un titular centrado con una foto de archivo.

Paleta

Neutral

  • Ink Black #17191c — El texto principal, el fondo del botón relleno y el logotipo de navegación son las únicas superficies oscuras del sistema; todas las llamadas a la acción y los titulares del texto principal aparecen sobre este fondo casi negro.
  • Paper White #ffffff — El lienzo de la página, el texto de los botones y las superficies de las tarjetas en relieve constituyen el tono de fondo dominante, con aproximadamente 76 puntos de frecuencia.
  • Mist Gray #f2f2f3 — Superficies de tarjetas, fondos adicionales, rellenos de campos de entrada: una capa invisible debajo del papel para el contenido incrustado.
  • Fog White #fafafb — Un fondo de página adicional para secciones y superficies alternas al pasar el cursor por encima, un nivel superior al del papel para crear sutiles variaciones de rayas.
  • Slate Gray #777b86 — Color del enlace, texto auxiliar atenuado, texto del pie de página: un gris frío y desaturado colocado entre el texto principal y el texto que no se puede incluir.
  • Ash Gray #979799 — Etiquetas adicionales, etiquetas de categoría (Marketing, Finanzas, Ventas): un tono más claro que el color del enlace.

Tipografía

De 15 a 90 píxeles · 8 pasos

  • Signifier — reemplazo: GT Sectra · esquemas 400 · Una fuente con serifa para titulares y títulos, utilizada exclusivamente para H1/H2 en tres tamaños; el grosor de la fuente se mantiene en 400 (regular) en todas las escalas, una elección distintiva: una fuente con serifa susurra en lugar de gritar como una fuente en negrita.
  • Sohne — reemplazo: Inter · esquemas 400, 430, 450, 480, 500 · Las fuentes principales, de interfaz y de navegación son versátiles y abarcan desde metadatos hasta subtítulos; los grosores semiescalonados (430, 450, 480) crean una jerarquía sutil sin pasar directamente a la negrita.

Intervalos y forma

ObjetivoSignificado
Densidadpromedio
Paso básico8px
Radio del botón9999px
Radio de la tarjeta24px
Oscuridadno - bordes en lugar de sombras
Entre secciones80px
Ancho de página1200px

La IA construirá tu sitio web al estilo de Steep y lo rellenará.

  • Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
  • Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
  • Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
  • Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.

Estilos similares

  • Newformcap — Periódico editorial en el vestuario
  • Claude — Un artefacto impreso en pergamino cálido: tinta sobre papel de hueso, arcilla como único soplo de color.
  • 11x– Digital workers — Un páramo editorial cinematográfico: fotografías panorámicas del paisaje contrastando con titulares monumentales en tipografía serif que parecen sacados de una revista de lujo.
  • Revolut — Un trabajo editorial monocromático basado en una fotografía de nubes: tinta blanca, botones de pastillero, una única franja azul de color en un mundo predominantemente gris.
  • Scheduling — Tinta editorial sobre papel color crema
  • Titan — archivo monocromo de tonos cálidos
  • Programa — Un estudio de diseño suizo al mediodía. La pared blanca de la galería está iluminada por una sola lámpara de mesa amarilla; todo está en tonos grises hasta que un botón, un icono o un detalle llama la atención, y entonces ese único detalle amarillo define toda la habitación.
  • Sana Agents — Destellos de lima sobre fondo blanco en una publicación editorial
  • Visual — Samizdat editorial de tono cálido. Papel color crema, carteles con serifa, anotaciones marginales en monocromo, un rotulador amarillo.
  • Midday — Folleto editorial en vitela: titular con serifa de 72 px sobre fondo de piedra cálida, texto sin serifa con espaciado, controles en forma de píldora, sin sombras.
  • Chat for impact — Una clínica de color verde bosque con habitaciones de colores pastel.
  • Handhold — Pergamino cálido bajo serifas apenas audibles: una página editorial, compuesta a mano sin ruido cromático, donde la fuente serif más fina de 200 puntos transmite toda la voz.