Column
egy sötétkék főkönyv a hűvös hajnal alatt
A Column mély, intézményi sötétkék színt használ közel fehér háttér előtt: az oldal elsősorban egy robusztus banki termékfelületnek, másodsorban pedig egy fejlesztői játszótérnek érződik. A márkaszín nem egyetlen, hanem egy összehangolt párosítás – sötétkék #111a4a a komoly struktúrához, mentazöld #44b48b az adatokhoz és a kódhoz –, egyetlen meleg narancssárga színnel (#ec652b), amely a Brex kártyához hasonló nagy intenzitású hangsúlyfelületeknek van fenntartva. A tipográfiát a SuisseIntl uralja, egy geometrikus sans serif, amelyet a 300-tól (linkek) 600-ig (megjelenítés) terjedő teljes súlytartományban használnak, kifinomult, szerkesztői stílust kölcsönözve a rendszernek, amely a legtöbb fintech vállalattól hiányzik. A kártyák nagy fehér felületeken lebegnek, finom, réteges árnyékokkal; a legtöbb interfészelem lapos, a mélység csak ott jelenik meg, ahol a kártyának fizikai tárgynak kellene tűnnie (tranzakciós widgetek, termékmockupok). A kód és a pénzügyi adatok monokróm, tengerhab színűek – vizuális jelzésként arra, hogy ez egy mérnökök által mérnököknek épített bank.
Az oldal szerkezete teljes szélességű, középre igazított, széles oldalsó margókkal (64–15 cm asztali gépen). A főképernyő osztott elrendezésű: a címsor és a cselekvésre ösztönzések balra igazítottak 25 cm-es magasságban, míg egy lebegő tranzakciós widget jobb oldalon, 55 cm-es magasságban helyezkedik el egy félárnyalatos térképes háttér előtt. A főképernyő alatt a fehér (4 cm) és a világos vászon (5 cm) színek váltakoznak, 6 cm-es függőleges kötőjelekkel. A tartalom egyetlen 6 oszlopos rács szerint van elrendezve: a szövegblokkok 4 oszlopot (7 cm), a kép-/termékkártyák 5–6 oszlopot foglalnak el, a rácstól szándékosan eltolva. A funkciókat leíró szakaszok 2 oszlopos elrendezést használnak: szöveg balra, termék jobbra. A bizalmi statisztikák szakasza egy 4 oszlopos rácsra van osztva az oldal teljes szélességében. Az ügyféllogók egyetlen középre igazított sorban helyezkednek el, 48 képpontos kötőjelekkel. A lábléc kompakt, két oszlopos elrendezésű. A navigáció egy fix, 62 képpont magas, átlátszó felső sáv a főképernyő felett, elmosódott háttérrel, amely görgetés közben fehérré válik. Nincs oldalsáv vagy megamenü – a legördülő menük egyszerű, nyílszerű menük.
A vizuális stílus minimalista és funkcionális – a Column teljesen kerüli a stock fotókat. A vizuális nyelv három forrásra épül: (1) SVG adatillusztrációk, konkrétan egy pontozott félárnyékos világtérkép, indigótól narancson át türkizkékig terjedő színátmenettel renderelve, globális léptékű hangulatot teremtve a fő elem mögött; (2) termékkártya-elrendezések – lebegő widgetek, amelyek drámai árnyékokkal ellátott fehér kártyákon jelenítik meg a számlaegyenlegeket, az átutalási adatokat és a JSON kódrészleteket; (3) diagramvizualizációk – türkiz gyertya- vagy oszlopdiagramok vékony összekötő vonalakkal, amelyeket a bizalom/statisztika részben használnak. A félárnyékos térkép egy jellegzetes vizuális elem – színátmenete a #d65620 (narancssárga) színtől az ibolya, kék, azúr, türkiz és sárga színeken átível, egy olyan spektrumot hozva létre, amely a teljes márkapalettát egyetlen dekoratív felületen egyesíti. Az ikonok egyenletes körvonalvastagsága 1,5–2 képpont a #232730 vagy #a9acb6 változatokban, az aktív állapotokat kitöltéssel jelzi. Nincsenek életstílusfotók, nincsenek absztrakt 3D-s látványtervek – a visszafogottság szándékos, hogy a figyelmet a termékre és az adatokra irányítsa.
Paletta
Márka
- Indigo Navy
#111a4a— Az elsődleges márkaszínt a kitöltött cselekvésre ösztönzésekhez, az aktív navigációs állapotokhoz, a fejléchez és a logóhoz használják. A mélylila-kék szín tömör, mégis gazdag fekete árnyalatot kölcsönöz az oldalnak; fehér szöveggel párosítva a weboldal legasszertívabb gombját hozza létre. - Seafoam 600
#44b48b— A kód- és adatszín a JSON-kulcsok, azonosítók és pénzügyi értékek márkaszíne a kódrészletekben. Diagramokban és növekedési vizualizációkban található adatpontokhoz is használják. - Seafoam 700
#167e6c— Sötétebb tengerhab árnyalat a körvonalhoz, a diagramvonalakhoz és az ikonok kiemeléséhez az adatkontextusban. Ez a tengerhab skálát a sötétebb háttérhez rögzíti. - Seafoam 400
#94efb7— A kiemelt kódrészlet karakterlánc-értékeket, URL-eket és API-végpontokat tartalmaz a kódblokkokon belül. A legvilágosabb tengerszín zöldes árnyalatú, egyenletes szélességű betűtípusként olvasható. - Deep Sea
#023247— A diagram dekoratív körvonala és hangsúlyszíne egy gazdag türkiz szín, amelyet az SVG-illusztrációkban és adatvizualizációkban használnak, a tengerhab színskálával együtt.
Semleges
- Midnight Ink
#011821— Sötét felület és kiemelt szöveg – termékkártya háttere, nagy kontrasztú főszöveg. Szürkéhez közelebb, hideg kékeszöld árnyalattal; sötét mód alapjaként használják, ha egy szakaszt invertálni kell. - Slate Ink
#3b3e47— A másodlagos cím és a fő szöveg egy kicsit melegebb hangzású, mint a Midnight Ink, amelyet ott használnak, ahol a tiszta fekete túl durván hatna a világos vásznon. - Steel
#7c7f88— A fő szöveget és a linkszöveget egy visszafogott szín uralja (245 alkalommal fordul elő a fő szövegben). Egy semleges szürkéskék szín, amelyet nyugodtnak érzékelünk, soha nem fakó kép. - Fog
#a9acb6— Ikon körvonalai, harmadlagos szegélyek és helyőrző szöveg. Egy középszürke szín, amely elválasztja a szöveget anélkül, hogy versenyezne vele. - Mist
#cbcccf— A fő szöveg – aláírások, felelősségkizárások és apró betűs rész – fehér háttéren olvasható, de vizuálisan kevésbé feltűnő. - Silver Lining
#e3e4e8— Kártyaszegélyek, beviteli mező szegélyei, elválasztó vonalak. Ezt a strukturális, finom színt ott használják, ahol két felületet árnyék nélkül kell elválasztani.
Tipográfia
10-től 60 képpontig · 10 lépésben
- SuisseIntl — csere: Inter · körvonalak 300, 400, 500, 600 · Elsődleges betűtípus – minden címsorhoz, szövegtörzshöz, gombokhoz, navigációhoz, linkekhez és kártyaszöveghez használatos. Az egyedi geometrikus sans serif betűtípus jellegzetes szerkesztői stílust kölcsönöz a Columnnak, megkülönböztetve a kizárólag az Inter-only-val együttműködő többi fintech vállalattól. A betűvastagság 600, 52–60 képpont a címsoroknál, 500 az alcímeknél, 400 a szövegtörzsnél és 300 az alacsony hangsúlyú linkeknél.
- SuisseIntlMono — csere: JetBrains Mono · körvonalak 400 · Egy a SuisseIntl-hez hasonló, fix szélességű betűtípus, amelyet technikai címkékhez, API-azonosítókhoz és felhasználói felület elemeibe beágyazott adatokhoz használnak. Ugyanazokat az arányokat tartja fenn, mint a SuisseIntl, így a fix szélességű és az arányos szöveg helyesen igazodik vegyes környezetekben.
- SFMono — csere: Fira Code · körvonalak 400 · Kódrészlet megjelenítése – JSON példákban és API dokumentációs blokkokban jelenik meg. A tengerkék árnyalat vizuálisan megkülönbözteti a kódot a felhasználói felület szövegétől.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 8px |
| Gomb sugara | 8px |
| Kártya sugara | 8px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 72px |
| Oldal szélessége | 1200px |
A mesterséges intelligencia Column stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- dope.security — Éjféli terminál lila jelzőfényekkel
- Leonardo — Egy fordított szerkesztőségi galéria. Egy fekete falú múzeum, ahol lila főcímek falinstallációkként funkcionálnak, alattuk pedig mesterséges intelligencia által generált portrék lógnak sűrű rácsban.
- VEED — Fehér galériafal neonzöld fénygombokkal
- Craft Docs — Digitális kollázs scrapbookinghoz. A dizájn egy átgondolt, tapintható scrapbookra hasonlít, ahol a strukturált digitális jegyzetek lágy, organikus textúrákkal kombinálódnak.
- Letter — Magángaléria, ahol raktárakból származó csillogó műtárgyakat mutatnak be. Fekete falú kiállítótér, ahol a galéria színezett falain krómszobrok felett szerpentinezett címsorok lebegnek.
- Railway — A Kozmikus Éjféli Expressz. Egy nyugodt, izgalmas utazás a sötét, csillagos űrben, tiszta jelzések vezetésével.
- Garden Eight — Monumentális vezércikk krémszínű papíron. A 215 képpontos talpas címsor egyedül áll a meleg pergamenen, lebegő szoborszerű formák és a tengeri levegőre emlékeztető negatív tér veszi körül – az oldal inkább egy művészeti monográfia borítójára, mint egy műszerfalra emlékeztet.
- Steep — Serif betűtípusok elemzése meleg papíron
- ElevenLabs — Meleg krémszínű fotóesszé visszafogott címekkel. Bauhaus stílusú jegyzetfüzet – tojáshéjszínű papír, fekete tinta és egyetlen lila és narancssárga díszítőelem a termékek bemutatásához.
- Awesomic — Szerkesztői cinkháló narancssárga írásjelekkel, konfettire emlékeztetve
- Monad — szerkesztőségi műszaki folyóirat meleg pergamenen
- AI for Business — Brutalista szerkesztői bemutatóterem meleg szürke árnyalatokban