Column
un registru turchinu scuru sottu à l'alba fresca
Column usa un turchinu marinu prufondu è istituziunale nantu à un sfondate guasi biancu: a pagina si sente prima cum'è una superficia robusta di pruduttu bancariu è dopu un parcu di ghjochi per sviluppatori. U culore di a marca ùn hè micca unicu, ma una coppia coordinata - turchinu marinu #111a4a per una struttura seria, verde menta #44b48b per i dati è u codice - cù un unicu aranciu caldu (#ec652b) riservatu per superfici d'accentu d'alta intensità cum'è a carta Brex. A tipografia hè duminata da SuisseIntl, un sans serif geometricu utilizatu in tutta a gamma di pesu da 300 (link) à 600 (display), dendu à u sistema un stile editoriale raffinatu chì a maiò parte di e cumpagnie fintech ùn anu micca. E carte flottanu nantu à grandi superfici bianche cù ombre suttili è stratificate; a maiò parte di l'elementi di l'interfaccia sò piatti, cù a prufundità chì appare solu induve a carta duveria sembrà un ughjettu fisicu (widget di transazzione, mockup di prudutti). U codice è i dati finanziarii sò presentati in monocromu, culore schiuma di mare - un signale visuale chì si tratta di una banca custruita da ingegneri per ingegneri.
A struttura di a pagina hè à larghezza piena, centrata cù margini laterali larghi (64-15 cm nant'à u desktop). U schermu principale hà un layout divisu: u tìtulu è e chjame à l'azzione sò allineati à manca à 25 cm, mentre chì un widget di transazzione flottante hè pusizionatu à diritta à 55 cm contr'à un sfondate di mappa à mezu toni. Sottu à u schermu principale, e sezioni alternanu trà tela bianca (4 cm) è tela chjara (5 cm) cù margini verticali di 6 cm. U cuntenutu hè urganizatu secondu una sola griglia di 6 colonne: i blocchi di testu occupanu 4 colonne (7 cm), e carte d'imagine/produttu occupanu 5-6 colonne, cù un offset deliberatu da a griglia. E sezioni chì descrivenu e caratteristiche utilizanu un layout di 2 colonne: testu à manca, pruduttu à diritta. A sezione di statistiche di fiducia hè divisa in una griglia di 4 colonne per tutta a larghezza di a pagina. I loghi di i clienti sò situati in una sola fila centrata cù margini di 48px. U piè di pagina hà un layout compactu à duie colonne. A navigazione hè una barra superiore fissa, alta 62px, trasparente sopra u schermu principale cù un sfondate sfocatu chì diventa biancu mentre scorri. Ùn ci hè micca barra laterale o mega-menu - i menu a tendina sò menu simplici in stile freccia.
U stile visuale hè minimalista è funziunale - Column evita cumpletamente a fotografia di stock. U linguaghju visuale hè custruitu annantu à trè fonti: (1) illustrazioni di dati SVG, specificamente una carta geografica di i mezi toni punteggiati, resa cù un gradiente da l'indaco à l'aranciu à u turchese, creendu un'atmosfera di scala glubale daretu à l'elementu principale; (2) layout di carte di produttu - widget fluttuanti chì mostranu i saldi di i conti, i dettagli di i trasferimenti è i frammenti di codice JSON in carte bianche cù ombre drammatiche; (3) visualizzazioni di grafici - grafici à candelabri o barre turchine cù linee di cunnessione sottili aduprate in a sezione fiducia/statistiche. A carta à mezi toni hè un elementu visuale di firma - u so gradiente passa da #d65620 (aranciu) à traversu u viulettu, u blu, l'azzurru, u turchese è u giallu, creendu un spettru chì unisce tutta a paleta di a marca nantu à una sola superficia decorativa. L'icone anu un spessore di contornu uniforme di 1,5-2px in e varianti #232730 o #a9acb6, cù un riempimentu per i stati attivi. Nisuna foto di stile di vita, nisuna rappresentazione 3D astratta - a restrizione hè intenzionale per focalizà l'attenzione nantu à u pruduttu è i dati.
Paletta
Marca
- Indigo Navy
#111a4a— U culore principale di a marca hè adupratu per e chjame à l'azzione piene, i stati di navigazione attivi, l'intestazione è u logu. U culore violetu-turchinu prufondu dà à u situ una tinta nera solida ma ricca; assuciatu à u testu biancu, crea u buttone u più assertivu di u situ. - Seafoam 600
#44b48b— U culore di u codice è di i dati hè u culore di a marca per e chjave JSON, l'identificatori è i valori finanziarii in i frammenti di codice. Hè ancu adupratu per i punti di dati in i grafichi è e visualizazioni di crescita. - Seafoam 700
#167e6c— Una tonalità più scura di schiuma di mare per u contornu, e linee di u graficu è l'accenti di l'icone in u cuntestu di i dati. Questu ancora a scala di schiuma di mare contr'à u fondu più scuru. - Seafoam 400
#94efb7— U frammentu di codice evidenziatu cuntene valori di stringa, URL è endpoint API in blocchi di codice. U culore di schiuma di mare u più chjaru si legge cum'è un carattere monospaziatu cù una tinta verdastra. - Deep Sea
#023247— U contornu decorativu è u culore d'accentu di u graficu sò un culore turchese riccu utilizatu in l'illustrazioni SVG è e visualizazioni di dati, inseme cù a scala di culori di a schiuma di mare.
Neutru
- Midnight Ink
#011821— Superficie scura è testu evidenziatu - sfondate di a carta di u produttu, testu principale à altu cuntrastu. Più vicinu à u grisgiu cù una tinta blu-verde fresca; adupratu cum'è basa per a modalità scura quandu una sezione deve esse invertita. - Slate Ink
#3b3e47— U tìtulu secundariu è u testu principale sò un pocu più caldi chè Midnight Ink, utilizati induve u neru puru pareria troppu duru nantu à a tela chjara. - Steel
#7c7f88— U testu principale è u testu di u ligame sò duminati da un culore tenue (usatu 245 volte in u testu principale). Un culore grisgiu-blu neutru chì hè percepitu cum'è calmu, mai una maghjina sbiadita. - Fog
#a9acb6— Contorni di l'icone, bordi terziari è testu di segnapostu. Un culore grisgiu mediu chì separa u testu senza cumpete cun ellu. - Mist
#cbcccf— U testu principale - firme, disclaimer è caratteri chjuchi - hè leggibile nantu à un fondu biancu, ma visualmente menu perceptibile. - Silver Lining
#e3e4e8— Bordi di carte, bordi di campi d'input, linee di divisione. Stu culore strutturale è suttile hè adupratu induve duie superfici devenu esse separate senza ombre.
Tipografia
da 10 à 60px · 10 passi
- SuisseIntl — rimpiazzamentu: Inter · contorni 300, 400, 500, 600 · Carattere primariu - utilizatu per tutti i tituli, u testu di u corpu, i buttoni, a navigazione, i ligami è u testu di e carte. U sans serif geometricu unicu dà à Column un stile editoriale distintivu, chì a distingue da l'altre cumpagnie fintech chì travaglianu esclusivamente cù Inter-only. U pesu hè 600 à 52–60px per i tituli, 500 per i sottotituli, 400 per u testu di u corpu è 300 per i ligami à bassa enfasi.
- SuisseIntlMono — rimpiazzamentu: JetBrains Mono · contorni 400 · Un carattere monospaziatu simile à SuisseIntl, utilizatu per etichette tecniche, identificatori API è dati integrati in elementi UI. Mantene e stesse proporzioni cum'è SuisseIntl, dunque u testu monospaziatu è proporzionale s'allinea currettamente in cuntesti misti.
- SFMono — rimpiazzamentu: Fira Code · contorni 400 · Visualizzazione di frammenti di codice - visualizzata in esempi JSON è blocchi di documentazione API. Una tonalità di schiuma di mare hè aduprata per distingue visivamente u codice da u testu di l'interfaccia utente.
Intervalli è forma
| Scopu | Significatu |
|---|---|
| Densità | mediu |
| Passu basicu | 8px |
| Raggiu di u buttone | 8px |
| Raggiu di a carta | 8px |
| Ombre | nò - bordi invece di ombre |
| Trà e sezioni | 72px |
| Larghezza di a pagina | 1200px |
L'IA custruisce u vostru situ web in stile Column è u riempirà
- Riempite cù prudutti è publicazioni via u ligame - Instagram, TikTok, Facebook.
- Trasferisce u cuntenutu da u vostru vechju situ - basta à specificà l'indirizzu.
- Design mudernu nant'à u megliu mutore: React ( Next.js) cù rendering di u servitore è ottimizazione SEO pronta per l'usu.
- Ottimizazione SEO cumpletamente automatizata per i risultati di ricerca è e raccomandazioni di rete neurale.
Stili simili
- dope.security — Terminal di mezzanotte cù fari viola
- Leonardo — Una galeria editoriale inversa. Un museu cù muri neri induve i tituli viola agiscenu cum'è installazioni murali, è i ritratti generati da l'IA sò appesi in una griglia densa sottu.
- VEED — Muru di galleria biancu cù buttoni di luce verde neon
- Craft Docs — Un collage digitale per scrapbooking. U disignu s'assumiglia à un scrapbook pensativu è tattile, induve e note digitale strutturate si combinanu cù texture morbide è organiche.
- Letter — Una galeria privata chì prisenta artefatti scintillanti da u magazzinu. Un spaziu d'esposizione cù muri neri induve i tituli serifati flottanu sopra sculture cromate nantu à i muri tinti di a galeria.
- Railway — U Cosmic Midnight Express. Un viaghju calmu è eccitante à traversu u spaziu scuru è stellatu, guidatu da signali chjari.
- Garden Eight — Un editoriale munumentale nant'à carta di culore crema. U tìtulu serif di 215px si trova solu nant'à una pergamena calda, circundatu da forme scultoree fluttuanti è un spaziu negativu chì ricorda l'aria marina - a pagina s'assumiglia più à a copertina di una monografia d'arte chè à un cruscottu.
- Steep — Analisi di i caratteri Serif nantu à carta calda
- ElevenLabs — Un saggio fotograficu in toni caldi di crema cù tituli suttili. Un quaderno in stile Bauhaus - carta culurata cum'è un gusciu d'ovu, inchiostru neru è un unicu accentu viola è aranciu per a presentazione di u pruduttu.
- Awesomic — Maglia di zincu editoriale cù segni di punteggiatura aranciu chì ricordanu i confetti
- Monad — rivista tecnica editoriale nantu à pergamena calda
- AI for Business — Showroom editoriale brutalista in toni caldi di grisgiu