Dub
Panel de control de papel de arroz mate de Link
El sistema visual de Dub tiene una estética sobria, casi editorial, propia de un SaaS: un lienzo casi blanco sostenido por bordes finos en lugar de elementos sobresalientes, con una tipografía monocromática densa que proporciona soporte estructural y un único color azul brillante (#2563eb) que destaca. A primera vista, las superficies permanecen planas y sin marco, pero cada contenedor tiene un margen de 1 px (#e5e5e5), evocando la sensación de un documento impreso. La personalidad se logra mediante un pequeño conjunto de acentos de color en forma de "píldora" (naranja, verde, morado) que flotan sobre la paleta neutra, y encabezados que transmiten confianza y modernidad sin ser llamativos. Los componentes son compactos y densos: márgenes de 8 px, radio de tarjeta de 12 px, etiquetas en forma de píldora a 9999 px y controles invisibles en lugar de botones pesados y rellenos.
La página está construida sobre un diseño centrado con un ancho máximo de aproximadamente 1200px. El elemento principal es un bloque de texto centrado con tres elementos flotantes (Programas de afiliados, Análisis de conversiones, Enlaces cortos) posicionados horizontalmente sobre un diseño de producto grande. Las secciones están organizadas verticalmente con márgenes consistentes de 64px, alternando entre lienzo blanco y #f5f5f5 paper haze para separación tonal. La sección inferior utiliza un diseño en forma de Z: el texto editorial está centrado en el tercio medio, y las tarjetas de interfaz de usuario flotantes están ancladas a los márgenes izquierdo y derecho, creando un ritmo asimétrico, similar al de una revista. La nube de logotipo es una cuadrícula simple de 5x2, centrada en la página. La navegación es una barra superior minimalista: logotipo a la izquierda, navegación en el centro, un grupo de dos botones (un botón fantasma "Iniciar sesión" + un botón relleno "Registrarse") a la derecha, sin un menú fijo o megamenú. El diseño del panel de control de la ventana principal muestra un diseño de aplicación clásico de dos columnas: una barra lateral fija (similar a 240px) + un área de contenido que define la densidad de la información del producto para los visitantes antes de que comiencen a desplazarse.
Los elementos visuales se centran en el producto, no en el estilo de vida. La pantalla principal se centra en una gran captura de pantalla del panel de control, que representa una maqueta de producto real con una barra de navegación lateral, una tabla de datos y elementos de interfaz de usuario flotantes, dispuestos como un panel plano sobre un lienzo blanco. Los logotipos de los clientes se muestran en una cuadrícula de escala de grises desaturada (beehiv, superpower, Chatbase, etc.) para destacar su rendimiento en redes sociales, sin color para permitir que el único acento azul de la página siga siendo dominante. Las tarjetas flotantes de socios (perfiles pequeños y mosaicos con datos de ingresos/pagos) se mueven alrededor de bloques de texto editorial en la parte inferior, creando una sensación de profundidad sin usar sombras en el texto mismo. El patrón de fondo de cuadrícula de puntos es una característica distintiva: una delgada fila de pequeños puntos con muy baja opacidad crea textura y la sensación de un sistema de diseño/superficie de dibujo, enfatizando el posicionamiento del sitio como una "plataforma moderna de atribución de enlaces". La iconografía es minimalista, con contornos y rellenos, y utiliza una paleta de acentos (naranja mandarina, morado lavanda, verde menta) para las etiquetas de características. No se utilizan fotografías, ilustraciones ni modelos 3D; la interfaz de usuario del producto es en sí misma un lenguaje visual.
Paleta
Marca
- Electric Blue
#2563eb— Se utiliza el color principal de la marca: el logotipo, los enlaces, los indicadores clave de rendimiento, los estados activos y los detalles de los iconos. Un azul intenso sobre fondo blanco crea el único atractivo visual del sistema. - Deep Sapphire
#1e40af— El fondo principal del botón de acción, el relleno en negrita de la llamada a la acción (el único color que indica la acción), se utiliza con moderación para atraer la atención.
Neutral
- Canvas White
#ffffff— El fondo de la página, la superficie de la tarjeta y los paneles emergentes son la base absoluta de cualquier pantalla. - Paper Mist
#f5f5f5— Cambios sutiles de color al pasar el cursor sobre las tarjetas anidadas, los paneles adicionales y los rellenos. - Ash
#e5e5e5— Los finos bordes de las tarjetas, los conectores de entrada y los separadores constituyen la línea estructural que mantiene unido el sistema. - Smoke
#d4d4d4— Bordes más definidos para los contenedores seleccionados y contornos adicionales para los botones. - Pebble
#c8c8c8— Bordes, contornos de control y divisores estructurales con contraste medio. Este color no debe utilizarse como color principal para las llamadas a la acción. - Midnight Ink
#0a0a0a— El texto principal de los botones, los botones resaltados y el texto de navegación son casi negros para lograr el máximo contraste.
Tipografía
de 11 a 48 píxeles · 9 pasos
- Satoshi — reemplazo: Inter (weight 500 · esquemas 500 · Encabezados de visualización: se utilizan únicamente en líneas de 36 a 48 píxeles para encabezados y títulos de sección. Grosor de la fuente: 500 (medio, no negrita): Los encabezados lucen seguros y modernos, pero nunca excesivos. Las proporciones geométricas de Satoshi le dan a la tipografía un toque editorial y moderno que el texto principal de Inter no puede replicar.
- Inter — reemplazo: Inter (native) · esquemas 400, 500, 600 · Texto principal, etiquetas de interfaz de usuario, navegación, subtítulos y encabezados menores. Inter es la fuente principal, que maneja desde microetiquetas de 11 px hasta encabezados secundarios de 30 px. El grosor predeterminado para el texto principal es de 400, para los elementos resaltados y las etiquetas de los botones es de 500, y para las etiquetas importantes de la interfaz de usuario es de 600. El tamaño de paso único más frecuente es de 16 px con una altura de línea de 1,5 (1220 ocurrencias), lo que confirma que 16 px es el tamaño canónico para el texto principal.
- Geist Mono — reemplazo: JetBrains Mono or IBM Plex Mono · esquemas 400, 500 · Los fragmentos de código, los metadatos técnicos y los tokens monoespaciados incrustados se utilizan en bloques de código de 12 a 14 píxeles y en elementos de visualización de código grandes de 24 píxeles. Esto garantiza la credibilidad de la herramienta para desarrolladores, en consonancia con el posicionamiento de producto de Dub.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 8px |
| Radio del botón | 8px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 64px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Dub 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
- 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.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- 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
- Augen Pro — La presentación blanca de Apple presenta un azul eléctrico, aséptico y minimalista, como único acento en un espacio monocromático.
- Antimetal — Una crónica editorial en papel color crema: una mañana tranquila en una revista científica, donde la sobriedad transmite confianza y las serifas hacen el trabajo pesado.
- Perk — Lima eléctrica sobre papel pergamino tibio
- Ditto — Un taller bañado por el sol donde se crean muestras de flores silvestres. Superficies de color crema cálido, una base de color amarillo vibrante, tintas azul marino intenso, formas orgánicas de color que florecen tras la pieza.
- Officevibe — Una revista editorial impresa en papel de un cálido color crema. Imagínese un ensayo reflexivo sobre gestión de recursos humanos, presentado como un producto: una tipografía cursiva con serifa que susurra a través de una moderna interfaz azul.