ElevenLabs
Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
ElevenLabs trabaja con un estilo minimalista cálido y blanco: un lienzo color blanco hueso (#fdfcfc) con tipografía negra y una sola capa de superficies color topo cálido (#f5f3f1). La identidad de marca es discreta y segura: la tipografía Waldenburg 300, apenas perceptible, resalta los titulares con extrema claridad (-0,02em), mientras que Inter 400/500 aporta una neutralidad serena al resto. Dos colores de acento —un morado vibrante #0447ff y un naranja vibrante #ff4704— destacan únicamente en los elementos visuales del producto (audiosferas, iconos del producto), nunca como cromo en la interfaz de usuario. Los componentes permanecen planos o ligeramente elevados con finos bordes de 1 px, radios amplios de 20 px en las tarjetas y botones de 9999 px completamente rellenos. El sistema recuerda a un estudio Bauhaus sobre papel crema: sobrio, editorial y técnicamente preciso.
Las secciones de ancho completo se organizan verticalmente en una única columna central de ancho máximo con márgenes exteriores de 1280 px. La sección principal es asimétrica: el encabezado está alineado a la izquierda a la altura de Waldenburg de 48 px, el texto descriptivo está alineado a la derecha y dos botones en forma de píldora se encuentran debajo del encabezado. Debajo de la sección principal hay una gran barra de navegación con pestañas que abarca todo el ancho del contenido. Las secciones alternan entre fondos de color blanco hueso y gris topo con márgenes verticales de 96–125 px. El pie de página es una única tira compacta. La navegación es una barra superior minimalista: sin comportamiento fijo, sin megamenús. El ritmo del contenido coincide con el estilo editorial: mucho espacio en blanco, un elemento visual principal por sección y sin cuadrículas de tarjetas debajo de la sección "Confianza".
El diseño visual se caracteriza por una paleta de colores dominada por amplios degradados en forma de suaves esferas sonoras (círculos de más de 200 píxeles con transiciones radiales de morado a naranja y rosa). Los logotipos de la sección "Confianza" se presentan en escala de grises de bajo contraste sobre un fondo mate. La fotografía es minimalista: no hay fotos de estilo de vida ni de productos. La iconografía es escasa y monocromática (iconos con contorno negro o rellenos, sin iconos cromáticos). El sistema visual recuerda más a una publicación de diseño que a un catálogo de productos: la sobriedad editorial prima sobre el impacto de marketing.
Paleta
Marca
- Violet Spark
#0447ff— Énfasis visual del producto: aparece únicamente en las ilustraciones del ámbito de audio y en los iconos decorativos del producto; nunca se utiliza para los elementos de la interfaz.
Neutral
- Eggshell
#fdfcfc— El lienzo de la página, las superficies de los botones y las superficies de las tarjetas son de un tono cálido, ligeramente cremoso, en lugar de un blanco puro, para evitar los reflejos digitales y darle al sitio la tranquilidad del papel. - Warm Taupe
#f5f3f1— Las tiras separadoras, las tarjetas decorativas y una superficie adicional, un nivel más profunda que la superficie mate, crean una separación discreta y sin bordes. - Stone
#ebe8e4— Los bordes finos, los separadores y los fondos de los iconos son de un gris cálido que se sitúa entre el gris topo y el gris medio sin resultar frío. - Ink
#000000— Ya sea texto principal, botones, navegación o enlaces, el negro puro sirve de base para una paleta de colores cálidos y crea el único contraste nítido del sistema. - Graphite
#44403b— Texto principal y encabezados de sección: un sutil gris oscuro cálido para textos que necesitan destacar sin la dureza del negro. - Smoke
#777169— El texto principal, las descripciones discretas y los subtítulos están en un gris medio cálido; el estilo dominante, legible y a la vez tranquilo de las tarjetas y los textos temáticos.
Tipografía
De 10 a 48 píxeles · 8 pasos
- Waldenburg — reemplazo: Inter (300) or Söhne Light · esquemas 300 · Solo para encabezados y elementos de diseño. Se utiliza en formatos de 48/36/32 px con un grosor de fuente de 300; una fuente ultraligera es poco convencional, ya que la mayoría de los sitios web utilizan entre 600 y 700. Esta fuente sutil transmite autoridad a través de la sobriedad. El espaciado entre letras de -0,02 em crea un ajuste más preciso entre las letras en tamaños grandes. Alternativas: «Inter» en grosor de 300 o «Söhne» en grosor ligero como alternativa premium.
- Inter — reemplazo: Inter or system-ui · esquemas 400, 500 · Todo lo que no se ve en pantalla: texto principal, navegación, botones, enlaces, etiquetas, campos de entrada, tarjetas. El grosor predeterminado es 400; 500 está reservado para botones y enlaces resaltados. Los tamaños van de 10 a 10, con interlineado reducido (1,47–1,6), lo que permite que los párrafos respiren. Un espaciado entre letras pequeñas de +1 (2) en tamaños de 14 a 3 mejora la legibilidad en tamaños pequeños.
- Geist Mono — reemplazo: JetBrains Mono or IBM Plex Mono · esquemas 400 · Microtexto ubicado junto a código o texto técnico, posicionado a 13 píxeles; se usa raramente (frecuencia = 28) para etiquetas técnicas o metadatos. Capa única, interlineado grande de 1,69.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 8-16px |
| Radio del botón | 9999px |
| Radio de la tarjeta | 20px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 96-125px |
| Ancho de página | 1280px |
La IA construirá tu sitio web al estilo de ElevenLabs 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
- Mollie — Un mostrador de cachemir, un libro de contabilidad oscuro. Deja amplio espacio en blanco para el diseño editorial alrededor del texto negro y refuerza los puntos relacionados con el producto con cremas cálidas, marrones espresso y fotos táctiles de métodos de pago reales.
- Kagi — Una sala de lectura independiente. Crea un espacio blanco abierto alrededor de un texto en grafito llamativo, utilizando sutiles toques de color púrpura y superficies en tonos pastel cálidos para romper la tranquilidad.
- Milanote — Milanote es un estudio creativo especializado. Crea páginas editoriales con estilo de galería utilizando paneles visuales flotantes: paredes con marcos oscuros, espacio de visualización en blanco y capturas de pantalla que parecen objetos reales con una sutil profundidad.
- Co2 — Un atlas climático a la luz del invierno. Crea páginas que evocan un paisaje aéreo, donde los títulos con serifa, los datos codificados por categorías y las imágenes heladas resaltan los amplios márgenes blancos.
- GitButler — El color turquesa se aprecia al final del texto. Una combinación de titulares con serifa de alto contraste, sutiles cuadrículas técnicas, superficies de grafito cálido y un discreto toque turquesa.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- Dub — Panel de control de papel de arroz mate de Link
- Seline Analytics — Una mesa analítica tranquila sobre papel tibio
- Notion — Un cuaderno de papel caliente bajo el sol del mediodía.
- Anthropic — Una revista científica de campo impresa en papel vitela de tonos cálidos: superficies de marfil sereno, encabezados editoriales con serifa y un único detalle en color arcilla que aparece solo cuando se requiere acción.
- Calendly — Tinta azul oscuro sobre mármol frío