Column
tamnoplava knjiga pod hladnom zorom
Kolumna koristi duboku, institucionalnu tamnoplavu boju na gotovo bijeloj pozadini: stranica se prvo čini kao robusna površina bankarskog proizvoda, a tek onda kao igralište za programere. Boja brenda nije jedna, već koordinirani par - tamnoplava #111a4a za ozbiljnu strukturu, mint zelena #44b48b za podatke i kod - s jednom toplo narandžastom (#ec652b) rezerviranom za akcentne površine visokog intenziteta poput Brex kartice. Tipografijom dominira SuisseIntl, geometrijski sans serif koji se koristi u cijelom rasponu težina od 300 (linkovi) do 600 (prikaz), dajući sistemu profinjen, urednički stil koji većini fintech kompanija nedostaje. Kartice lebde na velikim bijelim površinama sa suptilnim, slojevitim sjenama; većina elemenata interfejsa je ravna, s dubinom koja se pojavljuje samo tamo gdje bi kartica trebala djelovati kao fizički objekt (vidgeti za transakcije, makete proizvoda). Kod i finansijski podaci su prikazani monohromatski, boje morske pjene - vizualni signal da je ovo banka koju su izgradili inženjeri za inženjere.
Struktura stranice je pune širine, centrirana sa širokim bočnim marginama (64–15 cm na desktopu). Glavni ekran je podijeljenog rasporeda: naslov i pozivi na akciju su poravnati lijevo na 25 cm, dok je plutajući vidžet za transakcije pozicioniran desno na 55 cm na pozadini polutonske mape. Ispod glavnog ekrana, odjeljci se naizmjenično prikazuju između bijelog (4 cm) i svijetlog platna (5 cm) sa vertikalnim rubovima od 6 cm. Sadržaj je raspoređen prema jednoj mreži sa 6 kolona: blokovi teksta zauzimaju 4 kolone (7 cm), kartice slika/proizvoda zauzimaju 5–6 kolona, sa namjernim pomakom od mreže. Odjeljci koji opisuju karakteristike koriste raspored sa 2 kolone: tekst s lijeve strane, proizvod s desne strane. Odjeljak sa statistikom povjerenja podijeljen je u mrežu sa 4 kolone preko cijele širine stranice. Logotipi kupaca nalaze se u jednom centriranom redu sa rubovima od 48px. Podnožje ima kompaktan raspored sa dvije kolone. Navigacija je fiksna, prozirna gornja traka visoka 62 piksela preko glavnog ekrana sa zamućenom pozadinom koja postaje bijela dok skrolujete. Nema bočne trake ili mega-menija - padajući meniji su jednostavni meniji u obliku strelica.
Vizuelni stil je minimalistički i funkcionalan - Kolona u potpunosti izbjegava stock fotografije. Vizuelni jezik je izgrađen na tri izvora: (1) SVG ilustracije podataka, posebno isprekidana polutonska mapa svijeta, prikazana s gradijentom od indiga preko narandžaste do tirkizne, stvarajući atmosferu globalnih razmjera iza glavnog elementa; (2) rasporedi kartica proizvoda - plutajući widgeti koji prikazuju stanja računa, detalje transfera i isječke JSON koda u bijelim karticama s dramatičnim sjenama; (3) vizualizacije grafikona - tirkizni svijećnjaci ili stupčasti grafikoni s tankim spojnim linijama korištenim u odjeljku povjerenje/statistika. Polutonska mapa je prepoznatljiv vizualni element - njen gradijent prelazi iz #d65620 (narandžasta) preko ljubičaste, plave, azurne, tirkizne i žute, stvarajući spektar koji ujedinjuje cijelu paletu brenda na jednoj dekorativnoj površini. Ikone imaju ujednačenu debljinu obrisa od 1,5-2px u varijantama #232730 ili #a9acb6, s ispunom za aktivna stanja. Nema fotografija životnog stila, nema apstraktnih 3D rendera - ograničenje je namjerno usmjereno na proizvod i podatke.
Paleta
Brend
- Indigo Navy
#111a4a— Primarna boja brenda koristi se za ispunjene pozive na akciju, aktivna stanja navigacije, zaglavlje i logo. Duboka ljubičasto-plava boja daje stranici čvrstu, ali bogatu crnu nijansu; uparena s bijelim tekstom, stvara najasertivnije dugme na stranici. - Seafoam 600
#44b48b— Boja koda i podataka je boja brenda za JSON ključeve, identifikatore i finansijske vrijednosti u isječcima koda. Također se koristi za podatkovne tačke u grafikonima i vizualizacijama rasta. - Seafoam 700
#167e6c— Tamnija nijansa morske pjene za obris, linije grafikona i akcente ikona unutar konteksta podataka. Ovo usidrava skalu morske pjene na tamnijoj pozadini. - Seafoam 400
#94efb7— Istaknuti fragment koda sadrži string vrijednosti, URL-ove i API krajnje tačke unutar blokova koda. Najsvjetlija boja morske pjene čita se kao font s jednostrukim razmakom i zelenkastom nijansom. - Deep Sea
#023247— Dekorativni obris i akcentna boja grafikona su bogata tirkizna boja koja se koristi u SVG ilustracijama i vizualizacijama podataka, zajedno sa skalom boja morske pjene.
Neutralno
- Midnight Ink
#011821— Tamna površina i istaknuti tekst – pozadina kartice proizvoda, glavni tekst visokog kontrasta. Bliže sivoj boji s hladnom plavo-zelenom nijansom; koristi se kao osnova za tamni način rada kada je potrebno invertirati dio. - Slate Ink
#3b3e47— Sekundarni naslov i glavni tekst su malo topliji od Midnight Ink, korištene tamo gdje bi čista crna djelovala pregrubo na svijetlom platnu. - Steel
#7c7f88— Glavni tekst i tekst linka dominiraju prigušena boja (korištena 245 puta u glavnom tekstu). Neutralna sivo-plava boja koja se doživljava kao smirena, nikada isprana slika. - Fog
#a9acb6— Obrisi ikona, tercijarne ivice i tekst rezerviranog mjesta. Srednje siva boja koja odvaja tekst bez da se s njim natječe. - Mist
#cbcccf— Glavni tekst - potpisi, odricanja odgovornosti i sitni tisak - čitljiv je na bijeloj pozadini, ali vizualno manje uočljiv. - Silver Lining
#e3e4e8— Okviri kartica, okviri polja za unos, linije razdvajanja. Ova strukturna, suptilna boja se koristi tamo gdje dvije površine treba odvojiti bez sjena.
Tipografija
od 10 do 60px · 10 koraka
- SuisseIntl — zamjena: Inter · obrisi 300, 400, 500, 600 · Primarni font – koristi se za sve naslove, glavni tekst, dugmad, navigaciju, linkove i tekst kartica. Jedinstveni geometrijski sans serif daje Columnu prepoznatljiv urednički stil, izdvajajući ga od drugih fintech kompanija koje rade isključivo s Inter-only. Težina je 600 na 52–60px za naslove, 500 za podnaslove, 400 za glavni tekst i 300 za linkove s niskim naglaskom.
- SuisseIntlMono — zamjena: JetBrains Mono · obrisi 400 · Monospaced font sličan SuisseIntl-u, koji se koristi za tehničke oznake, API identifikatore i ugrađene podatke u UI elementima. Održava iste proporcije kao SuisseIntl, tako da se monospaced i proporcionalni tekst ispravno poravnavaju u mješovitim kontekstima.
- SFMono — zamjena: Fira Code · obrisi 400 · Prikaz isječka koda – prikazuje se u JSON primjerima i blokovima API dokumentacije. Nijansa morske pjene koristi se za vizualno razlikovanje koda od teksta korisničkog interfejsa.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus dugmeta | 8px |
| Radijus kartice | 8px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 72px |
| Širina stranice | 1200px |
Vještačka inteligencija će izgraditi vašu web stranicu u Column stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- dope.security — Ponoćni terminal sa ljubičastim svjetionicima
- Leonardo — Invertovana urednička galerija. Muzej s crnim zidovima gdje ljubičasti naslovi djeluju kao zidne instalacije, a portreti generirani umjetnom inteligencijom vise u gustoj mreži ispod.
- VEED — Bijeli galerijski zid sa neonsko zelenim svjetlosnim dugmićima
- Craft Docs — Digitalni kolaž za scrapbooking. Dizajn podsjeća na promišljen, taktilni album, gdje se strukturirane digitalne bilješke kombiniraju s mekim, organskim teksturama.
- Letter — Privatna galerija sa svjetlucavim artefaktima iz skladišta. Izložbeni prostor sa crnim zidovima gdje se serifirani naslovi lebde iznad hromiranih skulptura na zatamnjenim zidovima galerije.
- Railway — Kosmički ponoćni ekspres. Mirno, uzbudljivo putovanje kroz mračan, zvjezdanim svjetlom obasjan svemir, vođeno jasnim signalima.
- Garden Eight — Monumentalni uvodnik na krem papiru boje. Naslov sa serifnim slovima veličine 215 piksela stoji sam na toplom pergamentu, okružen lebdećim skulpturalnim oblicima i negativnim prostorom koji podsjeća na morski zrak - stranica više podsjeća na korice umjetničke monografije nego na kontrolnu ploču.
- Steep — Analiza serifnih fontova na toplom papiru
- ElevenLabs — Foto esej u toplim krem tonovima sa suptilnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narandžasti akcenat za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s narandžastim interpunkcijskim znakovima koji podsjećaju na konfete
- Monad — urednički tehnički časopis na toplom pergamentu
- AI for Business — Brutalistički urednički izložbeni salon u toplim sivim tonovima