Column
liburuxka urdin ilun bat egunsenti freskoaren azpian
Columnek urdin ilun eta instituzional bat erabiltzen du ia zuriko atzealde batean: orrialdeak banku-produktu sendo baten gainazala dirudi lehenik, eta garatzaileen jolasleku bat bigarrenik. Markaren kolorea ez da bakarra, bikote koordinatua baizik —itsas urdin #111a4a egitura serioarentzat, berde menta #44b48b datu eta kodearentzat—, laranja epel bakarrarekin (#ec652b) Brex txartela bezalako intentsitate handiko azentu-gainazaletarako gordeta. Tipografian SuisseIntl da nagusi, 300etik (estekak) 600era (pantaila) bitarteko pisu-tarte osoan erabiltzen den sans serif geometriko bat, sistemari findutako estilo editoriala emanez, fintech enpresa gehienek falta dutena. Txartelak gainazal zuri handietan flotatzen dute, itzal sotil eta geruzatuekin; interfazearen elementu gehienak lauak dira, sakontasuna txartela objektu fisiko bat bezala sentitu beharko litzatekeen lekuan bakarrik agertzen delarik (transakzio-widgetak, produktuen maketak). Kodea eta finantza-datuak monokromoan aurkezten dira, itsas apar kolorekoak —seinale bisual bat hau ingeniariek ingeniarientzat eraikitako banku bat dela adierazten duena—.
Orriaren egitura zabalera osokoa da, erdian kokatuta alboko marjina zabalekin (mahaigaineko ordenagailuan 64–15 cm). Pantaila nagusiak diseinu zatitua du: izenburua eta ekintzarako deiak ezkerrean lerrokatuta daude 25 cm-tan, eta transakzio-widget flotatzaile bat eskuinean dago 55 cm-tan, erdi-tonuko mapa baten atzeko planoaren aurrean. Pantaila nagusiaren azpian, atalak mihise zuriaren (4 cm) eta argiaren (5 cm) artean txandakatzen dira, 6 cm-ko marjina bertikalekin. Edukia 6 zutabeko sareta bakar baten arabera antolatzen da: testu-blokeek 4 zutabe hartzen dituzte (7 cm), irudi/produktu-txartelek 5-6 zutabe, saretatik nahita aldenduta. Ezaugarriak deskribatzen dituzten atalek 2 zutabeko diseinua erabiltzen dute: testua ezkerrean, produktua eskuinean. Konfiantza-estatistiken atala 4 zutabeko sareta batean banatuta dago orriaren zabalera osoan zehar. Bezeroen logotipoak erdian dauden errenkada bakarrean daude, 48px-ko marjinekin. Oin-oharrak bi zutabeko diseinu trinkoa du. Nabigazioa pantaila nagusiaren gainean dagoen goiko barra finko eta garden bat da, 62 pixeleko altuera duena, atzeko plano lauso batekin, eta zuri bihurtzen dena mugitzen zaren heinean. Ez dago alboko barrarik edo mega-menurik; goitibeherako menuak gezi itxurako menu sinpleak dira.
Estilo bisuala minimalista eta funtzionala da — Column-ek erabat saihesten ditu stock argazkiak. Hizkuntza bisuala hiru iturritan oinarritzen da: (1) SVG datuen ilustrazioak, zehazki erdi-tonuko munduko mapa puntudun bat, indigotik laranjara eta turkesara bitarteko gradiente batekin errendatua, elementu nagusiaren atzean eskala globaleko giroa sortuz; (2) produktuen txartelen diseinuak — kontuen saldoak, transferentzia xehetasunak eta JSON kode zatiak itzal dramatikoekin txartel zurietan erakusten dituzten widget flotatzaileak; (3) grafikoen bistaratzeak — konfiantza/estatistika atalean erabiltzen diren konexio-lerro meheak dituzten turkesa kandela edo barra grafikoak. Erdi-tonuko mapa elementu bisual bereizgarria da — bere gradientea #d65620tik (laranja) bioleta, urdina, urdina, turkesa eta horira igarotzen da, marka-paleta osoa gainazal apaingarri bakarrean batzen duen espektro bat sortuz. Ikonoek 1,5-2px-ko lodiera uniformea dute #232730 edo #a9acb6 aldaeretan, egoera aktiboetarako betegarri batekin. Ez bizimodu argazkirik, ez 3D render abstrakturik — neurritasuna nahita egin da arreta produktuan eta datuetan zentratzeko.
Paleta
Marka
- Indigo Navy
#111a4a— Markaren kolore nagusia ekintzarako dei beteetarako, nabigazio egoera aktiboetarako, goibururako eta logotiporako erabiltzen da. Urdin-bioleta kolore sakonak guneari tonu beltz sendo baina aberatsa ematen dio; testu zuriarekin batera, guneko botoirik sendoena sortzen du. - Seafoam 600
#44b48b— Kode eta datuen kolorea JSON gakoen, identifikatzaileen eta kode zatietako finantza-balioen marka-kolorea da. Grafikoetako eta hazkunde-bistaratzeetako datu-puntuetarako ere erabiltzen da. - Seafoam 700
#167e6c— Itsas apar kolore ilunagoa eskemarentzat, grafikoaren lerroentzat eta datuen testuinguruko ikonoen azentuentzat. Horrek itsas apar eskala atzeko plano ilunagoaren kontra finkatzen du. - Seafoam 400
#94efb7— Nabarmendutako kode zatiak kate-balioak, URLak eta API amaiera-puntuak ditu kode-blokeetan. Itsas apar kolore argiena letra-tipo monolerro gisa irakurtzen da, tonu berdexka batekin. - Deep Sea
#023247— Grafikoaren apaingarri-eskema eta azentu-kolorea SVG ilustrazioetan eta datu-bistaratzeetan erabiltzen den turkesa kolore aberatsa da, itsas aparraren kolore-eskalarekin batera.
Neutroa
- Midnight Ink
#011821— Gainazal iluna eta nabarmendutako testua – produktuaren txartelaren atzeko planoa, kontraste handiko testu nagusia. Grisaren antzekoagoa, tonu urdin-berde hotz batekin; atal bat alderantzikatu behar denean modu ilunaren oinarri gisa erabiltzen da. - Slate Ink
#3b3e47— Bigarren mailako izenburua eta testu nagusia Midnight Ink baino beroagoak dira, mihise argian beltz hutsa gogorregia irudituko litzatekeen lekuetan erabiliak. - Steel
#7c7f88— Testu nagusia eta esteka-testua kolore apal batez nagusitzen dira (testu nagusian 245 aldiz erabilia). Gris-urdin kolore neutroa, lasaitasun gisa hautematen dena, inoiz ez irudi zurbil gisa. - Fog
#a9acb6— Ikonoen eskemak, hirugarren mailako ertzak eta leku-markatzaileen testua. Gris ertaineko kolorea, testua bereizten duena, harekin lehiatu gabe. - Mist
#cbcccf— Testu nagusia —sinadurak, oharrak eta letra txikia— irakurgarria da atzealde zurian, baina bisualki gutxiago nabaritzen da. - Silver Lining
#e3e4e8— Txartelen ertzak, sarrera-eremuen ertzak, banaketa-lerroak. Kolore egiturazko eta sotil hau bi gainazal itzalik gabe bereizi behar direnean erabiltzen da.
Tipografia
10etik 60px-ra · 10 urrats
- SuisseIntl — ordezkapena: Inter · eskemak 300, 400, 500, 600 · Letra-tipo nagusia – goiburu, testu-gorputz, botoi, nabigazio, esteka eta txartel-testu guztietarako erabiltzen da. Sans serif geometriko bereziak estilo editorial bereizgarria ematen dio Column-i, Inter-only-rekin soilik lan egiten duten beste finantza-teknologiako enpresetatik bereiziz. Pisua 600 da, 52–60px-tan goiburuetarako, 500 azpitituluetarako, 400 testu-gorputzetarako eta 300 enfasi txikiko esteketarako.
- SuisseIntlMono — ordezkapena: JetBrains Mono · eskemak 400 · SuisseIntl-en antzeko letra-tipo monoespaziala, etiketa teknikoetarako, API identifikatzaileetarako eta UI elementuetan txertatutako datuetarako erabiltzen dena. SuisseIntl-en proportzio berdinak mantentzen ditu, beraz, testu monoespazialak eta proportzionalak testuinguru mistoetan behar bezala lerrokatzen dira.
- SFMono — ordezkapena: Fira Code · eskemak 400 · Kode zatien bistaratzea – JSON adibideetan eta API dokumentazio blokeetan bistaratzen da. Itsas apar itzala erabiltzen da kodea UI testutik bisualki bereizteko.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 8px |
| Botoiaren erradioa | 8px |
| Txartelaren erradioa | 8px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 72px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Column estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- dope.security — Gauerdiko terminala baliza moreekin
- Leonardo — Alderantzizko editorial galeria bat. Horma beltzak dituen museo bat, non titular moreak horma-instalazio gisa jarduten duten, eta IA bidez sortutako erretratuak beheko sareta trinko batean zintzilik dauden.
- VEED — Galeria-horma zuria neon berde argiko botoiekin
- Craft Docs — Scrapbooking-erako collage digitala. Diseinuak scrapbook pentsakor eta ukigarri baten antza du, non ohar digital egituratuak ehundura leun eta organikoekin konbinatzen diren.
- Letter — Biltegiko artefaktu distiratsuak dituen galeria pribatu bat. Horma beltzak dituen erakusketa-espazio bat, non galeriaren horma tindatuetako kromo-eskulturen gainean serifezko izenburuak flotatzen diren.
- Railway — Gauerdi Kosmikoaren Expressa. Seinale argiek gidatutako bidaia lasai eta zirraragarria espazio ilun eta izartsu batean zehar.
- Garden Eight — Krema koloreko paperean egindako editorial monumentala. 215 pixeleko serifazko izenburua pergamino epelaren gainean bakarrik dago, itsasoko airea gogorarazten duten eskultura-forma flotatzailez eta espazio negatiboz inguratuta; orrialdeak arte-monografia baten azalaren antza handiagoa du aginte-panel batena baino.
- Steep — Serif letra-tipoen azterketa paper epelean
- ElevenLabs — Krema koloreko tonu beroetako argazki-saiakera, izenburu sotilekin. Bauhaus estiloko koadernoa: arrautza-oskolaren koloreko papera, tinta beltza eta produktua erakusteko more eta laranja koloreko azentu bakarra.
- Awesomic — Konfetiaren antzeko puntuazio-markak laranja koloreko zink sare editoriala
- Monad — pergamino beroan argitaratutako aldizkari tekniko editoriala
- AI for Business — Brutalista erredakzio-erakusleihoa gris tonu beroetan