Column
um livro-razão azul-escuro sob o frescor do amanhecer
A Column utiliza um azul marinho profundo e institucional sobre um fundo quase branco: a página transmite a sensação de ser, em primeiro lugar, uma superfície robusta para um produto bancário e, em segundo lugar, um ambiente de desenvolvimento. A cor da marca não é única, mas sim um par coordenado — azul marinho (#111a4a) para uma estrutura sólida, verde menta (#44b48b) para dados e código — com um único laranja quente (#ec652b) reservado para superfícies de destaque de alta intensidade, como o cartão Brex. A tipografia é dominada pela SuisseIntl, uma fonte geométrica sem serifa usada em toda a gama de pesos, de 300 (links) a 600 (display), conferindo ao sistema um estilo refinado e editorial que a maioria das empresas fintech não possui. Os cartões flutuam em grandes superfícies brancas com sombras sutis e sobrepostas; a maioria dos elementos da interface é plana, com profundidade aparecendo apenas onde o cartão deve parecer um objeto físico (widgets de transação, protótipos de produtos). O código e os dados financeiros são apresentados em monocromático, na cor verde-água — um sinal visual de que este é um banco construído por engenheiros para engenheiros.
A estrutura da página é de largura total, centralizada com amplas margens laterais (64–15 cm em desktops). A tela principal possui um layout dividido: o título e as chamadas para ação estão alinhados à esquerda a 25 cm, enquanto um widget de transação flutuante está posicionado à direita a 55 cm sobre um fundo de mapa em tons de cinza. Abaixo da tela principal, as seções alternam entre branco (4 cm) e canvas claro (5 cm) com espaçamento vertical de 6 cm. O conteúdo é organizado de acordo com uma grade única de 6 colunas: blocos de texto ocupam 4 colunas (7 cm), imagens/cartões de produtos ocupam de 5 a 6 colunas, com um deslocamento deliberado em relação à grade. As seções que descrevem recursos utilizam um layout de 2 colunas: texto à esquerda, produto à direita. A seção de estatísticas de confiança é dividida em uma grade de 4 colunas que ocupa toda a largura da página. Os logotipos dos clientes estão localizados em uma única linha centralizada com espaçamento de 48 px. O rodapé possui um layout compacto de duas colunas. A navegação consiste em uma barra superior fixa, transparente, com 62 pixels de altura, sobre a tela principal, com um fundo desfocado que se torna branco à medida que você rola a página. Não há barra lateral nem megamenu — os menus suspensos são simples, com setas no lugar dos itens.
O estilo visual é minimalista e funcional — a Column evita completamente o uso de fotografias de banco de imagens. A linguagem visual é construída sobre três fontes: (1) ilustrações de dados em SVG, especificamente um mapa-múndi pontilhado em meio-tom, renderizado com um gradiente de índigo para laranja e turquesa, criando uma atmosfera de escala global por trás do elemento principal; (2) layouts de cartões de produtos — widgets flutuantes exibindo saldos de contas, detalhes de transferências e trechos de código JSON em cartões brancos com sombras marcantes; (3) visualizações de gráficos — gráficos de velas ou barras turquesa com linhas finas de conexão, usados na seção de confiança/estatísticas. O mapa em meio-tom é um elemento visual característico — seu gradiente transita de #d65620 (laranja) para violeta, azul, azul-celeste, turquesa e amarelo, criando um espectro que une toda a paleta da marca em uma única superfície decorativa. Os ícones têm uma espessura de contorno uniforme de 1,5 a 2 px nas variantes #232730 ou #a9acb6, com preenchimento para estados ativos. Sem fotos de estilo de vida, sem renderizações abstratas em 3D — a sobriedade é intencional para concentrar a atenção no produto e nos dados.
Paleta
Marca
- Indigo Navy
#111a4a— A cor principal da marca é usada em chamadas à ação preenchidas, estados de navegação ativos, no cabeçalho e no logotipo. O tom profundo de azul-violeta confere ao site uma tonalidade preta sólida, porém rica; combinado com o texto branco, cria o botão mais impactante do site. - Seafoam 600
#44b48b— A cor de código e dados é a cor da marca para chaves JSON, identificadores e valores financeiros em trechos de código. Também é usada para pontos de dados em gráficos e visualizações de crescimento. - Seafoam 700
#167e6c— Um tom mais escuro de verde-água para o contorno, as linhas do gráfico e os detalhes dos ícones dentro do contexto dos dados. Isso ancora a escala verde-água contra o fundo mais escuro. - Seafoam 400
#94efb7— O fragmento de código destacado contém valores de string, URLs e endpoints de API dentro de blocos de código. A cor verde-água mais clara é lida como uma fonte monoespaçada com um tom esverdeado. - Deep Sea
#023247— O contorno decorativo e a cor de destaque do gráfico são de um tom turquesa intenso, usado em ilustrações SVG e visualizações de dados, juntamente com a escala de cores verde-água.
Neutro
- Midnight Ink
#011821— Superfície escura e texto destacado – fundo do cartão do produto, texto principal de alto contraste. Mais próximo do cinza com um tom frio azul-esverdeado; usado como base para o modo escuro quando uma seção precisa ser invertida. - Slate Ink
#3b3e47— O título secundário e o texto principal são um pouco mais quentes do que "Tinta da Meia-Noite", usados onde o preto puro pareceria muito forte na tela clara. - Steel
#7c7f88— O texto principal e os textos de link são dominados por uma cor suave (usada 245 vezes no texto principal). Um tom neutro de cinza-azulado que transmite calma, nunca uma imagem desbotada. - Fog
#a9acb6— Contornos de ícones, bordas terciárias e texto de espaço reservado. Uma cor cinza média que separa o texto sem competir com ele. - Mist
#cbcccf— O texto principal — assinaturas, avisos legais e letras pequenas — é legível em um fundo branco, mas visualmente menos perceptível. - Silver Lining
#e3e4e8— Bordas de cartões, bordas de campos de entrada, linhas divisórias. Essa cor estrutural e sutil é usada onde duas superfícies precisam ser separadas sem sombras.
Tipografia
de 10 a 60px · 10 etapas
- SuisseIntl — substituição: Inter · esboços 300, 400, 500, 600 · Fonte principal – usada em todos os títulos, corpo do texto, botões, navegação, links e texto dos cards. A fonte geométrica sem serifa exclusiva confere à Column um estilo editorial distinto, diferenciando-a de outras empresas fintech que trabalham exclusivamente com a Inter. A espessura é 600 em 52–60px para títulos, 500 para subtítulos, 400 para corpo do texto e 300 para links com pouca ênfase.
- SuisseIntlMono — substituição: JetBrains Mono · esboços 400 · Uma fonte monoespaçada semelhante à SuisseIntl, usada para rótulos técnicos, identificadores de API e dados incorporados em elementos de interface do usuário. Ela mantém as mesmas proporções da SuisseIntl, de modo que textos monoespaçados e proporcionais se alinham corretamente em contextos mistos.
- SFMono — substituição: Fira Code · esboços 400 · Exibição de trechos de código – exibidos em exemplos JSON e blocos de documentação da API. Uma tonalidade verde-água é usada para distinguir visualmente o código do texto da interface do usuário.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | média |
| Passo básico | 8px |
| Raio do botão | 8px |
| Raio do cartão | 8px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 72px |
| Largura da página | 1200px |
A IA criará seu site no estilo Column 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
- dope.security — Terminal noturno com sinalizadores roxos
- Leonardo — Uma galeria editorial invertida. Um museu de paredes pretas onde manchetes roxas funcionam como instalações de parede, e retratos gerados por IA estão pendurados em uma grade densa abaixo.
- VEED — Galeria de parede branca com botões de luz verde neon
- Craft Docs — Uma colagem digital para scrapbooking. O design lembra um álbum de recortes cuidadoso e tátil, onde anotações digitais estruturadas se combinam com texturas suaves e orgânicas.
- Letter — Uma galeria privada com artefatos reluzentes provenientes de um depósito. Um espaço de exposição com paredes pretas, onde manchetes em estilo serifado flutuam sobre esculturas cromadas nas paredes coloridas da galeria.
- Railway — O Expresso Cósmico da Meia-Noite. Uma jornada tranquila e emocionante pelo espaço escuro e estrelado, guiada por sinais claros.
- Garden Eight — Um editorial monumental em papel cor creme. O título serifado de 215px destaca-se sobre um pergaminho de tom quente, rodeado por formas esculturais flutuantes e espaços negativos que evocam a brisa do mar — a página assemelha-se mais à capa de uma monografia de arte do que ao painel de um carro.
- Steep — Análise de fontes serifadas em papel de cor quente
- 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
- AI for Business — Showroom editorial brutalista em tons de cinza quente.