Column
isang madilim na asul na ledger sa ilalim ng malamig na bukang-liwayway
Gumagamit ang kolum ng malalim at institusyonal na asul na may halos puting background: ang pahina ay parang isang matibay na ibabaw ng produkto ng pagbabangko una at pangalawa ay isang palaruan ng mga developer. Ang kulay ng brand ay hindi iisa, kundi isang pares na magkakaugnay—navy blue #111a4a para sa seryosong istruktura, mint green #44b48b para sa data at code—na may isang mainit na orange (#ec652b) na nakalaan para sa mga high-intensity accent surface tulad ng Brex card. Ang tipograpiya ay pinangungunahan ng SuisseIntl, isang geometric sans serif na ginagamit sa buong saklaw ng timbang mula 300 (mga link) hanggang 600 (display), na nagbibigay sa sistema ng isang pino at editoryal na istilo na wala sa karamihan ng mga kumpanya ng fintech. Ang mga card ay lumulutang sa malalaking puting ibabaw na may banayad at patong-patong na mga anino; karamihan sa mga elemento ng interface ay patag, na may lalim na lumilitaw lamang kung saan ang card ay dapat magmukhang isang pisikal na bagay (mga widget ng transaksyon, mga mockup ng produkto). Ang code at datos sa pananalapi ay ipinapakita sa monochrome, kulay-dagat—isang visual na senyales na ito ay isang bangko na itinayo ng mga inhinyero para sa mga inhinyero.
Ang istruktura ng pahina ay buong lapad, nakasentro na may malapad na gilid (64–15 cm sa desktop). Ang pangunahing screen ay isang hating layout: ang headline at mga panawagan para sa aksyon ay nakahanay sa kaliwa sa 25 cm, habang ang isang lumulutang na widget ng transaksyon ay nakaposisyon sa kanan sa 55 cm laban sa background ng isang halftone map. Sa ibaba ng pangunahing screen, ang mga seksyon ay nagpapalitan sa pagitan ng puti (4 cm) at mapusyaw na canvas (5 cm) na may 6 cm na patayong mga gutter. Ang nilalaman ay nakaayos ayon sa isang grid na may 6 na haligi: ang mga bloke ng teksto ay sumasakop sa 4 na haligi (7 cm), ang mga card ng imahe/produkto ay sumasakop sa 5–6 na haligi, na may sinasadyang pag-offset mula sa grid. Ang mga seksyong naglalarawan ng mga tampok ay gumagamit ng layout na may 2 haligi: teksto sa kaliwa, produkto sa kanan. Ang seksyon ng mga istatistika ng tiwala ay nahahati sa isang grid na may 4 na haligi sa buong lapad ng pahina. Ang mga logo ng customer ay matatagpuan sa isang hilera na nakasentro na may 48px na mga gutter. Ang footer ay may compact na layout na may dalawang haligi. Ang nabigasyon ay isang nakapirming, 62px-taas, transparent na top bar sa ibabaw ng pangunahing screen na may malabong background na nagiging puti habang nag-i-scroll ka. Walang sidebar o mega-menu—ang mga dropdown ay mga simpleng menu na parang arrow.
Minimalist at praktikal ang istilo ng biswal—Lubos na iniiwasan ng Kolum ang stock photography. Ang visual language ay nakabatay sa tatlong pinagmulan: (1) mga ilustrasyon ng datos ng SVG, partikular na isang tuldok-tuldok na mapa ng mundo na may halftone, na nilagyan ng gradient mula indigo hanggang orange hanggang turquoise, na lumilikha ng isang kapaligiran ng pandaigdigang saklaw sa likod ng pangunahing elemento; (2) mga layout ng product card—mga lumulutang na widget na nagpapakita ng mga balanse ng account, mga detalye ng paglilipat, at mga snippet ng JSON code sa mga puting card na may mga dramatikong anino; (3) mga visualization ng tsart—turquoise candlestick o bar chart na may manipis na mga linyang nagdudugtong na ginagamit sa seksyon ng trust/statistics. Ang halftone map ay isang signature visual element—ang mga gradient transition nito mula #d65620 (orange) hanggang violet, blue, azure, turquoise, at yellow, na lumilikha ng isang spectrum na pinag-iisa ang buong palette ng brand sa isang pandekorasyon na ibabaw. Ang mga icon ay may pantay na kapal ng outline na 1.5–2px sa mga variant na #232730 o #a9acb6, na may fill para sa mga aktibong estado. Walang mga litrato ng pamumuhay, walang abstract 3D renders—sinasadya ang pagpigil na ito upang ituon ang atensyon sa produkto at datos.
Paleta
Tatak
- Indigo Navy
#111a4a— Ang pangunahing kulay ng brand ay ginagamit para sa mga kumpletong panawagan para sa aksyon, mga aktibong estado ng nabigasyon, ang header, at ang logo. Ang malalim na kulay violet-blue ay nagbibigay sa site ng isang solid ngunit mayamang itim na kulay; kasama ang puting teksto, lumilikha ito ng pinaka-mapangahas na buton sa site. - Seafoam 600
#44b48b— Ang kulay ng code at data ay ang kulay ng brand para sa mga JSON key, identifier, at mga financial value sa mga code snippet. Ginagamit din ito para sa mga data point sa mga chart at growth visualization. - Seafoam 700
#167e6c— Isang mas madilim na kulay ng seafoam para sa balangkas, mga linya ng tsart, at mga icon ang nagbibigay-diin sa konteksto ng datos. Ito ang nag-aangkla sa iskala ng seafoam laban sa mas madilim na background. - Seafoam 400
#94efb7— Ang naka-highlight na code fragment ay naglalaman ng mga string value, URL, at API endpoint sa loob ng mga code block. Ang pinakamaliwanag na kulay ng seafoam ay mababasa bilang isang monospaced font na may maberdeng kulay. - Deep Sea
#023247— Ang pandekorasyon na balangkas at kulay ng tuldik ng tsart ay isang matingkad na kulay turkesa na ginagamit sa mga ilustrasyon ng SVG at mga visualization ng datos, kasama ang iskala ng kulay ng seafoam.
Neutral
- Midnight Ink
#011821— Madilim na ibabaw at naka-highlight na teksto – background ng product card, pangunahing teksto na may mataas na contrast. Mas malapit sa kulay abo na may malamig na asul-berdeng kulay; ginagamit bilang base para sa dark mode kapag kailangang baligtarin ang isang seksyon. - Slate Ink
#3b3e47— Ang pangalawang pamagat at pangunahing teksto ay medyo mas mainit kaysa sa Midnight Ink, na ginagamit kung saan ang purong itim ay tila masyadong malupit sa mapusyaw na canvas. - Steel
#7c7f88— Ang pangunahing teksto at teksto ng link ay pinangungunahan ng isang mahinang kulay (ginamit nang 245 beses sa pangunahing teksto). Isang neutral na kulay abo-asul na nakikita bilang kalmado, hindi kailanman isang malabong imahe. - Fog
#a9acb6— Mga balangkas ng icon, mga tertiary border, at teksto ng placeholder. Isang katamtamang kulay abo na naghihiwalay sa teksto nang hindi nakikipagkumpitensya dito. - Mist
#cbcccf— Ang pangunahing teksto—mga lagda, mga pagtatanggi, at maliliit na letra—ay mababasa sa puting background, ngunit hindi gaanong mahahalata sa paningin. - Silver Lining
#e3e4e8— Mga hangganan ng card, mga hangganan ng input field, mga linyang naghahati. Ang istruktural at banayad na kulay na ito ay ginagamit kung saan kailangang paghiwalayin ang dalawang ibabaw nang walang mga anino.
Tipograpiya
mula 10 hanggang 60px · 10 hakbang
- SuisseIntl — kapalit: Inter · mga balangkas 300, 400, 500, 600 · Pangunahing font – ginagamit para sa lahat ng heading, body text, mga button, nabigasyon, mga link, at teksto ng card. Ang natatanging geometric sans serif ay nagbibigay sa Column ng natatanging istilo ng editoryal, na nagpapaiba dito sa ibang mga kumpanya ng fintech na eksklusibong nagtatrabaho sa Inter-only. Ang bigat ay 600 sa 52–60px para sa mga heading, 500 para sa mga subheading, 400 para sa body text, at 300 para sa mga link na may mababang diin.
- SuisseIntlMono — kapalit: JetBrains Mono · mga balangkas 400 · Isang monospaced font na katulad ng SuisseIntl, na ginagamit para sa mga teknikal na label, mga API identifier, at naka-embed na data sa mga elemento ng UI. Pinapanatili nito ang parehong proporsyon gaya ng SuisseIntl, kaya ang monospaced at proportional na teksto ay wastong nakahanay sa magkahalong konteksto.
- SFMono — kapalit: Fira Code · mga balangkas 400 · Pagpapakita ng snippet ng code – ipinapakita sa mga halimbawa ng JSON at mga bloke ng dokumentasyon ng API. Ginagamit ang seafoam shade upang biswal na maiba ang code mula sa teksto ng UI.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | karaniwan |
| Pangunahing hakbang | 8px |
| Radius ng buton | 8px |
| Radius ng card | 8px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 72px |
| Lapad ng pahina | 1200px |
Gagawa ang AI ng website mo sa estilong Column at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- dope.security — Terminal ng hatinggabi na may mga lilang beacon
- Leonardo — Isang baliktad na galeriya ng editoryal. Isang museo na may itim na pader kung saan ang mga lilang headline ay nagsisilbing mga instalasyon sa dingding, at ang mga larawang binuo ng AI ay nakasabit sa isang siksik na grid sa ibaba.
- VEED — Puting gallery wall na may mga butones na neon green light
- Craft Docs — Isang digital collage para sa scrapbooking. Ang disenyo ay kahawig ng isang maalalahanin at madaling hawakang scrapbook, kung saan ang mga nakabalangkas na digital na tala ay pinagsasama ang malambot at organikong mga tekstura.
- Letter — Isang pribadong galeriya na nagtatampok ng kumikinang na mga artifact mula sa imbakan. Isang espasyo para sa eksibisyon na may itim na dingding kung saan ang mga headline na may serif ay lumulutang sa ibabaw ng mga eskultura na chrome sa mga tinted na dingding ng galeriya.
- Railway — Ang Cosmic Midnight Express. Isang kalmado at kapanapanabik na paglalakbay sa madilim at naliliwanagan ng mga bituin, ginagabayan ng malinaw na mga senyales.
- Garden Eight — Isang napakalaking editoryal sa kulay kremang papel. Ang 215px serif na headline ay nakapatong nang mag-isa sa mainit na pergamino, napapalibutan ng mga lumulutang na eskultura at negatibong espasyo na nakapagpapaalaala sa hangin ng dagat—ang pahina ay mas parang pabalat ng isang art monograp kaysa sa isang dashboard.
- Steep — Pagsusuri ng mga Serif Font sa Mainit na Papel
- ElevenLabs — Isang photo essay sa maayang kulay krema na may banayad na mga headline. Isang notebook na istilong Bauhaus—papel na kulay itlog, itim na tinta, at isang lila at orange na accent para sa display ng produkto.
- Awesomic — Editoryal na zinc mesh na may orange na bantas na nakapagpapaalala ng confetti
- Monad — teknikal na dyornal ng editoryal tungkol sa mainit na pergamino
- AI for Business — Brutalist na palabas ng editoryal sa mainit na kulay abo