Column
tumesinine pearaamat jaheda koidiku all
Veerg kasutab sügavat, institutsionaalset tumesinist peaaegu valgel taustal: leht tundub esmalt robustse pangatoote pinnana ja seejärel arendaja mänguväljakuna. Brändivärv ei ole üks, vaid kooskõlastatud paar – tumesinine #111a4a tõsise struktuuri jaoks, piparmündiroheline #44b48b andmete ja koodi jaoks – koos ühe sooja oranži värviga (#ec652b), mis on reserveeritud intensiivsetele aktsentpindadele, näiteks Brexi kaardile. Tüpograafias domineerib SuisseIntl, geomeetriline sans serif, mida kasutatakse kogu kaaluvahemikus 300 (lingid) kuni 600 (kuvamine), andes süsteemile rafineeritud toimetusliku stiili, mis enamikul fintech-ettevõtetel puudub. Kaardid hõljuvad suurtel valgetel pindadel peente, kihiliste varjudega; enamik liideseelemente on tasased, sügavus ilmneb ainult seal, kus kaart peaks tunduma füüsilise objektina (tehinguvidinad, toote maketid). Kood ja finantsandmed esitatakse mustvalgelt, merevahu värviga – visuaalne signaal, et tegemist on inseneride poolt inseneridele ehitatud pangaga.
Lehe struktuur on täislaiuses, tsentreeritud ja laiade külgveeristega (töölaual 64–15 cm). Põhiekraan on jagatud paigutusega: pealkiri ja tegevusele kutsuvad tekstid on vasakule joondatud 25 cm kõrgusele, samas kui ujuv tehinguvidin on paigutatud paremale 55 cm kõrgusele rasterkaardi taustal. Põhiekraani all vahelduvad valge (4 cm) ja heleda lõuendi (5 cm) värvid 6 cm laiuste vertikaalsete servadega. Sisu on paigutatud ühe 6-veerulise ruudustiku järgi: tekstiplokid hõivavad 4 veergu (7 cm), pildi-/tootekaardid hõivavad 5–6 veergu, teadlikult nihutatuna ruudustikust. Funktsioonide kirjeldavad sektsioonid kasutavad 2-veerulist paigutust: tekst vasakul, toode paremal. Usaldusstatistika osa on jagatud 4-veeruliseks ruudustikuks kogu lehe laiuses. Klientide logod asuvad ühes tsentreeritud reas 48-px servadega. Jaluses on kompaktne kaheveeruline paigutus. Navigeerimine on fikseeritud, 62 piksli kõrgune läbipaistev ülemine riba põhiekraani kohal, millel on ähmane taust, mis kerimisel valgeks muutub. Külgriba ega megamenüüd pole – rippmenüüd on lihtsad noolekujulised menüüd.
Visuaalne stiil on minimalistlik ja funktsionaalne – Column väldib täielikult fotopangandust. Visuaalne keel tugineb kolmele allikale: (1) SVG andmeillustratsioonid, täpsemalt punktiirjoonisega pooltooniline maailmakaart, mis on renderdatud indigost oranži ja türkiissinise gradientiga, luues põhielemendi taha globaalse ulatuse atmosfääri; (2) tootekaartide paigutused – ujuvad vidinad, mis kuvavad kontojääke, ülekandeandmeid ja JSON-koodijuppe valgetel kaartidel dramaatiliste varjudega; (3) diagrammide visualiseeringud – türkiissinised küünlajalg- või tulpdiagrammid õhukeste ühendusjoontega, mida kasutatakse usalduse/statistika osas. Pooltoonkaart on signatuurvisualiseeringu element – selle gradient läheb üle #d65620 (oranž) läbi violetse, sinise, taevasinise, türkiissinise ja kollase, luues spektri, mis ühendab kogu brändi paleti ühel dekoratiivsel pinnal. Ikoonidel on #232730 või #a9acb6 variantides ühtlane kontuuri paksus 1,5–2 pikslit, aktiivsete olekute jaoks on täide. Ei mingeid elustiilifotosid ega abstraktseid 3D-renderdusi – vaoshoitus on taotluslik, et suunata tähelepanu tootele ja andmetele.
Palett
Bränd
- Indigo Navy
#111a4a— Brändi põhivärvi kasutatakse täidetud üleskutsete, aktiivsete navigeerimisolekute, päise ja logo jaoks. Sügav violetne-sinine värv annab saidile kindla, kuid rikkaliku musta tooni; koos valge tekstiga loob see saidi kõige enesekindlama nupu. - Seafoam 600
#44b48b— Koodi ja andmete värv on brändivärv JSON-võtmete, identifikaatorite ja finantsväärtuste jaoks koodijuppides. Seda kasutatakse ka andmepunktide jaoks diagrammides ja kasvu visualiseeringutes. - Seafoam 700
#167e6c— Andmekontekstis oleva kontuuri, diagrammijoonte ja ikooniaktsentide tumedam merevahu toon. See ankurdab merevahu skaala tumedama taustaga. - Seafoam 400
#94efb7— Esiletõstetud koodilõik sisaldab koodiplokkides stringväärtusi, URL-e ja API lõpp-punkte. Kõige heledam mereroheline värv on roheka varjundiga monosammuline font. - Deep Sea
#023247— Diagrammi dekoratiivne kontuur ja aktsentvärv on rikkalik türkiissinine värv, mida kasutatakse SVG illustratsioonides ja andmete visualiseeringutes koos mererohelise värviskaalaga.
Neutraalne
- Midnight Ink
#011821— Tume pind ja esiletõstetud tekst – tootekaardi taust, suure kontrastsusega põhitekst. Hallile lähemal jaheda sinakasrohelise varjundiga; kasutatakse tumeda režiimi alusena, kui osa on vaja ümber pöörata. - Slate Ink
#3b3e47— Teisejärguline pealkiri ja põhitekst on veidi soojemad kui Midnight Ink, mida kasutatakse seal, kus puhas must tunduks heledal lõuendil liiga karm. - Steel
#7c7f88— Põhitekstis ja lingitekstis domineerib summutatud värv (põhitekstis kasutatud 245 korda). Neutraalne hallikassinine värv, mida tajutakse rahulikuna, mitte kunagi pleekinud pildina. - Fog
#a9acb6— Ikoonide piirjooned, tertsiaarsed äärised ja kohatäitetekst. Keskmise suurusega hall värv, mis eraldab teksti, ilma et sellega konkureeriks. - Mist
#cbcccf— Põhitekst – allkirjad, lahtiütlused ja peenes kirjas tekst – on valgel taustal loetav, kuid visuaalselt vähem märgatav. - Silver Lining
#e3e4e8— Kaardi äärised, sisestusvälja äärised, eraldusjooned. Seda struktuurset, peent värvi kasutatakse kohtades, kus kahte pinda on vaja varjudeta eraldada.
Tüpograafia
10 kuni 60 pikslit · 10 sammu
- SuisseIntl — asendamine: Inter · kontuurid 300, 400, 500, 600 · Põhifont – kasutatakse kõigi pealkirjade, põhiteksti, nuppude, navigeerimise, linkide ja kaarditeksti jaoks. Ainulaadne geomeetriline sans serif annab Columnile iseloomuliku toimetusliku stiili, mis eristab seda teistest finantstehnoloogiaettevõtetest, mis teevad koostööd ainult Inter-onlyga. Pealkirjade kaal on 600 52–60 piksli juures, alapealkirjade puhul 500, põhiteksti puhul 400 ja madala rõhuasetusega linkide puhul 300.
- SuisseIntlMono — asendamine: JetBrains Mono · kontuurid 400 · SuisseIntl-iga sarnane ühtlane font, mida kasutatakse tehniliste siltide, API identifikaatorite ja kasutajaliidese elementide manustatud andmete jaoks. See säilitab samad proportsioonid kui SuisseIntl, seega joonduvad nii ühtlane kui ka proportsionaalne tekst segakontekstides õigesti.
- SFMono — asendamine: Fira Code · kontuurid 400 · Koodilõigu kuvamine – kuvatakse JSON-näidetes ja API dokumentatsiooniplokkides. Mererohelist varjundit kasutatakse koodi visuaalseks eristamiseks kasutajaliidese tekstist.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | keskmine |
| Põhisamm | 8px |
| Nupu raadius | 8px |
| Kaardi raadius | 8px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 72px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Column stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- dope.security — Keskööterminal lillade majakatega
- Leonardo — Pööratud toimetuse galerii. Mustade seintega muuseum, kus lillad pealkirjad toimivad seinainstallatsioonidena ja tehisintellekti loodud portreed ripuvad tihedas ruudustikus allpool.
- VEED — Valge galeriisein neoonroheliste valgusnuppudega
- Craft Docs — Digitaalne kollaaž külalisteraamatute loomiseks. Kujundus meenutab läbimõeldud, kombatavat külalisteraamatut, kus struktureeritud digitaalsed märkmed ühenduvad pehmete, orgaaniliste tekstuuridega.
- Letter — Privaatgalerii, kus eksponeeritakse laost pärit sätendavaid esemeid. Mustade seintega näitusepind, kus toonitud seintel kroomiskulptuuride kohal hõljuvad seriifidega pealkirjad.
- Railway — Kosmiline Kesköö Ekspress. Rahulik ja põnev teekond läbi pimeda, tähistaevas asuva kosmose, mida juhivad selged signaalid.
- Garden Eight — Monumentaalne juhtkiri kreemikal paberil. 215px serif-suurusega pealkiri lebab üksi soojal pärgamendil, ümbritsetuna hõljuvatest skulpturaalsetest vormidest ja mereõhku meenutavast negatiivsest ruumist – leht tundub pigem kunstimonograafia kaane kui armatuurlaua moodi.
- Steep — Serif-fontide analüüs soojal paberil
- ElevenLabs — Soojades kreemikates toonides fotoessee peenete pealkirjadega. Bauhausi stiilis märkmik – munakoorekarva paber, must tint ja üks lilla ja oranž aktsent toote väljapanekuks.
- Awesomic — Toimetuse tsinkvõrk oranžide konfetti meenutavate kirjavahemärkidega
- Monad — toimetuse tehniline ajakiri soojal pärgamendil
- AI for Business — Brutalistlik toimetuse müügisalong soojades hallides toonides