Seline Analytics
Uma mesa analítica silenciosa sobre papel quente
Seline se destaca sobre um fundo de pedra quente (#fafaf9) com um único toque vibrante de azul — todas as outras cores são neutras e extraídas da paleta de cores pedra da Tailwind. Os títulos são renderizados em uma fonte sans-serif geométrica personalizada (roobert) com peso 400 e espaçamento negativo estreito entre as letras, conferindo ao texto uma confiança tranquila, quase sussurrada, que contrasta com o estilo tipicamente chamativo de SaaS. As superfícies da interface do usuário são cartões brancos planos, flutuando sobre o fundo quente com um único e suave desfoque de 16px; as bordas são criadas com linhas finas de 1px em tom de pedra, generosamente utilizadas como o principal elemento estrutural em vez de divisores ou painéis pesados. O layout respira: conteúdo em largura total centralizado em um ritmo vertical generoso, com controles interativos em formato de pílula, uma ilustração de mascote para dar personalidade e capturas de tela do painel como prova do produto. A impressão geral é editorialmente analítica: calma, monocromática, confiante, com a chamada para ação em azul sendo o elemento mais marcante da página, graças à contenção deliberada de todo o resto.
A página tem largura máxima, centralizada em aproximadamente 1200px com bastante espaço vertical. O destaque é um bloco de texto de duas linhas, alinhado à esquerda, com uma única frase em destaque ("simples e eficaz") em azul, seguida por uma linha com duas chamadas para ação (pílula azul + pílula fantasma), depois uma linha com logotipos de parceiros em tons de cinza, em seguida uma linha com avaliações de confiança e, por fim, uma pré-visualização flutuante do painel de controle em largura total, sobrepondo-se ligeiramente à seção seguinte. Abaixo da dobra, há linhas alternadas de depoimentos em uma grade de coluna única, seguidas por seções em largura total com descrições de recursos, texto alinhado à esquerda e imagens do produto centralizadas. A navegação consiste em uma barra superior minimalista — logotipo à esquerda, links de navegação centralizados, login + chamada para ação azul à direita — com um conjunto flutuante de avatares no meio da navegação servindo como verificação de identidade. Os espaços entre as seções são amplos (96px) para criar um ritmo editorial em vez de uma confusão densa de informações.
A linguagem visual é dominada por capturas de tela da interface do usuário do produto — a pré-visualização do painel é uma fotografia renderizada com um filtro de contraste em tons de cinza (1) (0,94), que atenua as cores dos dados para um tom monocromático. A única figura humana é um adesivo linear de mascote (um personagem encapuzado), desenhado em estilo SVG com apenas contornos, posicionado uma vez por seção como um contraponto lúdico ao conteúdo analítico, com uma sombra suave para criar um efeito de profundidade semelhante ao de um adesivo. O logotipo e os glifos da marca são pequenas faíscas/chamas pretas. Não há fotografias — nem fotos de estilo de vida, nem fotos da equipe, nem imagens do ambiente. O objeto (o painel) é o protagonista. Todos os ícones decorativos são de estilo contorno de 1px em #0c0a09 ou #3ba6f1, nunca preenchidos.
Paleta
Marca
- Cyan Signal
#3ba6f1— A principal chamada à ação, os links ativos e o contorno dos ícones da marca são os únicos detalhes coloridos na página, usados com parcimônia para chamar a atenção para a ação. - Cyan Edge
#3398e1— A cor azul é usada para destacar contornos de ações, rótulos de links e elementos interativos. Não deve ser usada como cor principal para chamadas à ação.
Neutro
- Ink Black
#0c0a09— Os títulos principais, o texto corrido destacado e os ícones expressivos são apresentados em uma cor quente, quase preta. - Stone Canvas
#fafaf9— O fundo da página tem um tom quente e cremoso que lembra papel, em vez do branco de uma tela. - Pure White
#ffffff— As superfícies do mapa, os painéis salientes e os preenchimentos dos campos de entrada são planos e sem sombras por padrão. - Stone Border
#e8e6e5— As bordas finas nos cartões, na navegação e nos campos de entrada são o principal elemento estrutural, e não os separadores. - Stone Muted
#d6d3d1— Molduras adicionais, tons de fundo sutis, divisórias decorativas. - Ash Gray
#a8a29e— Texto de ajuda, contornos de ícones, estados desativados - legíveis, mas inativos.
Tipografia
de 10 a 52px · 5 etapas
- Roobert — substituição: Inter Tight or Satoshi · esboços 400, 500 · A fonte utilizada para títulos e layout de texto é uma sans-serif geométrica exclusiva com espaçamento negativo mínimo entre letras (-0,025em em 32px, -0,021em em 52px). A espessura de 400 x 52px é a marca registrada da fonte: não convencional, sutil, porém imponente, e discreta. Os títulos ocupam seu espaço sem serem opressivos.
- Inter — substituição: Inter · esboços 400, 500, 600 · A fonte principal para o corpo do texto, navegação, interface do usuário e títulos é uma fonte neutra e universal para todo o texto fora da tela. O tamanho predominante para o corpo do texto é de 14px, com peso de 400 e espaçamento entre linhas de 1,64 (frequência 1174). O espaçamento positivo entre letras (0,004em) em tamanhos pequenos garante a legibilidade de interfaces de usuário densas.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | espaçoso |
| Passo básico | 8px |
| Raio do botão | 9999px |
| Raio do cartão | 10px |
| Sombras | sombras suaves |
| Entre seções | 96px |
| Largura da página | 1200px |
A IA criará seu site no estilo Seline Analytics 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
- Mollie — Um balcão de cashmere, um livro-razão escuro. Deixe bastante espaço em branco para o design editorial ao redor do texto preto e, em seguida, reforce os pontos relacionados ao produto com tons quentes de creme, marrom expresso e fotos táteis de métodos de pagamento reais.
- Kagi — Uma sala de leitura separada. Crie um espaço branco aberto em torno de um texto em grafite marcante, usando detalhes sutis em roxo e superfícies em tons pastel quentes para quebrar a tranquilidade.
- Milanote — Milanote é um estúdio criativo dedicado. Crie páginas no estilo de galeria editorial usando painéis visuais flutuantes: paredes com molduras escuras, espaço de exibição branco e capturas de tela que parecem objetos reais com uma leve profundidade.
- Co2 — Um atlas climático sob a luz do inverno. Crie páginas como uma paisagem aérea documental, onde títulos com serifa, dados codificados por categorias e imagens gélidas destacam amplas margens brancas.
- GitButler — Turquesa no final do texto. Uma combinação de títulos serifados de alto contraste com sutis grades técnicas, superfícies em tom grafite quente e um discreto toque de turquesa.
- 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
- Dub — Painel de controle de papel de arroz fosco do Link
- 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