Column
tmavomodrá účtovná kniha pod chladným úsvitom
Stĺpec používa sýtu, inštitucionálnu námornícku modrú na takmer bielom pozadí: stránka pôsobí najprv ako robustný povrch bankového produktu a až potom ako ihrisko pre vývojárov. Farba značky nie je jedna, ale koordinovaný pár – námornícka modrá #111a4a pre serióznu štruktúru, mätovo zelená #44b48b pre dáta a kód – s jednou teplou oranžovou (#ec652b) vyhradenou pre vysoko intenzívne akcentové povrchy, ako je karta Brex. Typografii dominuje SuisseIntl, geometrické bezpätkové písmo používané v celom rozsahu hmotnosti od 300 (odkazy) do 600 (zobrazenie), čo systému dodáva rafinovaný redakčný štýl, ktorý väčšine fintech spoločností chýba. Karty sa vznášajú na veľkých bielych plochách s jemnými, vrstvenými tieňmi; väčšina prvkov rozhrania je plochá, pričom hĺbka sa objavuje iba tam, kde by karta mala pôsobiť ako fyzický objekt (transakčné widgety, makety produktov). Kód a finančné údaje sú prezentované monochromaticky, vo farbe morskej peny – vizuálny signál, že ide o banku vytvorenú inžiniermi pre inžinierov.
Štruktúra stránky je na celú šírku, vycentrovaná so širokými bočnými okrajmi (64 – 15 cm na počítači). Hlavná obrazovka má rozdelené rozloženie: nadpis a výzvy na akciu sú zarovnané vľavo na 25 cm, zatiaľ čo plávajúci widget transakcií je umiestnený vpravo na 55 cm na pozadí poltónovej mapy. Pod hlavnou obrazovkou sa striedajú sekcie medzi bielou (4 cm) a svetlým plátnom (5 cm) so 6 cm zvislými medzerami. Obsah je usporiadaný podľa jednej 6-stĺpcovej mriežky: textové bloky zaberajú 4 stĺpce (7 cm), obrázkové/produktové karty zaberajú 5 – 6 stĺpcov s úmyselným odsadením od mriežky. Sekcie popisujúce funkcie používajú 2-stĺpcové rozloženie: text vľavo, produkt vpravo. Sekcia so štatistikami dôveryhodnosti je rozdelená do 4-stĺpcovej mriežky po celej šírke stránky. Logá zákazníkov sú umiestnené v jednom stredovom riadku s medzerami 48px. Päta má kompaktné dvojstĺpcové rozloženie. Navigácia je fixný, 62 pixelov vysoký, priehľadný horný panel nad hlavnou obrazovkou s rozmazaným pozadím, ktoré sa pri posúvaní zmení na biele. Neexistuje žiadny bočný panel ani mega menu – rozbaľovacie ponuky sú jednoduché menu v štýle šípok.
Vizuálny štýl je minimalistický a funkčný – Column sa úplne vyhýba stock fotografiám. Vizuálny jazyk je postavený na troch zdrojoch: (1) ilustrácie dát SVG, konkrétne bodkovaná poltónová mapa sveta, vykreslená s prechodom od indigovej cez oranžovú až po tyrkysovú, ktorá vytvára atmosféru globálneho rozsahu za hlavným prvkom; (2) rozloženia kariet produktov – plávajúce widgety zobrazujúce zostatky na účtoch, podrobnosti o prevodoch a úryvky kódu JSON v bielych kartách s dramatickými tieňmi; (3) vizualizácie grafov – tyrkysové sviečkové alebo stĺpcové grafy s tenkými spojovacími čiarami použité v sekcii dôvery/štatistiky. Poltónová mapa je charakteristickým vizuálnym prvkom – jej prechod z #d65620 (oranžová) prechádza cez fialovú, modrú, azúrovú, tyrkysovú a žltú, čím vytvára spektrum, ktoré spája celú paletu značky na jednej dekoratívnej ploche. Ikony majú jednotnú hrúbku obrysu 1,5 – 2 px vo variantoch #232730 alebo #a9acb6 s výplňou pre aktívne stavy. Žiadne fotografie životného štýlu, žiadne abstraktné 3D rendery – toto obmedzenie je zámerné, aby sa pozornosť sústredila na produkt a dáta.
Paleta
Značka
- Indigo Navy
#111a4a— Primárna farba značky sa používa pre vyplnené výzvy na akciu, aktívne navigačné stavy, hlavičku a logo. Tmavo fialovomodrá farba dodáva stránke sýty, no zároveň sýty čierny odtieň; v kombinácii s bielym textom vytvára najvýraznejšie tlačidlo na stránke. - Seafoam 600
#44b48b— Farba kódu a údajov je farbou značky pre kľúče JSON, identifikátory a finančné hodnoty v úryvkoch kódu. Používa sa aj pre dátové body v grafoch a vizualizáciách rastu. - Seafoam 700
#167e6c— Tmavší odtieň morskej peny pre obrys, čiary grafu a zvýraznenie ikon v kontexte údajov. Toto ukotvilo mierku morskej peny na tmavšom pozadí. - Seafoam 400
#94efb7— Zvýraznený fragment kódu obsahuje reťazcové hodnoty, URL adresy a koncové body API v rámci blokov kódu. Najsvetlejšia farba morskej peny sa číta ako písmo s pevnou šírkou a zelenkastým odtieňom. - Deep Sea
#023247— Dekoratívny obrys a akcentová farba grafu je sýta tyrkysová farba používaná v ilustráciách SVG a vizualizáciách údajov, spolu s farebnou škálou morskej peny.
Neutrálny
- Midnight Ink
#011821— Tmavý povrch a zvýraznený text – pozadie karty produktu, hlavný text s vysokým kontrastom. Bližšie k sivej s chladným modrozeleným odtieňom; používa sa ako základ pre tmavý režim, keď je potrebné invertovať časť. - Slate Ink
#3b3e47— Vedľajší názov a hlavný text sú o niečo teplejšie ako Polnočný atrament, použitý tam, kde by čistá čierna na svetlom plátne pôsobila príliš drsne. - Steel
#7c7f88— Hlavnému textu a textu odkazu dominuje tlmená farba (použitá v hlavnom texte 245-krát). Neutrálna sivomodrá farba, ktorá je vnímaná ako pokojná, nikdy nie ako vyblednutý obrázok. - Fog
#a9acb6— Obrysy ikon, terciárne orámovanie a zástupný text. Stredne sivá farba, ktorá oddeľuje text bez toho, aby s ním konkurovala. - Mist
#cbcccf— Hlavný text – podpisy, vyhlásenia o odmietnutí zodpovednosti a malé písmo – je čitateľný na bielom pozadí, ale vizuálne menej viditeľný. - Silver Lining
#e3e4e8— Okraje kariet, okraje vstupných polí, deliace čiary. Táto štrukturálna, jemná farba sa používa tam, kde je potrebné oddeliť dva povrchy bez tieňov.
Typografia
od 10 do 60px · 10 krokov
- SuisseIntl — náhrada: Inter · obrysy 300, 400, 500, 600 · Primárne písmo – používa sa pre všetky nadpisy, text tela, tlačidlá, navigáciu, odkazy a text kariet. Jedinečný geometrický bezpätkový font dodáva Columnu charakteristický redakčný štýl, ktorý ho odlišuje od ostatných fintech spoločností pracujúcich výhradne s Inter-only. Váha je 600 pri 52 – 60 px pre nadpisy, 500 pre podnadpisy, 400 pre text tela a 300 pre odkazy s nízkym dôrazom.
- SuisseIntlMono — náhrada: JetBrains Mono · obrysy 400 · Nerozmiestnené písmo podobné písmu SuisseIntl, používané pre technické označenia, identifikátory API a vložené údaje v prvkoch používateľského rozhrania. Zachováva rovnaké proporcie ako SuisseIntl, takže text s nerozmiestneným písmom a proporcionálny text sa správne zarovnávajú v zmiešaných kontextoch.
- SFMono — náhrada: Fira Code · obrysy 400 · Zobrazenie úryvkov kódu – zobrazuje sa v príkladoch JSON a blokoch dokumentácie API. Na vizuálne odlíšenie kódu od textu používateľského rozhrania sa používa odtieň morskej peny.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 8px |
| Polomer tlačidla | 8px |
| Polomer karty | 8px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 72px |
| Šírka stránky | 1200px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Column a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- dope.security — Polnočný terminál s fialovými majákmi
- Leonardo — Invertovaná redakčná galéria. Múzeum s čiernymi stenami, kde fialové titulky fungujú ako nástenné inštalácie a portréty generované umelou inteligenciou visia v hustej mriežke pod nimi.
- VEED — Biela galéria stena s neónovo zelenými svetelnými gombíkmi
- Craft Docs — Digitálna koláž pre scrapbooking. Dizajn pripomína premyslený, hmatateľný scrapbook, kde sa štruktúrované digitálne poznámky spájajú s jemnými, organickými textúrami.
- Letter — Súkromná galéria s trblietavými artefaktmi zo skladu. Výstavný priestor s čiernymi stenami, kde sa pätkové titulky vznášajú nad chrómovými sochami na tónovaných stenách galérie.
- Railway — Kozmický polnočný expres. Pokojná a vzrušujúca cesta tmavým, hviezdami osvetleným vesmírom, vedená jasnými signálmi.
- Garden Eight — Monumentálny editoriál na krémovom papieri. Titulok s pätkovým písmom veľkosti 215px leží osamotene na teplom pergamene, obklopený vznášajúcimi sa sochárskymi formami a negatívnym priestorom pripomínajúcim morský vzduch – stránka pôsobí skôr ako obálka umeleckej monografie než ako palubná doska.
- Steep — Analýza pätkových fontov na teplom papieri
- ElevenLabs — Fotoesej v teplých krémových tónoch s jemnými nadpismi. Zápisník v štýle Bauhaus – papier farby vaječnej škrupiny, čierny atrament a jeden fialovo-oranžový akcent na vystavenie produktov.
- Awesomic — Redakčná zinková sieťovina s oranžovými interpunkčnými znamienkami pripomínajúcimi konfety
- Monad — redakčný technický časopis na teplom pergamene
- AI for Business — Brutalistická redakčná showroom v teplých sivých tónoch