Letters
Uma consulta matinal em uma clínica ao ar livre — uma mesa branca e estéril sob um teto azul suave, repleta de instrumentos cirúrgicos azuis.
Letters é uma ferramenta para redação de cartas médicas que começa com um cabeçalho em degradê que remete ao céu aberto — uma suave faixa azul atmosférica que cria uma atmosfera calma e clínica — antes de transitar para um espaço de trabalho branco e limpo. O sistema foi projetado em um estilo monocromático: uma tela branca limpa, texto quase preto (#070709), chamadas à ação escuras em formato de pílula e cartões arredondados flutuando sobre sombras sutis. Um único azul brilhante (#2597d0) é reservado para pontuação funcional — ícones, micrográficos, reprodutores de forma de onda — nunca usado para botões ou preenchimentos grandes. A tipografia utiliza Open Runde, uma fonte sans-serif humanista geométrica com espaçamento negativo agressivo entre letras em telas maiores (-0,04em a 80px), o que comprime os cabeçalhos em blocos impactantes. Os componentes são leves, como um instrumento médico: bordas finas, espaçamento generoso entre os cartões, botões em formato de pílula e um uso discreto de elevação que permite que o cabeçalho em formato de céu assuma o papel emocional.
Uma página inicial com gradiente azul-celeste ocupa toda a largura da página, com título e subtítulo centralizados e um botão de chamada para ação abaixo. A transição para uma área de conteúdo branca é suave, com espaçamento generoso entre as seções (80-120px). As seções de destaque utilizam uma grade de duas colunas com cartões grandes e arredondados (raio de 18-32px) de proporções iguais. Os títulos das seções são sempre centralizados, em uma única coluna, acima da grade de cartões. A navegação consiste em uma barra superior branca fixa com um conjunto centralizado de links e ações de login alinhadas à direita. O ritmo geral é composto por uma única faixa principal atmosférica, seguida por seções alternadas em branco e #f5f5f5 com um espaço vertical consistente entre elas. Não há barra lateral, mega-menu ou layouts assimétricos — a página transmite a sensação de uma coluna calma e simétrica.
O design visual concentra-se quase inteiramente na interface do usuário do produto — sem fotos de estilo de vida, sem renderizações 3D abstratas. A linguagem visual é construída em torno de cartões do produto que exibem a interface nativa do aplicativo: uma comparação de documentos "Antes" e "Depois", uma área de carregamento com borda pontilhada e um reprodutor de áudio em forma de onda. O único elemento visual atmosférico é o gradiente do céu na imagem principal. Os ícones são planos, de cor única #2597d0 (envelope, microfone, marca de seleção) com espessura de linha uniforme, sem variações de preenchimento. O estilo da ilustração é contido: as maquetes do produto são exibidas em um fundo branco, ligeiramente rotacionadas para criar profundidade, nunca inclinadas bruscamente. Uma fonte manuscrita (The Doctor) é o único elemento orgânico/artesanal, usada exclusivamente para evocar a caligrafia clínica no cartão "Antes".
Paleta
Marca
- Surgical Blue
#2597d0— Ícones, um ícone de microfone, um reprodutor de ondas sonoras e pequenos detalhes funcionais criam uma única nota cromática em toda a interface.
Neutro
- Obsidian
#070709— O texto principal, os botões de chamada à ação preenchidos e os elementos escuros da interface do usuário — um tom próximo ao preto foi escolhido em vez do preto puro (#000) para suavizar o contraste com o fundo branco. - Paper White
#ffffff— O fundo da página, as superfícies dos cartões e o texto dos botões constituem a tela principal para todas as seções abaixo do elemento principal. - Cloud Gray
#f5f5f5— Superfícies adicionais para os cartões e fundos de seção separam os blocos funcionais da tela principal. - Sky Tint
#d7e6f5— A tonalidade da moldura de papelão e o tom azul quase imperceptível da superfície criam uma sensação de atmosfera, em vez de cinza. - Charcoal
#60606c— Texto principal, texto secundário e bordas suaves - uma cor neutra dominante para conteúdo que não seja título. - Slate
#8b8b8b— Textos menores e estados fronteiriços inativos - usados para indicar locais e garantir a acessibilidade para pessoas com deficiência.
Tipografia
de 12 a 80px · 8 etapas
- sans-serif — substituição: Inter · esboços 400, 700 · sans-serif - encontrada nos dados extraídos, mas não descrita pela IA.
- Open Runde — substituição: Inter Tight · esboços 400, 500, 600, 700, 900 · A fonte principal para títulos e navegação é uma humanista geométrica, com espaçamento reduzido entre letras em tamanhos grandes; -0,04em a 80px comprime o título em um único bloco conciso e impactante. Use-a para todos os títulos, navegação e textos grandes.
- Inter — substituição: system-ui · esboços 400, 500 · Texto secundário para corpo do texto e interface do usuário – usado para títulos pequenos, elementos de navegação e links embutidos onde se deseja um ritmo de leitura mais neutro. Combina com Open Runde para criar contraste hierárquico.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 12-16px |
| Raio do botão | 100px |
| Raio do cartão | 18px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80-120px |
| Largura da página | 1200px |
A IA criará seu site no estilo Letters 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
- Integrated Biosciences — Laboratório de bioluminescência à meia-noite
- Mintlify — Um jardim de nuvens sobre uma mesa de vidro. O céu desenhado à mão e o documentário são emoldurados juntos — o único lugar onde cor e conceito se encontram antes que a página se desvaneça em um branco monástico.
- Gleap — Um espaço de trabalho decorado em tons creme quentes com detalhes em grafite — um estúdio onde pontos de tinta preta fosca parecem flutuar sobre a estrutura de linho.
- Render — O design é em alumínio escovado. A interface parece um documento de engenharia limpo e geométrico — espaço em branco, linhas finas e uma única linha roxa que chama a atenção para a ação.
- Grafbase — desenho técnico em mármore frio
- Slash — Cofre da meia-noite com livros-razão dourados
- Modal — Um terminal fosforescente em uma sala de servidores escura - a única fonte de luz é um verde brilhante.
- Whimsical — Tinta roxa intensa sobre fundo lavanda — um caderno de estúdio criativo que também funciona como quadro branco técnico.
- AgentQL — Aurora boreal sobre o terminal à noite.
- Alveos One — Um refúgio acolhedor feito de pedras de rio – uma sala de meditação tranquila, com iluminação suave e cremosa, onde um único objeto de grafite repousa sob um brilho âmbar delicado.
- GitHub — Um painel de comando espacial com pontos de controle bioluminescentes — um espaço de trabalho escuro e atmosférico onde um único brilho verde indica o caminho a seguir.
- Buddy — Desenho técnico em papel quadriculado. A superfície branca do desenho apresenta uma grade quase invisível, aplicada com tinta quase preta, com marcações verde-limão fluorescentes e traços com gradiente iridescente.