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
- 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
- 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.