Column
'n donkerblou grootboek onder die koel dagbreek
Kolom gebruik 'n diep, institusionele vlootblou op 'n amper-wit agtergrond: die bladsy voel eerstens soos 'n robuuste bankprodukoppervlak en tweedens soos 'n ontwikkelaarspeelplek. Die handelsmerkkleur is nie 'n enkele een nie, maar 'n gekoördineerde paar - vlootblou #111a4a vir ernstige struktuur, kruisementgroen #44b48b vir data en kode - met 'n enkele warm oranje (#ec652b) gereserveer vir hoë-intensiteit aksentoppervlakke soos die Brex-kaart. Die tipografie word oorheers deur SuisseIntl, 'n geometriese sans serif wat oor die hele gewigsreeks van 300 (skakels) tot 600 (vertoning) gebruik word, wat die stelsel 'n verfynde, redaksionele styl gee wat die meeste fintech-maatskappye kortkom. Kaarte dryf op groot wit oppervlaktes met subtiele, gelaagde skaduwees; die meeste koppelvlakelemente is plat, met diepte wat slegs verskyn waar die kaart soos 'n fisiese voorwerp moet voel (transaksie-widgets, produkmodelle). Die kode en finansiële data word in monochroom, seeskuimkleurig aangebied - 'n visuele sein dat hierdie 'n bank is wat deur ingenieurs vir ingenieurs gebou is.
Die bladsystruktuur is volbreedte, gesentreer met wye symarges (64–15 cm op die rekenaar). Die hoofskerm is 'n gesplete uitleg: die opskrif en oproepe tot aksie is linksbelyn teen 25 cm, terwyl 'n swewende transaksie-widget regs teen 55 cm teen 'n halftoonkaartagtergrond geposisioneer is. Onder die hoofskerm wissel afdelings tussen wit (4 cm) en ligte doek (5 cm) met 6 cm vertikale geute. Inhoud word gerangskik volgens 'n enkele 6-kolom rooster: teksblokke beslaan 4 kolomme (7 cm), beeld-/produkkaarte beslaan 5–6 kolomme, met 'n doelbewuste verskuiwing van die rooster. Afdelings wat kenmerke beskryf, gebruik 'n 2-kolom uitleg: teks aan die linkerkant, produk aan die regterkant. Die vertrouestatistieke-afdeling is verdeel in 'n 4-kolom rooster oor die volle breedte van die bladsy. Kliëntlogo's is in 'n enkele gesentreerde ry met 48px geute geleë. Die voetskrif het 'n kompakte twee-kolom uitleg. Die navigasie is 'n vaste, 62px-hoë, deursigtige boonste balk oor die hoofskerm met 'n vae agtergrond wat na wit vervaag soos jy blaai. Daar is geen sybalk of mega-kieslys nie - die aftreklyste is eenvoudige pylstyl-kieslyste.
Die visuele styl is minimalisties en funksioneel—Kolom vermy voorraadfotografie heeltemal. Die visuele taal is op drie bronne gebou: (1) SVG-data-illustrasies, spesifiek 'n gestippelde halftoon-wêreldkaart, weergegee met 'n gradiënt van indigo na oranje na turkoois, wat 'n atmosfeer van globale skaal agter die hoofelement skep; (2) produkkaartuitlegte—drywende widgets wat rekeningsaldo's, oordragbesonderhede en JSON-kodebrokkies in wit kaarte met dramatiese skaduwees vertoon; (3) grafiekvisualisasies—turkoois kandelaar- of staafgrafieke met dun verbindingslyne wat in die vertroue/statistieke-afdeling gebruik word. Die halftoonkaart is 'n kenmerkende visuele element—sy gradiënt gaan oor van #d65620 (oranje) deur violet, blou, asuurblou, turkoois en geel, wat 'n spektrum skep wat die hele handelsmerkpalet op 'n enkele dekoratiewe oppervlak verenig. Die ikone het 'n eenvormige buitelyndikte van 1.5–2px in die #232730- of #a9acb6-variante, met 'n vulling vir aktiewe toestande. Geen leefstylfoto's, geen abstrakte 3D-weergawes nie – die beperking is doelbewus om die aandag op die produk en data te vestig.
Palet
Handelsmerk
- Indigo Navy
#111a4a— Die primêre handelsmerkkleur word gebruik vir gevulde oproepe tot aksie, aktiewe navigasietoestande, die opskrif en die logo. Die diep violetblou kleur gee die webwerf 'n soliede maar ryk swart skakering; gepaard met wit teks skep dit die mees assertiewe knoppie op die webwerf. - Seafoam 600
#44b48b— Kode- en datakleur is die handelsmerkkleur vir JSON-sleutels, identifiseerders en finansiële waardes in kodebrokkies. Dit word ook gebruik vir datapunte in grafieke en groeivisualisasies. - Seafoam 700
#167e6c— 'n Donkerder skakering van seeskuim vir die buitelyn, grafieklyne en ikoonaksente binne die datakonteks. Dit anker die seeskuimskaal teen die donkerder agtergrond. - Seafoam 400
#94efb7— Die uitgeligte kodefragment bevat stringwaardes, URL'e en API-eindpunte binne kodeblokke. Die ligste seeskuimkleur lees as 'n monospasiërende lettertipe met 'n groenerige tint. - Deep Sea
#023247— Die dekoratiewe buitelyn en aksentkleur van die grafiek is 'n ryk turkoois kleur wat in SVG-illustrasies en datavisualisasies gebruik word, saam met die seeskuim-kleurskaal.
Neutraal
- Midnight Ink
#011821— Donker oppervlak en uitgeligte teks – produkkaart agtergrond, hoofteks met hoë kontras. Nader aan grys met 'n koel blougroen tint; gebruik as basis vir donker modus wanneer 'n afdeling omgekeer moet word. - Slate Ink
#3b3e47— Die sekondêre titel en hoofteks is 'n bietjie warmer as Midnight Ink, wat gebruik word waar suiwer swart te hard op die ligte doek sou lyk. - Steel
#7c7f88— Die hoofteks en skakelteks word oorheers deur 'n gedempte kleur (245 keer in die hoofteks gebruik). 'n Neutrale grysblou kleur wat as kalm beskou word, nooit 'n uitgewasde beeld nie. - Fog
#a9acb6— Ikoonomlyne, tersiêre grense en plekhouerteks. 'n Mediumgrys kleur wat die teks skei sonder om daarmee mee te ding. - Mist
#cbcccf— Die hoofteks—handtekeninge, vrywarings en kleinletters—is leesbaar op 'n wit agtergrond, maar visueel minder opvallend. - Silver Lining
#e3e4e8— Kaartgrense, invoerveldgrense, verdeellyne. Hierdie strukturele, subtiele kleur word gebruik waar twee oppervlaktes sonder skaduwees geskei moet word.
Tipografie
van 10 tot 60px · 10 stappe
- SuisseIntl — vervanging: Inter · buitelyne 300, 400, 500, 600 · Primêre lettertipe – word gebruik vir alle opskrifte, liggaamsteks, knoppies, navigasie, skakels en kaartteks. Die unieke geometriese sans serif gee Column 'n kenmerkende redaksionele styl, wat dit onderskei van ander fintech-maatskappye wat uitsluitlik met Inter-only werk. Die gewig is 600 teen 52–60px vir opskrifte, 500 vir subopskrifte, 400 vir liggaamsteks en 300 vir skakels met lae klem.
- SuisseIntlMono — vervanging: JetBrains Mono · buitelyne 400 · 'n Monospasiërende lettertipe soortgelyk aan SuisseIntl, wat gebruik word vir tegniese etikette, API-identifiseerders en ingebedde data in UI-elemente. Dit handhaaf dieselfde verhoudings as SuisseIntl, sodat monospasiërende en proporsionele teks korrek in gemengde kontekste belyn word.
- SFMono — vervanging: Fira Code · buitelyne 400 · Kodebrokkie-vertoning – vertoon in JSON-voorbeelde en API-dokumentasieblokke. ’n Seeskuimskadu word gebruik om kode visueel van UI-teks te onderskei.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | gemiddelde |
| Basiese stap | 8px |
| Knoppieradius | 8px |
| Kaartradius | 8px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 72px |
| Bladsybreedte | 1200px |
KI sal jou webwerf in Column -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- dope.security — Middernagterminaal met pers bakens
- Leonardo — ’n Omgekeerde redaksionele galery. ’n Museum met swart mure waar pers opskrifte as muurinstallasies optree, en KI-gegenereerde portrette in ’n digte rooster onder hang.
- VEED — Wit galerymuur met neongroen ligknoppies
- Craft Docs — 'n Digitale collage vir plakboekwerk. Die ontwerp lyk soos 'n deurdagte, tasbare plakboek, waar gestruktureerde digitale notas met sagte, organiese teksture gekombineer word.
- Letter — 'n Privaat galery met glinsterende artefakte uit berging. 'n Uitstallingsruimte met swart mure waar geserifeerde opskrifte bo chroombeelde op die galery se getinte mure sweef.
- Railway — Die Kosmiese Middernagekspres. 'n Kalm, opwindende reis deur die donker, sterverligte ruimte, gelei deur duidelike seine.
- Garden Eight — 'n Monumentale hoofartikel op roomkleurige papier. Die 215px serif-opskrif sit alleen op warm perkament, omring deur swewende beeldhouvorms en negatiewe ruimte wat aan seelug herinner – die bladsy voel meer soos die omslag van 'n kunsmonografie as 'n paneelbord.
- Steep — Analise van Serif-lettertipes op warm papier
- ElevenLabs — 'n Foto-essay in warm roomkleure met subtiele opskrifte. 'n Bauhaus-styl notaboek—eierdopkleurige papier, swart ink en 'n enkele pers en oranje aksent vir produkuitstalling.
- Awesomic — Redaksionele sinkgaas met oranje leestekens wat aan konfetti herinner
- Monad — redaksionele tegniese tydskrif op warm perkament
- AI for Business — Brutalistiese redaksionele vertoonlokaal in warm grys kleure