Column
malhelblua ĉeflibro sub la malvarmeta tagiĝo
Column uzas profundan, institucian marbluan koloron sur preskaŭ blanka fono: la paĝo unue ŝajnas kiel fortika surfaco de banka produkto kaj due kiel ludejo por programistoj. La markokoloro ne estas ununura, sed kunordigita paro — marblua numero 111a4a por serioza strukturo, menta verda numero 44b48b por datumoj kaj kodo — kun ununura varma oranĝkoloro (numero 111a4b) rezervita por alt-intensaj akcentaj surfacoj kiel la Brex-karto. La tipografion dominas SuisseIntl, geometria sanserifo uzata tra la tuta pezointervalo de 300 (ligiloj) ĝis 600 (ekrano), donante al la sistemo rafinitan, redakcian stilon, kiun mankas al plej multaj financteknologiaj kompanioj. Kartoj flosas sur grandaj blankaj surfacoj kun subtilaj, tavoligitaj ombroj; plej multaj interfacaj elementoj estas plataj, kun profundo aperanta nur kie la karto devus sentiĝi kiel fizika objekto (transakciaj fenestraĵoj, produktaj modeloj). La kodo kaj financaj datumoj estas prezentitaj monokroma, marŝaŭmkolora — vida signalo, ke ĉi tiu estas banko konstruita de inĝenieroj por inĝenieroj.
La paĝstrukturo estas plenlarĝa, centrita kun larĝaj flankaj marĝenoj (64–15 cm sur labortablo). La ĉefa ekrano havas dividitan aranĝon: la titolo kaj alvokoj al ago estas maldekstre je 25 cm, dum ŝveba transakcia fenestraĵo estas poziciigita dekstre je 55 cm kontraŭ duontona mapa fono. Sub la ĉefa ekrano, sekcioj alternas inter blanka (4 cm) kaj hela kanvaso (5 cm) kun 6 cm vertikalaj deklivoj. La enhavo estas aranĝita laŭ ununura 6-kolumna krado: tekstblokoj okupas 4 kolumnojn (7 cm), bildo/produktokartoj okupas 5–6 kolumnojn, kun konscia delokiĝo de la krado. Sekcioj priskribantaj funkciojn uzas 2-kolumnan aranĝon: teksto maldekstre, produkto dekstre. La sekcio pri fidstatistikoj estas dividita en 4-kolumnan kradon trans la plena larĝo de la paĝo. Klientaj emblemoj situas en ununura centrita vico kun 48-rastrumeraj deklivoj. La piedlinio havas kompaktan du-kolumnan aranĝon. La navigado estas fiksa, 62-rastrumera, travidebla supra stango super la ĉefa ekrano kun malklara fono kiu paliĝas al blanka dum vi rulumas. Ne estas flanka stango aŭ mega-menuo — la falmenuoj estas simplaj sag-stilaj menuoj.
La vida stilo estas minimalista kaj funkcia — Column tute evitas akciajn fotojn. La vida lingvo baziĝas sur tri fontoj: (1) SVG-datumaj ilustraĵoj, specife punktita duontona mondmapo, bildigita per gradiento de indigo al oranĝa al turkisa, kreante atmosferon de tutmonda skalo malantaŭ la ĉefa elemento; (2) produktaj kartaj aranĝoj — ŝvebantaj fenestraĵoj montrantaj kontosaldojn, translokigajn detalojn kaj JSON-kodajn fragmentojn en blankaj kartoj kun dramecaj ombroj; (3) diagramaj bildigoj — turkisaj kandelingaj aŭ stangdiagramoj kun maldikaj konektaj linioj uzataj en la sekcio pri fido/statistiko. La duontona mapo estas signifa vida elemento — ĝia gradiento transiras de #d65620 (oranĝa) tra viola, blua, lazura, turkisa kaj flava, kreante spektron, kiu unuigas la tutan markpaletron sur ununura dekoracia surfaco. La ikonoj havas unuforman konturan dikon de 1,5–2 rastrumeroj en la variaĵoj #232730 aŭ #a9acb6, kun plenigaĵo por aktivaj statoj. Neniuj vivstilfotoj, neniuj abstraktaj 3D-bildigoj — la modereco estas intenca por fokusigi atenton sur la produkton kaj datumojn.
Paletro
Marko
- Indigo Navy
#111a4a— La ĉefa markokoloro estas uzata por plenaj alvokoj al ago, aktivaj navigaciaj statoj, la kaplinio kaj la emblemo. La profunda violblua koloro donas al la retejo solidan sed riĉan nigran nuancon; parigita kun blanka teksto, ĝi kreas la plej memcertan butonon en la retejo. - Seafoam 600
#44b48b— Kodkoloro kaj datenkoloro estas la markokoloro por JSON-ŝlosiloj, identigiloj kaj financaj valoroj en kodfragmentoj. Ĝi ankaŭ estas uzata por datenpunktoj en diagramoj kaj kreskobildigoj. - Seafoam 700
#167e6c— Pli malhela nuanco de marŝaŭmo por la konturoj, diagramo-linioj kaj ikono-akcentoj ene de la datuma kunteksto. Ĉi tio ankras la marŝaŭman skalon kontraŭ la pli malhela fono. - Seafoam 400
#94efb7— La elstarigita kodfragmento enhavas ĉenajn valorojn, URL-ojn, kaj API-finpunktojn ene de kodblokoj. La plej hela marŝaŭma koloro legiĝas kiel unu-interspacigita tiparo kun verdeta nuanco. - Deep Sea
#023247— La ornama konturo kaj akcenta koloro de la diagramo estas riĉa turkisa koloro uzata en SVG-ilustraĵoj kaj datenbildigoj, kune kun la marŝaŭma kolorskalo.
Neŭtrala
- Midnight Ink
#011821— Malhela surfaco kaj reliefigita teksto - fono de la produktokarto, altkontrasta ĉefa teksto. Pli proksima al grizo kun malvarmeta bluverda nuanco; uzata kiel bazo por malhela reĝimo kiam sekcio bezonas esti inversigita. - Slate Ink
#3b3e47— La dua titolo kaj ĉefa teksto estas iom pli varmaj ol en "Noktomeza Inko", uzataj kie pura nigro ŝajnus tro severa sur la hela kanvaso. - Steel
#7c7f88— La ĉefa teksto kaj la ligteksto estas dominataj de malforta koloro (uzata 245 fojojn en la ĉefa teksto). Neŭtrala grizblua koloro, kiu estas perceptita kiel trankvila, neniam kiel paliĝinta bildo. - Fog
#a9acb6— Ikonaj konturoj, triarangaj borderoj, kaj provizora teksto. Mezgriza koloro kiu apartigas la tekston sen konkuri kun ĝi. - Mist
#cbcccf— La ĉefa teksto — subskriboj, deklaroj pri malgarantio kaj malgranda presitaĵo — estas legebla sur blanka fono, sed vide malpli rimarkebla. - Silver Lining
#e3e4e8— Karto-randoj, enigo-kampaj randoj, dividlinioj. Ĉi tiu struktura, subtila koloro estas uzata kie du surfacoj devas esti apartigitaj sen ombroj.
Tipografio
de 10 ĝis 60 rastrumeroj · 10 paŝoj
- SuisseIntl — anstataŭaĵo: Inter · konturoj 300, 400, 500, 600 · Ĉefa tiparo - uzata por ĉiuj titoloj, korpteksto, butonoj, navigado, ligiloj kaj kartteksto. La unika geometria sanserifo donas al Column distingan redakcian stilon, distingante ĝin de aliaj financteknologiaj kompanioj laborantaj ekskluzive kun Inter-only. La pezo estas 600 je 52–60 rastrumeroj por titoloj, 500 por subtitoloj, 400 por korpteksto kaj 300 por malalt-emfazaj ligiloj.
- SuisseIntlMono — anstataŭaĵo: JetBrains Mono · konturoj 400 · Unuspaca tiparo simila al SuisseIntl, uzata por teknikaj etikedoj, API-identigiloj kaj enigitaj datumoj en UI-elementojn. Ĝi konservas la samajn proporciojn kiel SuisseIntl, do unuspaca kaj proporcia teksto ĝuste viciĝas en miksitaj kuntekstoj.
- SFMono — anstataŭaĵo: Fira Code · konturoj 400 · Kodfragmenta montrado - montrata en JSON-ekzemploj kaj API-dokumentadblokoj. Marŝaŭma nuanco estas uzata por vide distingi kodon de UI-teksto.
Intervaloj kaj formo
| Celo | Signifo |
|---|---|
| Denseco | averaĝa |
| Baza paŝo | 8px |
| Butona radiuso | 8px |
| Karto-radiuso | 8px |
| Ombroj | ne - limoj anstataŭ ombroj |
| Inter sekcioj | 72px |
| Paĝlarĝo | 1200px |
AI konstruos vian retejon laŭ la stilo de Column kaj plenigos ĝin
- Plenigu per produktoj kaj afiŝoj per la ligilo - Instagram, TikTok, Facebook.
- Transdonu enhavon de via malnova retejo — nur specifu la adreson.
- Moderna dezajno sur la plej bona motoro: React ( Next.js) kun servila bildigo kaj SEO-optimigo tuj uzeblaj.
- Plene aŭtomatigita SEO-optimigo por serĉrezultoj kaj rekomendoj pri neŭralaj retoj.
Similaj stiloj
- dope.security — Noktomeza terminalo kun purpuraj signostangoj
- Leonardo — Inversa redakcia galerio. Nigramura muzeo, kie violaj titoloj funkcias kiel murinstalaĵoj, kaj per artefarita inteligenteco generitaj portretoj pendas en densa krado sube.
- VEED — Blanka galerio-muro kun neonverdaj lumbutonoj
- Craft Docs — Cifereca kolaĝo por scrapbooking. La dezajno similas pripenseman, palpan scrapbooking, kie strukturitaj ciferecaj notoj kombiniĝas kun molaj, organikaj teksturoj.
- Letter — Privata galerio prezentanta brilantajn artefaktojn el stokejo. Nigramura ekspoziciejo kie serifaj titoloj flosas super kromaj skulptaĵoj sur la nuancitaj muroj de la galerio.
- Railway — La Kosma Noktomeza Ekspreso. Trankvila, ekscita vojaĝo tra malluma, stelplena spaco, gvidata de klaraj signaloj.
- Garden Eight — Monumenta ĉefartikolo sur kremkolora papero. La 215-rastruma serifa titolo sidas sola sur varma pergameno, ĉirkaŭita de ŝvebantaj skulptaj formoj kaj negativa spaco rememoriga pri mara aero — la paĝo aspektas pli kiel la kovrilo de arta monografio ol instrumentpanelo.
- Steep — Analizo de Serifaj Tiparoj sur Varma Papero
- ElevenLabs — Fotoeseo en varmaj kremkoloraj tonoj kun subtilaj titoloj. Notlibro en la stilo de Bauhaus — ovoŝelkolora papero, nigra inko, kaj ununura viola kaj oranĝa akcento por montri la produkton.
- Awesomic — Redakcia zinka reto kun oranĝaj interpunkciaj signoj rememorigaj pri konfetoj
- Monad — redakcia teknika revuo sur varma pergameno
- AI for Business — Brutalista redakcia ekspoziciejo en varmaj grizaj tonoj