Column
një libër llogarish blu i errët nën agimin e freskët
Column përdor një ngjyrë blu të errët të thellë institucionale në një sfond pothuajse të bardhë: faqja ndihet së pari si një sipërfaqe e fuqishme produkti bankar dhe së dyti si një shesh lojërash për zhvilluesit. Ngjyra e markës nuk është një e vetme, por një çift i koordinuar - blu e errët #111a4a për strukturë serioze, jeshile mente #44b48b për të dhëna dhe kod - me një portokalli të ngrohtë të vetme (#ec652b) të rezervuar për sipërfaqe me theks me intensitet të lartë si karta Brex. Tipografia dominohet nga SuisseIntl, një sans serif gjeometrik i përdorur në të gjithë diapazonin e peshës nga 300 (lidhje) në 600 (shfaqje), duke i dhënë sistemit një stil të rafinuar editorial që u mungon shumicës së kompanive fintech. Kartat lundrojnë në sipërfaqe të mëdha të bardha me hije delikate dhe të shtresuara; shumica e elementëve të ndërfaqes janë të sheshtë, me thellësi që shfaqet vetëm aty ku karta duhet të ndihet si një objekt fizik (widget-e transaksionesh, makete produktesh). Kodi dhe të dhënat financiare paraqiten në një ngjyrë monokrome, me ngjyrë shkume deti - një sinjal vizual se kjo është një bankë e ndërtuar nga inxhinierë për inxhinierë.
Struktura e faqes është me gjerësi të plotë, e përqendruar me kufij të gjerë anësor (64–15 cm në desktop). Ekrani kryesor është një paraqitje e ndarë: titulli dhe thirrjet për veprim janë të vendosura majtas në 25 cm, ndërsa një vegël transaksioni lundruese është pozicionuar në të djathtë në 55 cm kundrejt një sfondi harte gjysmëtonëshe. Poshtë ekranit kryesor, seksionet alternojnë midis të bardhës (4 cm) dhe kanavacë të çelët (5 cm) me kanale vertikale 6 cm. Përmbajtja është e rregulluar sipas një rrjete të vetme me 6 kolona: blloqet e tekstit zënë 4 kolona (7 cm), kartat e imazhit/produktit zënë 5–6 kolona, me një zhvendosje të qëllimshme nga rrjeta. Seksionet që përshkruajnë veçoritë përdorin një paraqitje me 2 kolona: teksti në të majtë, produkti në të djathtë. Seksioni i statistikave të besimit është i ndarë në një rrjetë me 4 kolona në të gjithë gjerësinë e faqes. Logot e klientëve janë të vendosura në një rresht të vetëm të përqendruar me kanale 48px. Fundi i faqes ka një paraqitje kompakte me dy kolona. Navigimi është një shirit i fiksuar, transparent, me lartësi 62 pikselë, në pjesën e sipërme të ekranit kryesor, me një sfond të turbullt që zbehet në të bardhë ndërsa lëvizni. Nuk ka shirit anësor ose mega-menu - menutë zbritëse janë menu të thjeshta në stilin e shigjetave.
Stili vizual është minimalist dhe funksional—Column shmang plotësisht fotografinë e arkivuar. Gjuha vizuale është ndërtuar mbi tre burime: (1) ilustrime të të dhënave SVG, konkretisht një hartë botërore me pika gjysmëtonëshe, e renderuar me një gradient nga indigo në portokalli në bruz, duke krijuar një atmosferë të shkallës globale pas elementit kryesor; (2) paraqitjet e kartave të produkteve—widget-e lundrues që shfaqin balancat e llogarive, detajet e transferimit dhe fragmente të kodit JSON në karta të bardha me hije dramatike; (3) vizualizime grafikësh—shandanë ose grafikë me vija të holla lidhëse të përdorura në seksionin e besimit/statistikave. Harta gjysmëtonëshe është një element vizual dallues—gradienti i saj kalon nga #d65620 (portokalli) në vjollcë, blu, azure, bruz dhe të verdhë, duke krijuar një spektër që bashkon të gjithë paletën e markës në një sipërfaqe të vetme dekorative. Ikonat kanë një trashësi uniforme të skicës prej 1.5–2px në variantet #232730 ose #a9acb6, me një mbushje për gjendjet aktive. Asnjë foto stili jetese, asnjë renderim abstrakt 3D - kufizimi është i qëllimshëm për të përqendruar vëmendjen te produkti dhe të dhënat.
Paletë
Markë
- Indigo Navy
#111a4a— Ngjyra kryesore e markës përdoret për thirrjet për veprim të mbushura, gjendjet e navigimit aktiv, kokën dhe logon. Ngjyra vjollcë-blu e thellë i jep faqes një nuancë të zezë të fortë, por të pasur; e shoqëruar me tekst të bardhë, krijon butonin më bindës në faqe. - Seafoam 600
#44b48b— Ngjyra e kodit dhe e të dhënave është ngjyra e markës për çelësat JSON, identifikuesit dhe vlerat financiare në fragmentet e kodit. Përdoret gjithashtu për pikat e të dhënave në grafikë dhe vizualizime të rritjes. - Seafoam 700
#167e6c— Një nuancë më e errët e shkumës së detit për skicën, vijat e grafikut dhe thekset e ikonave brenda kontekstit të të dhënave. Kjo e ankoron shkallën e shkumës së detit në sfondin më të errët. - Seafoam 400
#94efb7— Fragmenti i kodit të theksuar përmban vlera vargjesh, URL dhe pika fundore të API-t brenda blloqeve të kodit. Ngjyra më e çelët e shkumës së detit lexohet si një font monospace me një nuancë të gjelbër. - Deep Sea
#023247— Kontura dekorative dhe ngjyra e theksit të grafikut është një ngjyrë e pasur turkeze e përdorur në ilustrimet SVG dhe vizualizimet e të dhënave, së bashku me shkallën e ngjyrave të shkumës së detit.
Neutral
- Midnight Ink
#011821— Sipërfaqe e errët dhe tekst i theksuar – sfondi i kartës së produktit, tekst kryesor me kontrast të lartë. Më afër grisë me një nuancë të ftohtë blu-jeshile; përdoret si bazë për modalitetin e errët kur një seksion duhet të përmbyset. - Slate Ink
#3b3e47— Titulli dytësor dhe teksti kryesor janë pak më të ngrohtë se boja e mesnatës, e përdorur aty ku e zeza e pastër do të dukej shumë e ashpër në kanavacën e dritës. - Steel
#7c7f88— Teksti kryesor dhe teksti i lidhjes dominohen nga një ngjyrë e zbehtë (e përdorur 245 herë në tekstin kryesor). Një ngjyrë neutrale gri-blu që perceptohet si e qetë, kurrë një imazh i zbehtë. - Fog
#a9acb6— Konturet e ikonave, kufijtë terciarë dhe teksti i vendmbajtësit. Një ngjyrë gri mesatare që e ndan tekstin pa konkurruar me të. - Mist
#cbcccf— Teksti kryesor - firmat, mohimet e përgjegjësisë dhe shkronjat e vogla - është i lexueshëm në një sfond të bardhë, por vizualisht më pak i dukshëm. - Silver Lining
#e3e4e8— Kufijtë e kartave, kufijtë e fushave të hyrjes, vijat ndarëse. Kjo ngjyrë strukturore dhe delikate përdoret aty ku dy sipërfaqe duhet të ndahen pa hije.
Tipografi
nga 10 në 60px · 10 hapa
- SuisseIntl — zëvendësim: Inter · skica 300, 400, 500, 600 · Fonti kryesor – përdoret për të gjitha titujt, tekstin e trupit, butonat, navigimin, lidhjet dhe tekstin e kartës. Shkronja unike gjeometrike sans serif i jep Column një stil editorial dallues, duke e dalluar atë nga kompanitë e tjera fintech që punojnë ekskluzivisht me Inter-only. Pesha është 600 në 52–60px për titujt, 500 për nëntitujt, 400 për tekstin e trupit dhe 300 për lidhjet me theks të ulët.
- SuisseIntlMono — zëvendësim: JetBrains Mono · skica 400 · Një font me hapësirë të njëjtë, i ngjashëm me SuisseIntl, që përdoret për etiketat teknike, identifikuesit e API-t dhe të dhënat e integruara në elementët e UI-t. Ai ruan të njëjtat përmasa si SuisseIntl, kështu që teksti me hapësirë të njëjtë dhe ai proporcional rreshtohen saktë në kontekste të përziera.
- SFMono — zëvendësim: Fira Code · skica 400 · Shfaqja e fragmenteve të kodit – shfaqet në shembuj JSON dhe blloqe dokumentacioni API. Një hije me shkumë deti përdoret për të dalluar vizualisht kodin nga teksti i ndërfaqes së përdoruesit.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | mesatare |
| Hapi bazë | 8px |
| Rrezja e butonit | 8px |
| Rrezja e kartës | 8px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 72px |
| Gjerësia e faqes | 1200px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Column dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- dope.security — Terminal mesnate me fenerë vjollcë
- Leonardo — Një galeri editoriale e përmbysur. Një muze me mure të zeza ku titujt ngjyrë vjollcë veprojnë si instalime murale, dhe portrete të gjeneruara nga inteligjenca artificiale varen në një rrjetë të dendur poshtë.
- VEED — Mur i bardhë galerie me butona me dritë neoni jeshile
- Craft Docs — Një kolazh dixhital për albume fotografish. Dizajni i ngjan një albumi fotografish të menduar mirë dhe të prekshëm, ku shënimet dixhitale të strukturuara kombinohen me tekstura të buta dhe organike.
- Letter — Një galeri private që paraqet objekte të shndritshme nga depoja. Një hapësirë ekspozite me mure të zeza ku titujt kryesorë të faqeve të serifizuara qëndrojnë mbi skulpturat e kromit në muret e errëta të galerisë.
- Railway — Ekspresi Kozmik i Mesnatës. Një udhëtim i qetë dhe emocionues nëpër hapësirën e errët, të ndriçuar nga yje, i udhëhequr nga sinjale të qarta.
- Garden Eight — Një editorial monumental në letër ngjyrë krem. Titulli me përmasa serif prej 215px qëndron vetëm në pergamenë të ngrohtë, i rrethuar nga forma skulpturale lundruese dhe hapësirë negative që të kujton ajrin e detit - faqja ndihet më shumë si kopertina e një monografie arti sesa si një panel kontrolli.
- Steep — Analiza e shkronjave Serif në letër të ngrohtë
- ElevenLabs — Një ese me foto në tone të ngrohta krem me tituj delikatë. Një fletore në stilin Bauhaus - letër me ngjyrë lëvozhge veze, bojë e zezë dhe një theks i vetëm vjollcë dhe portokalli për shfaqjen e produktit.
- Awesomic — Rrjetë zinku editoriale me shenja pikësimi portokalli që të kujtojnë konfeti
- Monad — revistë teknike editoriale mbi pergamenë të ngrohtë
- AI for Business — Sallë ekspozite editoriale brutaliste në tone të ngrohta gri