Column
un libro de contabilidad azul oscuro bajo el fresco amanecer
Column utiliza un azul marino profundo e institucional sobre un fondo casi blanco: la página se percibe primero como la superficie de un producto bancario robusto y, en segundo lugar, como un espacio de desarrollo. El color de la marca no es único, sino una combinación coordinada: azul marino #111a4a para la estructura seria, verde menta #44b48b para los datos y el código, con un naranja cálido (#ec652b) reservado para superficies de acento de alta intensidad, como la tarjeta Brex. La tipografía está dominada por SuisseIntl, una sans serif geométrica utilizada en todo el rango de grosor, desde 300 (enlaces) hasta 600 (display), lo que le da al sistema un estilo editorial refinado del que carecen la mayoría de las empresas fintech. Las tarjetas flotan sobre grandes superficies blancas con sutiles sombras en capas; la mayoría de los elementos de la interfaz son planos, y la profundidad aparece solo donde la tarjeta debe percibirse como un objeto físico (widgets de transacciones, maquetas de productos). El código y los datos financieros se presentan en monocromo, color verde menta, una señal visual de que este es un banco creado por ingenieros para ingenieros.
La estructura de la página es de ancho completo, centrada con amplios márgenes laterales (64–15 cm en escritorio). La pantalla principal tiene un diseño dividido: el titular y las llamadas a la acción están alineados a la izquierda a 25 cm, mientras que un widget de transacción flotante se posiciona a la derecha a 55 cm sobre un fondo de mapa de semitonos. Debajo de la pantalla principal, las secciones alternan entre lienzo blanco (4 cm) y lienzo claro (5 cm) con márgenes verticales de 6 cm. El contenido está organizado según una única cuadrícula de 6 columnas: los bloques de texto ocupan 4 columnas (7 cm), las tarjetas de imagen/producto ocupan 5–6 columnas, con un desplazamiento intencional de la cuadrícula. Las secciones que describen características utilizan un diseño de 2 columnas: texto a la izquierda, producto a la derecha. La sección de estadísticas de confianza está dividida en una cuadrícula de 4 columnas a lo largo de todo el ancho de la página. Los logotipos de clientes se encuentran en una única fila centrada con márgenes de 48 px. El pie de página tiene un diseño compacto de dos columnas. La navegación consiste en una barra superior fija, transparente, de 62 píxeles de alto, situada sobre la pantalla principal, con un fondo difuminado que se desvanece a blanco al desplazarse. No hay barra lateral ni megamenú; los menús desplegables son sencillos, con flechas.
El estilo visual es minimalista y funcional: Column evita por completo la fotografía de archivo. El lenguaje visual se basa en tres fuentes: (1) ilustraciones de datos SVG, específicamente un mapa del mundo de semitonos punteados, renderizado con un degradado de índigo a naranja a turquesa, creando una atmósfera de escala global detrás del elemento principal; (2) diseños de tarjetas de producto: widgets flotantes que muestran saldos de cuentas, detalles de transferencias y fragmentos de código JSON en tarjetas blancas con sombras dramáticas; (3) visualizaciones de gráficos: gráficos de velas o barras turquesas con líneas de conexión finas utilizadas en la sección de confianza/estadísticas. El mapa de semitonos es un elemento visual distintivo: su degradado transiciona de #d65620 (naranja) a través de violeta, azul, azul celeste, turquesa y amarillo, creando un espectro que unifica toda la paleta de la marca en una sola superficie decorativa. Los iconos tienen un grosor de contorno uniforme de 1,5–2px en las variantes #232730 o #a9acb6, con un relleno para los estados activos. No hay fotos de estilo de vida ni representaciones 3D abstractas: la sobriedad es intencional para centrar la atención en el producto y los datos.
Paleta
Marca
- Indigo Navy
#111a4a— El color principal de la marca se utiliza para los botones de llamada a la acción, los estados de navegación activos, el encabezado y el logotipo. El azul violeta intenso le da al sitio un tono negro sólido pero elegante; combinado con texto blanco, crea el botón más llamativo del sitio. - Seafoam 600
#44b48b— El color de código y datos es el color de marca para las claves JSON, los identificadores y los valores financieros en los fragmentos de código. También se utiliza para los puntos de datos en gráficos y visualizaciones de crecimiento. - Seafoam 700
#167e6c— Un tono más oscuro de verde espuma de mar para el contorno, las líneas del gráfico y los detalles de los iconos dentro del contexto de los datos. Esto hace que la escala verde espuma de mar destaque sobre el fondo más oscuro. - Seafoam 400
#94efb7— El fragmento de código resaltado contiene valores de cadena, URL y puntos finales de API dentro de bloques de código. El color verde menta más claro se lee como una fuente monoespaciada con un tinte verdoso. - Deep Sea
#023247— El contorno decorativo y el color de acento del gráfico son de un intenso color turquesa, utilizado en ilustraciones SVG y visualizaciones de datos, junto con la escala de color verde mar.
Neutral
- Midnight Ink
#011821— Superficie oscura y texto resaltado: fondo de la ficha del producto, texto principal de alto contraste. Tonalidad cercana al gris con un matiz azul verdoso frío; se utiliza como base para el modo oscuro cuando es necesario invertir una sección. - Slate Ink
#3b3e47— El título secundario y el texto principal tienen un tono ligeramente más cálido que el de Tinta Medianoche, utilizado donde el negro puro resultaría demasiado intenso sobre el lienzo claro. - Steel
#7c7f88— El texto principal y los enlaces están dominados por un color tenue (utilizado 245 veces en el texto principal). Un gris azulado neutro que transmite calma, nunca una imagen descolorida. - Fog
#a9acb6— Contornos de iconos, bordes terciarios y texto de marcador de posición. Un color gris medio que separa el texto sin competir con él. - Mist
#cbcccf— El texto principal —firmas, avisos legales y letra pequeña— es legible sobre un fondo blanco, pero visualmente resulta menos llamativo. - Silver Lining
#e3e4e8— Bordes de tarjetas, bordes de campos de entrada, líneas divisorias. Este color estructural y sutil se utiliza donde es necesario separar dos superficies sin crear sombras.
Tipografía
De 10 a 60 píxeles · 10 pasos
- SuisseIntl — reemplazo: Inter · esquemas 300, 400, 500, 600 · Fuente principal: se utiliza para todos los títulos, texto principal, botones, navegación, enlaces y texto de tarjetas. Su singular tipografía geométrica sans serif le confiere a Column un estilo editorial distintivo, diferenciándola de otras empresas fintech que trabajan exclusivamente con Inter-only. El grosor es de 600 ppp (52–60 px) para los títulos, 500 ppp para los subtítulos, 400 ppp para el texto principal y 300 ppp para los enlaces con poco énfasis.
- SuisseIntlMono — reemplazo: JetBrains Mono · esquemas 400 · Una fuente monoespaciada similar a SuisseIntl, utilizada para etiquetas técnicas, identificadores de API y datos incrustados en elementos de interfaz de usuario. Mantiene las mismas proporciones que SuisseIntl, por lo que el texto monoespaciado y proporcional se alinea correctamente en contextos mixtos.
- SFMono — reemplazo: Fira Code · esquemas 400 · Visualización de fragmentos de código: se muestran en los ejemplos JSON y en los bloques de documentación de la API. Se utiliza un tono verde menta para distinguir visualmente el código del texto de la interfaz de usuario.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | promedio |
| Paso básico | 8px |
| Radio del botón | 8px |
| Radio de la tarjeta | 8px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 72px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Column y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- dope.security — Terminal de medianoche con balizas moradas
- Leonardo — Una galería editorial invertida. Un museo de paredes negras donde los titulares morados funcionan como instalaciones murales y los retratos generados por IA cuelgan en una densa cuadrícula en la parte inferior.
- VEED — Pared blanca de la galería con botones de luz verde neón.
- Craft Docs — Un collage digital para scrapbooking. El diseño se asemeja a un álbum de recortes reflexivo y táctil, donde las notas digitales estructuradas se combinan con texturas suaves y orgánicas.
- Letter — Una galería privada que exhibe objetos relucientes procedentes de un almacén. Un espacio de exposición de paredes negras donde titulares con serifa flotan sobre esculturas cromadas en las paredes tintadas de la galería.
- Railway — El Expreso Cósmico de Medianoche. Un viaje tranquilo y emocionante a través del espacio oscuro e iluminado por las estrellas, guiado por señales claras.
- Garden Eight — Un editorial monumental en papel color crema. El titular con serifa de 215 píxeles se alza solitario sobre un pergamino cálido, rodeado de formas esculturales flotantes y espacios negativos que evocan la brisa marina; la página se asemeja más a la portada de una monografía de arte que al panel de control de un ordenador.
- Steep — Análisis de fuentes con serifa en papel cálido
- ElevenLabs — Un reportaje fotográfico en tonos crema cálidos con titulares sutiles. Un cuaderno de estilo Bauhaus: papel color blanco hueso, tinta negra y un único detalle en morado y naranja para la presentación del producto.
- Awesomic — Malla de zinc editorial con signos de puntuación naranjas que recuerdan al confeti.
- Monad — Revista técnica editorial en pergamino cálido
- AI for Business — Sala de exposiciones editoriales de estilo brutalista en tonos grises cálidos.