Column
tamnoplava knjiga pod hladnom zorom
Kolumna koristi duboku, institucionalnu tamnoplavu boju na gotovo bijeloj pozadini: stranica se prvo doima kao robusna površina bankarskog proizvoda, a tek onda kao igralište za razvojne programere. Boja brenda nije jedna, već koordinirani par - tamnoplava #111a4a za ozbiljnu strukturu, mint zelena #44b48b za podatke i kod - s jednom toplo narančastom (#ec652b) rezerviranom za naglašene površine visokog intenziteta poput Brex kartice. Tipografijom dominira SuisseIntl, geometrijski sans serif koji se koristi u cijelom rasponu težine od 300 (linkovi) do 600 (prikaz), dajući sustavu profinjen, urednički stil koji većini fintech tvrtki nedostaje. Kartice lebde na velikim bijelim površinama sa suptilnim, slojevitim sjenama; većina elemenata sučelja je ravna, s dubinom koja se pojavljuje samo tamo gdje bi se kartica trebala doimati kao fizički objekt (widgeti za transakcije, makete proizvoda). Kod i financijski podaci prikazani su monokromatski, 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 računalu). Glavni zaslon je podijeljenog izgleda: naslov i pozivi na akciju poravnati su lijevo na 25 cm, dok je plutajući widget za transakcije postavljen desno na 55 cm na pozadini polutonske karte. Ispod glavnog zaslona, odjeljci se izmjenjuju između bijelog (4 cm) i svijetlog platna (5 cm) sa 6 cm okomitih rubova. Sadržaj je raspoređen prema jednoj mreži sa 6 stupaca: blokovi teksta zauzimaju 4 stupca (7 cm), kartice slika/proizvoda zauzimaju 5–6 stupaca, s namjernim pomakom od mreže. Odjeljci koji opisuju značajke koriste raspored s 2 stupca: tekst s lijeve strane, proizvod s desne strane. Odjeljak sa statistikom povjerenja podijeljen je u mrežu s 4 stupca preko cijele širine stranice. Logotipi kupaca nalaze se u jednom centriranom retku s rubovima od 48px. Podnožje ima kompaktan raspored s dva stupca. Navigacija je fiksna, 62px visoka, prozirna gornja traka iznad glavnog zaslona s mutnom pozadinom koja postaje bijela dok se pomičete. Nema bočne trake ili mega-izbornika - padajući izbornici su jednostavni izbornici u obliku strelica.
Vizualni stil je minimalistički i funkcionalan - Column u potpunosti izbjegava stock fotografije. Vizualni jezik izgrađen je na tri izvora: (1) ilustracije SVG podataka, posebno točkasta karta svijeta u polutonovima, prikazana s gradijentom od indiga preko narančaste do tirkizne, stvarajući atmosferu globalnih razmjera iza glavnog elementa; (2) izgledi kartica proizvoda - plutajući widgeti koji prikazuju stanja računa, detalje prijenosa 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šteni u odjeljku povjerenja/statistike. Polutonska karta je prepoznatljiv vizualni element - njezin gradijent prelazi iz #d65620 (naranč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 - suzdržanost je namjerna kako bi se pozornost usmjerila na proizvod i podatke.
Paleta
Robna marka
- Indigo Navy
#111a4a— Primarna boja brenda koristi se za ispunjene pozive na akciju, aktivna stanja navigacije, zaglavlje i logotip. Duboka ljubičasto-plava boja daje stranici čvrstu, ali bogatu crnu nijansu; uparena s bijelim tekstom stvara najsnažniji gumb na stranici. - Seafoam 600
#44b48b— Boja koda i podataka je boja brenda za JSON ključeve, identifikatore i financijske vrijednosti u isječcima koda. Također se koristi za podatkovne točke u grafikonima i vizualizacijama rasta. - Seafoam 700
#167e6c— Tamnija nijansa morske pjene za obris, linije grafikona i naglaske ikona unutar konteksta podataka. Ovo usidrava skalu morske pjene na tamnijoj pozadini. - Seafoam 400
#94efb7— Istaknuti fragment koda sadrži nizove vrijednosti, URL-ove i API krajnje točke unutar blokova koda. Najsvjetlija boja morske pjene čita se kao font s jednostrukim razmakom i zelenkastom nijansom. - Deep Sea
#023247— Dekorativni obris i naglašena 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 s hladnom plavozelenom nijansom; koristi se kao osnova za tamni način rada kada je potrebno invertirati dio. - Slate Ink
#3b3e47— Sporedni 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 poveznice dominiraju prigušena boja (korištena 245 puta u glavnom tekstu). Neutralna sivoplava boja koja se doživljava kao smirena, nikada isprana slika. - Fog
#a9acb6— Obrisi ikona, tercijarni okviri i tekst rezerviranog mjesta. Srednje siva boja koja odvaja tekst bez da se s njim natječe. - Mist
#cbcccf— Glavni tekst - potpisi, izjave o odricanju odgovornosti i sitni tisak - čitljiv je na bijeloj pozadini, ali vizualno manje uočljiv. - Silver Lining
#e3e4e8— Rubovi kartica, rubovi polja za unos, razdjelne linije. Ova strukturna, suptilna boja koristi se 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, gumbe, navigaciju, poveznice i tekst kartica. Jedinstveni geometrijski sans serif daje Columnu prepoznatljiv urednički stil, izdvajajući ga od ostalih fintech tvrtki 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 poveznice s niskim naglaskom.
- SuisseIntlMono — zamjena: JetBrains Mono · obrisi 400 · Font s jednostrukim razmakom sličan SuisseIntl-u, koristi se za tehničke oznake, API identifikatore i ugrađene podatke u UI elementima. Održava iste proporcije kao SuisseIntl, tako da se tekst s jednostrukim razmakom 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 sučelja.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | prosjek |
| Osnovni korak | 8px |
| Radijus gumba | 8px |
| Radijus kartice | 8px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 72px |
| Širina stranice | 1200px |
Umjetna inteligencija će izraditi vašu web stranicu u Column stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- dope.security — Ponoćni terminal s ljubičastim svjetionicima
- Leonardo — Invertirana 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 s neonsko zelenim svjetlosnim gumbima
- 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 s svjetlucavim artefaktima iz skladišta. Izložbeni prostor s crnim zidovima gdje se serifirani naslovi vijugaju iznad kromiranih skulptura na obojenim zidovima galerije.
- Railway — Kozmički ponoćni ekspres. Mirno, uzbudljivo putovanje kroz mračan, zvjezdanim svjetlom osvijetljen svemir, vođeno jasnim signalima.
- Garden Eight — Monumentalni uvodnik na krem papiru. Naslov od 215 piksela sa serifnim slovima stoji sam na toplom pergamentu, okružen lebdećim skulpturalnim oblicima i negativnim prostorom koji podsjeća na morski zrak - stranica više nalikuje naslovnici umjetničke monografije nego nadzornoj ploči.
- Steep — Analiza serifnih fontova na toplom papiru
- ElevenLabs — Foto esej u toplim krem tonovima s decentnim naslovima. Bilježnica u stilu Bauhausa - papir boje ljuske jajeta, crna tinta i jedan ljubičasti i narančasti naglasak za izlaganje proizvoda.
- Awesomic — Urednička cinkova mreža s naranč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 prostor u toplim sivim tonovima