Column
un registro blu scuro sotto la fresca alba
Column utilizza un blu navy intenso e istituzionale su uno sfondo quasi bianco: la pagina trasmette innanzitutto la sensazione di un robusto prodotto bancario e solo in secondo luogo quella di un ambiente di sviluppo. Il colore del marchio non è un singolo colore, ma una coppia coordinata: blu navy #111a4a per la struttura più formale, verde menta #44b48b per dati e codice, con un unico arancione caldo (#ec652b) riservato alle superfici di accento ad alta intensità, come la carta Brex. La tipografia è dominata da SuisseIntl, un sans serif geometrico utilizzato per l'intera gamma di pesi, da 300 (link) a 600 (display), conferendo al sistema uno stile raffinato ed editoriale che manca alla maggior parte delle aziende fintech. Le carte fluttuano su ampie superfici bianche con ombre sottili e stratificate; la maggior parte degli elementi dell'interfaccia è piatta, con la profondità che appare solo dove la carta dovrebbe dare l'impressione di un oggetto fisico (widget di transazione, mockup di prodotto). Il codice e i dati finanziari sono presentati in monocromia color verde acqua, un segnale visivo che indica che questa è una banca creata da ingegneri per ingegneri.
La struttura della pagina è a larghezza intera, centrata con ampi margini laterali (64–15 cm su desktop). La schermata principale ha un layout diviso: il titolo e le call to action sono allineati a sinistra a 25 cm, mentre un widget di transazione flottante è posizionato a destra a 55 cm su uno sfondo a mezzatinta con mappa. Sotto la schermata principale, le sezioni si alternano tra bianco (4 cm) e tela chiara (5 cm) con spaziatura verticale di 6 cm. Il contenuto è organizzato secondo una singola griglia a 6 colonne: i blocchi di testo occupano 4 colonne (7 cm), le immagini/schede prodotto occupano 5–6 colonne, con un offset intenzionale rispetto alla griglia. Le sezioni che descrivono le caratteristiche utilizzano un layout a 2 colonne: testo a sinistra, prodotto a destra. La sezione delle statistiche di affidabilità è divisa in una griglia a 4 colonne che si estende per tutta la larghezza della pagina. I loghi dei clienti sono posizionati in un'unica riga centrata con spaziatura di 48px. Il piè di pagina ha un layout compatto a due colonne. La navigazione è costituita da una barra superiore fissa, trasparente, alta 62 pixel, sovrapposta alla schermata principale, con uno sfondo sfocato che sfuma in bianco durante lo scorrimento. Non sono presenti barre laterali o mega-menu: i menu a tendina sono semplici menu a freccia.
Lo stile visivo è minimalista e funzionale: Column evita completamente le immagini di repertorio. Il linguaggio visivo si basa su tre elementi: (1) illustrazioni di dati SVG, nello specifico una mappa del mondo a mezzitoni punteggiata, renderizzata con una sfumatura dall'indaco all'arancione al turchese, creando un'atmosfera di scala globale dietro l'elemento principale; (2) layout delle schede prodotto: widget fluttuanti che mostrano saldi dei conti, dettagli dei trasferimenti e frammenti di codice JSON in schede bianche con ombreggiature intense; (3) visualizzazioni grafiche: grafici a candele o a barre turchesi con linee di collegamento sottili utilizzati nella sezione fiducia/statistiche. La mappa a mezzitoni è un elemento visivo distintivo: la sua sfumatura passa da #d65620 (arancione) attraverso il viola, il blu, l'azzurro, il turchese e il giallo, creando uno spettro che unisce l'intera palette del marchio su un'unica superficie decorativa. Le icone hanno uno spessore del contorno uniforme di 1,5-2 px nelle varianti #232730 o #a9acb6, con un riempimento per gli stati attivi. Niente foto di lifestyle, niente rendering 3D astratti: la sobrietà è intenzionale per concentrare l'attenzione sul prodotto e sui dati.
Tavolozza
Marca
- Indigo Navy
#111a4a— Il colore principale del marchio viene utilizzato per le call to action, gli stati di navigazione attivi, l'intestazione e il logo. Il blu-violetto intenso conferisce al sito una tonalità nera solida ma al contempo ricca; abbinato al testo bianco, crea il pulsante più incisivo del sito. - Seafoam 600
#44b48b— Il colore "Code and Data" è il colore del marchio utilizzato per le chiavi JSON, gli identificatori e i valori finanziari negli snippet di codice. Viene utilizzato anche per i punti dati nei grafici e nelle visualizzazioni di crescita. - Seafoam 700
#167e6c— Una tonalità più scura di verde acqua per il contorno, le linee del grafico e gli elementi decorativi delle icone all'interno del contesto dei dati. Questo fa risaltare la scala verde acqua sullo sfondo più scuro. - Seafoam 400
#94efb7— Il frammento di codice evidenziato contiene valori stringa, URL ed endpoint API all'interno di blocchi di codice. Il colore verde acqua più chiaro appare come un carattere a spaziatura fissa con una sfumatura verdastra. - Deep Sea
#023247— Il contorno decorativo e il colore di accento del grafico sono di un ricco color turchese, utilizzato nelle illustrazioni SVG e nelle visualizzazioni di dati, insieme alla scala di colori verde acqua.
Neutro
- Midnight Ink
#011821— Superficie scura e testo evidenziato: sfondo della scheda prodotto, testo principale ad alto contrasto. Più vicino al grigio con una fredda tinta blu-verde; utilizzato come base per la modalità scura quando una sezione deve essere invertita. - Slate Ink
#3b3e47— Il titolo secondario e il testo principale hanno una tonalità leggermente più calda rispetto a Inchiostro di Mezzanotte, utilizzata laddove il nero puro risulterebbe troppo duro sulla tela chiara. - Steel
#7c7f88— Il testo principale e il testo dei link sono dominati da un colore tenue (utilizzato 245 volte nel testo principale). Un grigio-blu neutro che viene percepito come rilassante, mai sbiadito. - Fog
#a9acb6— Contorni delle icone, bordi secondari e testo segnaposto. Un colore grigio medio che separa il testo senza entrare in competizione con esso. - Mist
#cbcccf— Il testo principale (firme, note legali e scritte in piccolo) è leggibile su sfondo bianco, ma visivamente risulta meno evidente. - Silver Lining
#e3e4e8— Bordi delle schede, bordi dei campi di input, linee di separazione. Questo colore strutturale e discreto viene utilizzato quando è necessario separare due superfici senza creare ombre.
Tipografia
da 10 a 60px · 10 passaggi
- SuisseIntl — sostituzione: Inter · contorni 300, 400, 500, 600 · Carattere principale: utilizzato per tutti i titoli, il corpo del testo, i pulsanti, la navigazione, i link e il testo delle schede. L'esclusivo sans serif geometrico conferisce a Column uno stile editoriale distintivo, differenziandolo dalle altre società fintech che lavorano esclusivamente con Inter-only. Il peso è di 600 a 52–60px per i titoli, 500 per i sottotitoli, 400 per il corpo del testo e 300 per i link a bassa enfasi.
- SuisseIntlMono — sostituzione: JetBrains Mono · contorni 400 · Un carattere a spaziatura fissa simile a SuisseIntl, utilizzato per etichette tecniche, identificatori API e dati incorporati negli elementi dell'interfaccia utente. Mantiene le stesse proporzioni di SuisseIntl, quindi il testo a spaziatura fissa e quello proporzionale si allineano correttamente in contesti misti.
- SFMono — sostituzione: Fira Code · contorni 400 · Visualizzazione di frammenti di codice: visualizzati negli esempi JSON e nei blocchi di documentazione API. Viene utilizzata una tonalità verde acqua per distinguere visivamente il codice dal testo dell'interfaccia utente.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 8px |
| Raggio del pulsante | 8px |
| Raggio della carta | 8px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 72px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Column e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- dope.security — Terminale di mezzanotte con fari viola
- Leonardo — Una galleria editoriale capovolta. Un museo dalle pareti nere dove i titoli viola fungono da installazioni murali e ritratti generati dall'intelligenza artificiale sono appesi in una fitta griglia sottostante.
- VEED — Parete bianca della galleria con pulsanti luminosi verde neon
- Craft Docs — Un collage digitale per lo scrapbooking. Il design ricorda un album di ritagli ricercato e tattile, dove note digitali strutturate si combinano con texture morbide e organiche.
- Letter — Una galleria privata che espone manufatti scintillanti provenienti da un deposito. Uno spazio espositivo dalle pareti nere dove titoli con caratteri serif fluttuano sopra sculture cromate sulle pareti colorate della galleria.
- Railway — Il Cosmic Midnight Express. Un viaggio tranquillo ed emozionante attraverso lo spazio oscuro e stellato, guidato da segnali inequivocabili.
- Garden Eight — Un editoriale monumentale su carta color crema. Il titolo con grazie di 215 pixel si erge solitario su una calda pergamena, circondato da forme scultoree fluttuanti e da uno spazio negativo che ricorda l'aria di mare: la pagina sembra più la copertina di una monografia d'arte che il cruscotto di un'auto.
- Steep — Analisi dei caratteri serif su carta calda
- ElevenLabs — Un reportage fotografico dai toni caldi color crema con titoli delicati. Un taccuino in stile Bauhaus: carta color guscio d'uovo, inchiostro nero e un unico accento viola e arancione per la presentazione del prodotto.
- Awesomic — Rete metallica in zinco per uso editoriale con segni di punteggiatura arancioni che ricordano i coriandoli.
- Monad — Rivista tecnica editoriale sulla pergamena calda
- AI for Business — Sala espositiva in stile brutalista dai toni caldi del grigio.