Column
tmavě modrá účetní kniha pod chladným úsvitem
Sloupec používá sytou, institucionální tmavě modrou barvu na téměř bílém pozadí: stránka působí v první řadě jako robustní povrch bankovního produktu a v druhé řadě jako hřiště pro vývojáře. Barva značky není jednotná, ale jako koordinovaný pár – tmavě modrá #111a4a pro seriózní strukturu, mátově zelená #44b48b pro data a kód – s jednou teplou oranžovou (#ec652b) vyhrazenou pro intenzivní akcentní povrchy, jako je karta Brex. Typografii dominuje SuisseIntl, geometrické bezpatkové písmo používané v celém rozsahu gramáže od 300 (odkazy) do 600 (zobrazení), což systému dodává vytříbený redakční styl, který většině fintech společností chybí. Karty se vznášejí na velkých bílých plochách s jemnými, vrstvenými stíny; většina prvků rozhraní je plochá, hloubka se objevuje pouze tam, kde by karta měla působit jako fyzický objekt (transakční widgety, makety produktů). Kód a finanční data jsou prezentována černobíle, v barvě mořské pěny – vizuální signál, že se jedná o banku vytvořenou inženýry pro inženýry.
Struktura stránky je plná šířka, vystředěná s širokými bočními okraji (64–15 cm na počítači). Hlavní obrazovka má rozdělené rozvržení: nadpis a výzvy k akci jsou zarovnány vlevo na 25 cm, zatímco plovoucí widget transakcí je umístěn vpravo na 55 cm na pozadí polotónové mapy. Pod hlavní obrazovkou se střídají sekce mezi bílou (4 cm) a světlým plátnem (5 cm) s 6cm svislými mezerami. Obsah je uspořádán podle jediné 6sloupcové mřížky: textové bloky zabírají 4 sloupce (7 cm), karty obrázků/produktů 5–6 sloupců, s úmyslným odsazením od mřížky. Sekce popisující funkce používají 2sloupcové rozvržení: text vlevo, produkt vpravo. Sekce statistik důvěryhodnosti je rozdělena do 4sloupcové mřížky po celé šířce stránky. Loga zákazníků jsou umístěna v jednom středovém řádku s mezerami 48px. Zápatí má kompaktní dvousloupcové rozvržení. Navigace je fixní, 62 pixelů vysoký, průhledný horní panel nad hlavní obrazovkou s rozmazaným pozadím, které při posouvání zbělá. Není zde žádný postranní panel ani megamenu – rozbalovací nabídky jsou jednoduché nabídky ve stylu šipek.
Vizuální styl je minimalistický a funkční – Column se zcela vyhýbá stock fotografiím. Vizuální jazyk je postaven na třech zdrojích: (1) ilustrace dat SVG, konkrétně tečkovaná polotónová mapa světa, vykreslená s přechodem od indigové přes oranžovou až po tyrkysovou, která vytváří atmosféru globálního měřítka za hlavním prvkem; (2) rozvržení karet produktů – plovoucí widgety zobrazující zůstatky na účtech, podrobnosti o převodech a úryvky kódu JSON v bílých kartách s dramatickými stíny; (3) vizualizace grafů – tyrkysové svíčkové nebo sloupcové grafy s tenkými spojovacími čarami použité v sekci důvěryhodnosti/statistiky. Polotónová mapa je charakteristickým vizuálním prvkem – její přechody přecházejí z barvy #d65620 (oranžová) přes fialovou, modrou, azurovou, tyrkysovou a žlutou a vytvářejí spektrum, které sjednocuje celou paletu značky na jedné dekorativní ploše. Ikony mají jednotnou tloušťku obrysu 1,5–2px ve variantách #232730 nebo #a9acb6 s výplní pro aktivní stavy. Žádné fotografie životního stylu, žádné abstraktní 3D rendery – toto omezení je záměrné, aby se pozornost zaměřila na produkt a data.
Paleta
Značka
- Indigo Navy
#111a4a— Primární barva značky se používá pro vyplněné výzvy k akci, aktivní navigační stavy, záhlaví a logo. Tmavě fialovomodrá barva dodává webu sytý, ale zároveň sytý černý odstín; v kombinaci s bílým textem vytváří nejvýraznější tlačítko na webu. - Seafoam 600
#44b48b— Barva kódu a dat je základní barvou pro klíče JSON, identifikátory a finanční hodnoty ve fragmentech kódu. Používá se také pro datové body v grafech a vizualizacích růstu. - Seafoam 700
#167e6c— Tmavší odstín mořské pěny pro obrys, čáry grafu a zvýraznění ikon v kontextu dat. Tím se ukotvení měřítko mořské pěny na tmavším pozadí. - Seafoam 400
#94efb7— Zvýrazněný fragment kódu obsahuje řetězcové hodnoty, URL adresy a koncové body API v rámci bloků kódu. Nejsvětlejší barva mořské pěny se čte jako písmo s pevnou šířkou řádku a nazelenalým odstínem. - Deep Sea
#023247— Dekorativní obrys a zvýrazňující barva grafu je sytá tyrkysová barva používaná v SVG ilustracích a vizualizacích dat, spolu s barevnou škálou mořské pěny.
Neutrální
- Midnight Ink
#011821— Tmavý povrch a zvýrazněný text – pozadí karty produktu, vysoce kontrastní hlavní text. Bližší k šedé s chladným modrozeleným odstínem; používá se jako základ pro tmavý režim, když je třeba část invertovat. - Slate Ink
#3b3e47— Vedlejší název a hlavní text jsou o něco teplejší než Půlnoční inkoust, použitý tam, kde by čistá černá na světlém plátně působila příliš drsně. - Steel
#7c7f88— Hlavnímu textu a textu odkazu dominuje tlumená barva (v hlavním textu použita 245krát). Neutrální šedomodrá barva, která je vnímána jako klidná, nikdy ne jako vybledlý obraz. - Fog
#a9acb6— Obrysy ikon, terciární ohraničení a zástupný text. Středně šedá barva, která odděluje text, aniž by s ním konkurovala. - Mist
#cbcccf— Hlavní text – podpisy, prohlášení o vyloučení odpovědnosti a drobné písmo – je na bílém pozadí čitelný, ale vizuálně méně znatelný. - Silver Lining
#e3e4e8— Okraje karet, okraje vstupních polí, dělicí čáry. Tato strukturální, jemná barva se používá tam, kde je třeba oddělit dva povrchy bez stínů.
Typografie
od 10 do 60 pixelů · 10 kroků
- SuisseIntl — nahrazení: Inter · obrysy 300, 400, 500, 600 · Primární písmo – používá se pro všechny nadpisy, text, tlačítka, navigaci, odkazy a text karet. Unikátní geometrické bezpatkové písmo dává Columnu osobitý redakční styl, který jej odlišuje od ostatních fintech společností pracujících výhradně s Inter-only. Váha je 600 při 52–60px pro nadpisy, 500 pro podnadpisy, 400 pro text a 300 pro odkazy s nízkým důrazem.
- SuisseIntlMono — nahrazení: JetBrains Mono · obrysy 400 · Neprostorové písmo podobné písmu SuisseIntl, používané pro technické popisky, identifikátory API a vložená data v prvcích uživatelského rozhraní. Zachovává stejné proporce jako SuisseIntl, takže text s neproporcionálním rozložením a proporcionální text se správně zarovná ve smíšených kontextech.
- SFMono — nahrazení: Fira Code · obrysy 400 · Zobrazení úryvků kódu – zobrazuje se v příkladech JSON a blocích dokumentace API. Odstín mořské pěny se používá k vizuálnímu odlišení kódu od textu uživatelského rozhraní.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 8px |
| Poloměr tlačítka | 8px |
| Poloměr karty | 8px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 72px |
| Šířka stránky | 1200px |
Umělá inteligence vám vytvoří web ve stylu Column a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- dope.security — Půlnoční terminál s fialovými majáky
- Leonardo — Obrácená redakční galerie. Muzeum s černými stěnami, kde fialové titulky fungují jako nástěnné instalace a pod nimi visí v husté mřížce portréty generované umělou inteligencí.
- VEED — Bílá galerijní stěna s neonově zelenými světelnými tlačítky
- Craft Docs — Digitální koláž pro scrapbooking. Design připomíná promyšlený, hmatový scrapbook, kde se strukturované digitální poznámky kombinují s jemnými, organickými texturami.
- Letter — Soukromá galerie s třpytivými artefakty ze skladu. Výstavní prostor s černými stěnami, kde se nad chromovanými sochami na tónovaných stěnách galerie vznášejí patkové titulky.
- Railway — Kosmický půlnoční expres. Klidná a vzrušující cesta temným, hvězdami ozářeným vesmírem, vedená jasnými signály.
- Garden Eight — Monumentální editoriál na krémovém papíře. Patkový titulek o velikosti 215 pixelů leží osamoceně na teplém pergamenu, obklopený vznášejícími se sochařskými formami a negativním prostorem připomínajícím mořský vzduch – stránka působí spíše jako obálka umělecké monografie než jako palubní deska.
- Steep — Analýza patkových fontů na teplém papíře
- ElevenLabs — Fotoesej v teplých krémových tónech s decentními nadpisy. Zápisník ve stylu Bauhausu – papír barvy vaječné skořápky, černý inkoust a jeden fialovooranžový akcent pro vystavení produktů.
- Awesomic — Redakční zinková síťovina s oranžovými interpunkčními znaménky připomínajícími konfety
- Monad — redakční technický časopis na teplém pergamenu
- AI for Business — Brutalistický redakční showroom v teplých šedých tónech