Column
un libro de contas azul escuro baixo o fresco amencer
Column emprega un azul mariño institucional intenso sobre un fondo case branco: a páxina parece primeiro unha superficie robusta de produto bancario e despois un parque de xogos para desenvolvedores. A cor da marca non é única, senón un par coordinado (azul mariño #111a4a para unha estrutura seria, verde menta #44b48b para datos e código) cun único laranxa cálido (#ec652b) reservado para superficies de acento de alta intensidade como a tarxeta Brex. A tipografía está dominada por SuisseIntl, unha sans serif xeométrica utilizada en todo o rango de peso, de 300 (ligazóns) a 600 (pantalla), o que lle dá ao sistema un estilo editorial refinado do que carecen a maioría das empresas fintech. As tarxetas flotan sobre grandes superficies brancas con sombras sutís e en capas; a maioría dos elementos da interface son planos, e a profundidade só aparece onde a tarxeta debería parecer un obxecto físico (widgets de transaccións, maquetas de produtos). O código e os datos financeiros preséntanse en monocromo, cor escuma de mar, un sinal visual de que este é un banco construído por enxeñeiros para enxeñeiros.
A estrutura da páxina é de ancho completo, centrada con marxes laterais amplas (64–15 cm no escritorio). A pantalla principal ten un deseño dividido: o título e as chamadas á acción están aliñados á esquerda a 25 cm, mentres que un widget de transacción flotante está situado á dereita a 55 cm sobre un fondo de mapa de semitonos. Debaixo da pantalla principal, as seccións alternan entre branco (4 cm) e lenzo claro (5 cm) con marxes verticais de 6 cm. O contido está organizado segundo unha única grella de 6 columnas: os bloques de texto ocupan 4 columnas (7 cm), as tarxetas de imaxe/produto ocupan de 5 a 6 columnas, cun desprazamento deliberado da grella. As seccións que describen as características usan un deseño de 2 columnas: texto á esquerda e produto á dereita. A sección de estatísticas de confianza está dividida nunha grella de 4 columnas que atravesa todo o ancho da páxina. Os logotipos dos clientes están situados nunha única fila centrada con marxes de 48 px. O pé de páxina ten un deseño compacto de dúas columnas. A navegación é unha barra superior fixa, transparente e de 62 px de altura, sobre a pantalla principal, cun fondo borroso que se torna branco ao desprazarse. Non hai barra lateral nin megamenú: os menús despregables son menús sinxelos con forma de frecha.
O estilo visual é minimalista e funcional: Column evita por completo a fotografía de stock. A linguaxe visual baséase en tres fontes: (1) ilustracións de datos SVG, concretamente un mapa do mundo de semitonos punteados, renderizado cun degradado de índigo a laranxa e turquesa, creando unha atmosfera de escala global detrás do elemento principal; (2) deseños de tarxetas de produto: widgets flotantes que mostran saldos de contas, detalles de transferencias e fragmentos de código JSON en tarxetas brancas con sombras dramáticas; (3) visualizacións de gráficos: gráficos de barras ou de candelabros turquesas con liñas de conexión finas utilizadas na sección de confianza/estatísticas. O mapa de semitonos é un elemento visual característico: o seu degradado fai transicións de #d65620 (laranxa) a través do violeta, azul, azur, turquesa e amarelo, creando un espectro que une toda a paleta da marca nunha única superficie decorativa. As iconas teñen un grosor de contorno uniforme de 1,5 a 2 px nas variantes #232730 ou #a9acb6, cun recheo para os estados activos. Sen fotos de estilo de vida, sen renderizacións 3D abstractas: a moderación é intencionada para centrar a atención no produto e nos datos.
Paleta
Marca
- Indigo Navy
#111a4a— A cor principal da marca úsase para as chamadas á acción completas, os estados de navegación activos, a cabeceira e o logotipo. A cor azul violeta intensa dálle ao sitio un ton negro sólido pero rico; combinada co texto branco, crea o botón máis asertivo do sitio. - Seafoam 600
#44b48b— A cor do código e dos datos é a cor de marca para as claves JSON, os identificadores e os valores financeiros nos fragmentos de código. Tamén se usa para os puntos de datos nos gráficos e nas visualizacións de crecemento. - Seafoam 700
#167e6c— Un ton máis escuro de escuma de mar para o contorno, as liñas do gráfico e os acentos das iconas dentro do contexto dos datos. Isto ancora a escala da escuma de mar contra o fondo máis escuro. - Seafoam 400
#94efb7— O fragmento de código resaltado contén valores de cadea, URL e puntos finais da API dentro de bloques de código. A cor escuma de mar máis clara lese como unha fonte monoespaciada cun ton verdoso. - Deep Sea
#023247— O contorno decorativo e a cor de acento do gráfico é unha rica cor turquesa que se usa nas ilustracións SVG e nas visualizacións de datos, xunto coa escala de cores da escuma do mar.
Neutro
- Midnight Ink
#011821— Superficie escura e texto resaltado: fondo da tarxeta do produto, texto principal de alto contraste. Máis preto do gris cun ton azul verdoso frío; úsase como base para o modo escuro cando é necesario invertir unha sección. - Slate Ink
#3b3e47— O título secundario e o texto principal son un pouco máis cálidos que os de Midnight Ink, usados onde o negro puro parecería demasiado duro na tea clara. - Steel
#7c7f88— O texto principal e o texto da ligazón están dominados por unha cor apagada (usada 245 veces no texto principal). Unha cor azul grisácea neutra que se percibe como tranquila, nunca como unha imaxe descolorida. - Fog
#a9acb6— Contornos de iconas, bordos terciarios e texto de marcador de posición. Unha cor gris media que separa o texto sen competir con el. - Mist
#cbcccf— O texto principal (sinaturas, exencións de responsabilidade e letra pequena) é lexible sobre un fondo branco, pero visualmente menos perceptible. - Silver Lining
#e3e4e8— Bordes de tarxetas, bordos de campos de entrada, liñas divisorias. Esta cor estrutural e sutil úsase onde dúas superficies precisan separarse sen sombras.
Tipografía
de 10 a 60 px · 10 pasos
- SuisseIntl — substitución: Inter · contornos 300, 400, 500, 600 · Fonte principal: úsase para todos os títulos, o corpo do texto, os botóns, a navegación, as ligazóns e o texto das tarxetas. A singular letra sans serif xeométrica dálle a Column un estilo editorial distintivo, o que a diferencia doutras empresas fintech que traballan exclusivamente con Inter-only. O peso é de 600 a 52–60 px para os títulos, 500 para os subtítulos, 400 para o corpo do texto e 300 para as ligazóns de baixa énfase.
- SuisseIntlMono — substitución: JetBrains Mono · contornos 400 · Unha fonte monoespaciada semellante a SuisseIntl, usada para etiquetas técnicas, identificadores de API e datos incrustados en elementos da interface de usuario. Mantén as mesmas proporcións que SuisseIntl, polo que o texto monoespaciado e proporcional se aliña correctamente en contextos mixtos.
- SFMono — substitución: Fira Code · contornos 400 · Visualización de fragmentos de código: móstrase en exemplos JSON e bloques de documentación da API. Úsase unha sombra escuma de mar para distinguir visualmente o código do texto da interface de usuario.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | media |
| Paso básico | 8px |
| Radio do botón | 8px |
| Radio da tarxeta | 8px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 72px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Column e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- dope.security — Terminal de medianoite con balizas moradas
- Leonardo — Unha galería editorial invertida. Un museo con paredes negras onde os titulares morados actúan como instalacións murais e os retratos xerados por IA colgan nunha densa cuadrícula debaixo.
- VEED — Galería de parede branca con botóns de luz verde neón
- Craft Docs — Unha colaxe dixital para scrapbooking. O deseño parécese a un álbum de recortes reflexivo e táctil, onde as notas dixitais estruturadas se combinan con texturas suaves e orgánicas.
- Letter — Unha galería privada con artefactos brillantes procedentes de almacéns. Un espazo de exposición con paredes negras onde os titulares con serigrafía flotan sobre as esculturas cromadas das paredes tintadas da galería.
- Railway — O Expreso Cósmico da Medianoite. Unha viaxe tranquila e emocionante a través do espazo escuro e estrelado, guiada por sinais claros.
- Garden Eight — Un editorial monumental en papel cor crema. O titular con serifa de 215 px aséntase só sobre un pergamiño cálido, rodeado de formas escultóricas flotantes e espazo negativo que lembra o aire mariño; a páxina parécese máis á portada dunha monografía de arte que a un cadro de mando.
- Steep — Análise de fontes serif en papel quente
- ElevenLabs — Un ensaio fotográfico en tons crema cálidos con titulares sutís. Un caderno de estilo Bauhaus: papel cor casca de ovo, tinta negra e un único detalle morado e laranxa para a exhibición do produto.
- Awesomic — Malla editorial de zinc con signos de puntuación laranxas que lembran confeti
- Monad — revista técnica editorial en pergamiño quente
- AI for Business — Sala de exposicións editorial brutalista en tons grises cálidos