Dub
Painel de controle de papel de arroz fosco do Link
O sistema visual do Dub possui uma estética SaaS contida, quase editorial: uma tela quase branca unida por bordas finas em vez de elementos salientes, com tipografia monocromática densa fornecendo suporte estrutural e uma única cor azul brilhante (#2563eb) que se destaca. As superfícies parecem planas e sem moldura à primeira vista, mas cada contêiner possui uma margem de 1px #e5e5e5, evocando a sensação de um documento impresso. A personalidade é alcançada por meio de um pequeno conjunto de detalhes coloridos em formato de "pílula" (laranja, verde, roxo) que flutuam acima da paleta neutra, e cabeçalhos que transmitem confiança e modernidade sem serem extravagantes. Os componentes são compactos e densos: espaçamento de 8px, raio de cartão de 12px, rótulos em formato de pílula com 9999px e controles invisíveis em vez de botões grandes e preenchidos.
A página foi construída com um layout centralizado com largura máxima de aproximadamente 1200px. O elemento principal é um bloco de texto centralizado com três elementos flutuantes (Programas de Afiliados, Análise de Conversão, Links Curtos) posicionados horizontalmente acima de um layout de produto maior. As seções são organizadas verticalmente com espaçamento consistente de 64px, alternando entre branco e um tom de cinza #f5f5f5 para separação tonal. A seção inferior utiliza um layout em forma de Z: o texto editorial é centralizado no terço central e os cards de interface flutuantes são ancorados às margens esquerda e direita, criando um ritmo assimétrico, semelhante ao de uma revista. A nuvem de logotipos é uma grade simples de 5x2, centralizada na página. A navegação consiste em uma barra superior minimalista — logotipo à esquerda, navegação no centro e um grupo de dois botões (um botão "Login" transparente e um botão "Cadastrar" preenchido) à direita — sem menu fixo ou mega menu. O layout do painel principal exibe um layout clássico de aplicativo de duas colunas: uma barra lateral fixa (semelhante a 240px) + uma área de conteúdo que define a densidade de informações do produto para os visitantes antes que eles comecem a rolar a página.
O foco visual está no produto, não no estilo de vida. A tela principal é centrada em uma grande captura de tela de um painel, representando um protótipo real do produto com uma barra de navegação lateral, tabela de dados e elementos de interface flutuantes, dispostos como um painel plano sobre uma tela branca. Os logotipos dos clientes são exibidos em uma grade dessaturada em tons de cinza (beehiv, superpower, Chatbase, etc.) para destacar seu desempenho nas mídias sociais, sem cor para permitir que o único detalhe azul da página permaneça dominante. Cartões flutuantes de parceiros (pequenos perfis e blocos com dados de receita/pagamento) se movem ao redor de blocos de texto editorial na parte inferior, criando uma sensação de profundidade sem o uso de sombras no próprio texto. O padrão de fundo em grade pontilhada é uma característica marcante: uma fina linha de pequenos pontos com opacidade muito baixa cria textura e a sensação de um sistema de design/superfície de desenho, enfatizando o posicionamento do site como uma "plataforma moderna de atribuição de links". A iconografia é minimalista, com contornos e preenchimentos, e utiliza uma paleta de cores de destaque (laranja tangerina, roxo lavanda, verde menta) para as etiquetas de recursos. Não são utilizadas fotografias, ilustrações ou modelos 3D — a própria interface do usuário do produto é uma linguagem visual.
Paleta
Marca
- Electric Blue
#2563eb— A cor principal da marca — o logotipo, os links, os principais indicadores de desempenho, os estados ativos e os detalhes dos ícones — é utilizada. Um azul intenso sobre um fundo branco cria o único apelo visual do sistema. - Deep Sapphire
#1e40af— O fundo principal do botão de ação, o preenchimento em negrito da chamada para ação — a única cor que denota a ação — é usado com parcimônia para atrair a atenção.
Neutro
- Canvas White
#ffffff— O fundo da página, a superfície do cartão e os painéis pop-up são a base fundamental de qualquer tela. - Paper Mist
#f5f5f5— Alterações sutis na cor da superfície de cartões aninhados, painéis adicionais e preenchimentos ao passar o cursor. - Ash
#e5e5e5— As bordas finas das placas, os conectores de entrada e os divisores são a linha estrutural que mantém o sistema unido. - Smoke
#d4d4d4— Bordas mais nítidas para contêineres selecionados e contornos adicionais para botões. - Pebble
#c8c8c8— Bordas, contornos de controle e divisores estruturais com contraste médio. Esta cor não deve ser usada como cor primária para chamadas à ação. - Midnight Ink
#0a0a0a— O texto principal dos botões, os botões destacados e o texto de navegação são quase pretos para obter o máximo contraste.
Tipografia
de 11 a 48px · 9 etapas
- Satoshi — substituição: Inter (weight 500 · esboços 500 · Títulos de destaque – usados apenas em linhas de 36 a 48 pixels para títulos de cabeçalho e seção. Peso da fonte – 500 (médio, não negrito): Os títulos têm uma aparência moderna e confiante, mas nunca exagerada. As proporções geométricas de Satoshi conferem à tipografia um toque editorial e moderno que o corpo do texto da Inter não consegue replicar.
- Inter — substituição: Inter (native) · esboços 400, 500, 600 · Texto corrido, rótulos da interface do usuário, navegação, subtítulos e títulos secundários. A fonte Inter é a principal, responsável por tudo, desde micro-rótulos de 11px até títulos secundários de 30px. O peso padrão para o texto corrido é 400, para elementos destacados e rótulos de botões é 500 e 600 é reservado para rótulos importantes da interface do usuário. 16px com altura de linha de 1,5 é o tamanho de linha mais frequente (1220 ocorrências), confirmando que 16px é o tamanho padrão para o texto corrido.
- Geist Mono — substituição: JetBrains Mono or IBM Plex Mono · esboços 400, 500 · Trechos de código, metadados técnicos e tokens monoespaçados incorporados são usados em blocos de código com 12 a 14 pixels e em elementos de exibição de código maiores com 24 pixels. Isso garante a credibilidade da ferramenta de desenvolvimento, em consonância com o posicionamento do produto Dub.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 8px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 64px |
| Largura da página | 1200px |
A IA criará seu site no estilo Dub e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- ElevenLabs — Um ensaio fotográfico em tons creme quentes com títulos sutis. Um caderno em estilo Bauhaus — papel cor de casca de ovo, tinta preta e um único detalhe em roxo e laranja para exibição do produto.
- Awesomic — Tela editorial em zinco com marcas de pontuação laranja que lembram confete.
- Monad — revista técnica editorial sobre pergaminho quente
- Seline Analytics — Uma mesa analítica silenciosa sobre papel quente
- Notion — Um caderno de papel quente sob o sol do meio-dia
- Anthropic — Uma revista científica de campo impressa em pergaminho de tom quente — superfícies de marfim sereno, títulos editoriais com serifa e um único detalhe em tom de barro que aparece apenas quando é necessário dar o que falar.
- Calendly — Tinta azul escura sobre mármore frio
- Augen Pro — A apresentação branca da Apple destaca um azul elétrico, clínico e leve, como único elemento de destaque em um espaço monocromático.
- Antimetal — Uma crônica editorial em papel creme — uma manhã tranquila em uma revista científica, onde a sobriedade transmite confiança e as serifas desempenham um papel fundamental.
- Perk — Cal elétrica em papel pergaminho quente
- Ditto — Uma oficina ensolarada criando amostras de flores silvestres. Superfícies em tons creme quentes, uma vibrante cor de base amarela, tintas em um profundo azul marinho, formas orgânicas de cores desabrochando ao fundo da obra.
- Officevibe — Uma revista editorial impressa em papel creme de tom quente. Imagine um ensaio instigante sobre gestão de RH, apresentado como um produto — uma fonte cursiva serifada que sussurra através de uma interface azul moderna.