Dub
Panel de control de papel de arroz mate de Link
O sistema visual de Dub ten unha estética SaaS contida, case editorial: unha lona case branca unida por bordos finos en lugar de elementos sobresaíntes, cunha densa tipografía monocromática que proporciona soporte estrutural e unha única cor azul brillante (#2563eb) que destaca. As superficies permanecen planas e sen marco a primeira vista, pero cada contedor ten unha marxe #e5e5e5 de 1 px, evocando a sensación dun documento impreso. A personalidade conséguese a través dun pequeno conxunto de detalles de "pílula" de cores (laranxa, verde, morado) que flotan sobre a paleta neutra e cabeceiras que se senten seguras e modernas sen ser rechamantes. Os compoñentes son compactos e densos: canles de 8 px, radio de tarxeta de 12 px, etiquetas en forma de pílula a 9999 px e controis invisibles en lugar de botóns pesados e cheos.
A páxina está construída sobre un deseño centrado cunha anchura máxima de aproximadamente 1200 px. O elemento principal é un bloque de texto centrado con tres elementos flotantes (Programas de afiliados, Análise de conversións, Ligazóns curtas) colocados horizontalmente sobre un deseño de produto grande. As seccións están dispostas verticalmente con marxes uniformes de 64 px, alternando entre lenzo branco e néboa de papel #f5f5f5 para a separación tonal. A sección inferior usa un deseño en forma de Z: o texto editorial está centrado no terzo medio e as tarxetas flotantes da interface de usuario están ancoradas ás marxes esquerda e dereita, creando un ritmo asimétrico, similar ao dunha revista. A nube do logotipo é unha cuadrícula sinxela de 5x2, centrada na páxina. A navegación é unha barra superior minimalista: logotipo á esquerda, navegación no centro, un grupo de dous botóns (un botón pantasma "Iniciar sesión" + un botón "Rexistrarse" cheo) á dereita, sen un menú fixo ou mega. O deseño do panel de control da xanela principal mostra un deseño clásico de aplicación en dúas columnas: unha barra lateral fixa (semellante a 240px) + unha área de contido que define a densidade da información do produto para os visitantes antes de que comecen a desprazarse.
Os elementos visuais céntranse no produto, non no estilo de vida. A pantalla principal céntrase nunha gran captura de pantalla do panel de control, que representa unha maqueta dun produto do mundo real cunha barra de navegación lateral, unha táboa de datos e elementos flotantes da interface de usuario, dispostos como un panel plano sobre un lenzo branco. Os logotipos dos clientes móstranse nunha grella desaturada en escala de grises (beehiv, superpower, Chatbase, etc.) para recoñecer o seu rendemento nas redes sociais, sen cor para permitir que o único acento azul da páxina siga sendo dominante. As tarxetas flotantes dos socios (perfís pequenos e mosaicos con datos de ingresos/pagos) móvense arredor de bloques de texto editorial na parte inferior, creando unha sensación de profundidade sen o uso de sombras no propio texto. O patrón de fondo da grella punteada é unha característica distintiva: unha fina fila de pequenos puntos con moi baixa opacidade crea textura e a sensación dun sistema de deseño/superficie de debuxo, enfatizando o posicionamento do sitio como unha "plataforma moderna de atribución de ligazóns". A iconografía é mínima, con contornos e recheos, e usa unha paleta de acentos (laranxa mandarina, púrpura lavanda, verde menta) para as etiquetas das características. Non se empregan fotografías, ilustracións nin modelos 3D: a propia interface de usuario do produto é unha linguaxe visual.
Paleta
Marca
- Electric Blue
#2563eb— Úsase a cor principal da marca (o logotipo, as ligazóns, os indicadores clave de rendemento, os estados activos e os detalles das iconas). Un azul intenso sobre un fondo branco crea o único atractivo visual do sistema. - Deep Sapphire
#1e40af— O fondo principal do botón de acción, o recheo en negra da chamada á acción (a única cor que denota a acción), úsase con moderación para chamar a atención.
Neutro
- Canvas White
#ffffff— O fondo da páxina, a superficie da tarxeta e os paneis emerxentes son a base absoluta de cada pantalla. - Paper Mist
#f5f5f5— Cambios sutís de cor ao pasar o cursor para tarxetas aniñadas, paneis adicionais e recheos. - Ash
#e5e5e5— Os bordos finos das tarxetas, conectores de entrada e divisores son a liña estrutural que mantén unido o sistema. - Smoke
#d4d4d4— Bordes máis nítidos para os contedores seleccionados e contornos de botóns adicionais. - Pebble
#c8c8c8— Bordes, contornos de control e divisores estruturais con contraste medio. Esta cor non se debe usar como cor principal para chamadas á acción. - Midnight Ink
#0a0a0a— O texto principal dos botóns, os botóns resaltados e o texto de navegación son case negros para obter o máximo contraste.
Tipografía
de 11 a 48 px · 9 pasos
- Satoshi — substitución: Inter (weight 500 · contornos 500 · Títulos para mostrar: úsanse só en liñas de 36 a 48 px para títulos de títulos e seccións. Grosor da fonte: 500 (medio, non en negra): os títulos teñen un aspecto seguro e moderno, pero nunca excesivo. As proporcións xeométricas de Satoshi danlle á tipografía un toque lixeiramente editorial e moderno que o corpo do texto de Inter non pode replicar.
- Inter — substitución: Inter (native) · contornos 400, 500, 600 · Corpo do texto, etiquetas da interface de usuario, navegación, subtítulos e títulos secundarios. Inter é o elemento principal, xa que xestiona todo, desde microetiquetas de 11 px ata títulos secundarios de 30 px. Un peso de 400 é o valor predeterminado para o corpo do texto, 500 para os elementos destacados e as etiquetas dos botóns e 600 está reservado para as etiquetas importantes da interface de usuario. 16 px cunha altura de liña de 1,5 é o tamaño de paso único que se atopa con máis frecuencia (1220 aparicións), o que confirma que 16 px é o tamaño canónico do corpo do texto.
- Geist Mono — substitución: JetBrains Mono or IBM Plex Mono · contornos 400, 500 · Os fragmentos de código, os metadatos técnicos e os tokens monoespaciados incrustados úsanse en bloques de código de 12 a 14 px e en elementos de visualización de código grandes de 24 px. Isto garante a credibilidade da ferramenta de desenvolvemento, en consonancia co posicionamento do produto de Dub.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 8px |
| Radio do botón | 8px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 64px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Dub e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- ElevenLabs — Un ensaio fotográfico en tons crema cálidos con titulares sutís. Un caderno de estilo Bauhaus: papel cor casca de ovo, tinta negra e un único detalle morado e laranxa para a exhibición do produto.
- Awesomic — Malla editorial de zinc con signos de puntuación laranxas que lembran confeti
- Monad — revista técnica editorial en pergamiño quente
- Seline Analytics — Unha mesa analítica tranquila sobre papel quente
- Notion — Un caderno de papel quente ao sol do mediodía
- Anthropic — Unha revista científica de campo sobre pergamiño cálido: superficies de marfil tranquilas, títulos editoriais con serigrafía e un único acento de arxila que só aparece cando é necesario actuar.
- Calendly — Tinta azul escura sobre mármore frío
- Augen Pro — A presentación branca de Apple presenta un azul eléctrico, clínico e lixeiro como único acento nun espazo monocromático.
- Antimetal — Unha crónica editorial en papel cor crema: unha mañá tranquila nunha revista científica, onde a moderación transmite confianza e as serifas fan o traballo pesado
- Perk — Lima eléctrica sobre papel pergamiño quente
- Ditto — Un obradoiro soleado creando mostras de flores silvestres. Superficies crema cálidas, unha cor base amarela vibrante, tintas azul mariño intenso, formas de cor orgánicas que florecen detrás da peza.
- Officevibe — Unha revista editorial en papel de cor crema cálida. Imaxina un ensaio reflexivo sobre a xestión de recursos humanos, presentado como un produto: unha fonte cursiva serif que susurra a través dunha interface azul moderna.