Column
tummansininen tilikirja viileän aamunkoiton alla
Column-teoksessa käytetään syvää, institutionaalista laivastonsinistä lähes valkoisella taustalla: sivu tuntuu ensin vankalta pankkituotepinnalta ja toiseksi kehittäjien leikkikentältä. Brändiväri ei ole yksittäinen, vaan koordinoitu pari – laivastonsininen #111a4a vakavalle rakenteelle, mintunvihreä #44b48b datalle ja koodille – ja yksi lämmin oranssi (#ec652b), joka on varattu intensiivisille korostuspinnoille, kuten Brex-kortille. Typografiaa hallitsee SuisseIntl, geometrinen sans serif -tyyli, jota käytetään koko painoalueella 300:sta (linkit) 600:aan (näyttö). Tämä antaa järjestelmälle hienostuneen, toimituksellisen tyylin, joka useimmilta fintech-yrityksiltä puuttuu. Kortit kelluvat suurilla valkoisilla pinnoilla, joissa on hienovaraisia, kerroksellisia varjoja; useimmat käyttöliittymäelementit ovat tasaisia, ja syvyyttä näkyy vain siellä, missä kortin pitäisi tuntua fyysiseltä objektilta (tapahtumawidgetit, tuotemallit). Koodi ja taloustiedot esitetään yksivärisinä, merenvaahdon värisinä – visuaalinen signaali siitä, että kyseessä on insinöörien insinööreille rakentama pankki.
Sivun rakenne on täysleveä, keskitetty ja leveillä sivureunuksilla (64–15 cm työpöytäversiossa). Päänäyttö on jaettu: otsikko ja toimintakehotteet on tasattu vasemmalle 25 cm:n korkeuteen, kun taas kelluva tapahtumawidget on sijoitettu oikealle 55 cm:n korkeuteen rasterikarttataustaa vasten. Päänäytön alapuolella osiot vaihtelevat valkoisen (4 cm) ja vaalean kankaan (5 cm) välillä, ja niissä on 6 cm:n pystysuorat sisämarginaalit. Sisältö on järjestetty yhden 6-sarakkeisen ruudukon mukaan: tekstilohkot vievät 4 saraketta (7 cm), kuva-/tuotekortit vievät 5–6 saraketta, ja ne on siirretty tarkoituksella ruudukosta. Ominaisuuksia kuvaavat osiot käyttävät 2-sarakkeista asettelua: teksti vasemmalla, tuote oikealla. Luottamustilastoja käsittelevä osio on jaettu 4-sarakkeiseen ruudukkoon koko sivun leveydelle. Asiakkaiden logot sijaitsevat yhdellä keskitetyllä rivillä, jossa on 48 pikselin sisämarginaalit. Alatunnisteessa on kompakti kaksisarakkeinen asettelu. Navigointi on kiinteä, 62 pikseliä korkea, läpinäkyvä yläpalkki päänäytön yläpuolella, jonka sumennettu tausta muuttuu valkoiseksi vieritettäessä. Sivupalkkia tai megavalikkoja ei ole – alasvetovalikot ovat yksinkertaisia nuolityylisiä valikoita.
Visuaalinen tyyli on minimalistinen ja toimiva – Column välttää kokonaan kuvapankkikuvia. Visuaalinen kieli perustuu kolmeen lähteeseen: (1) SVG-datakuvitukset, erityisesti pisteviivainen rasterikartta, joka on renderöity indigon, oranssin ja turkoosin värisellä liukuvärillä, mikä luo globaalin mittakaavan tunnelman pääelementin taakse; (2) tuotekorttien asettelut – kelluvat widgetit, jotka näyttävät tilien saldot, siirtotiedot ja JSON-koodinpätkät valkoisissa korteissa dramaattisilla varjoilla; (3) kaavioiden visualisoinnit – turkoosit kynttilä- tai pylväskaaviot ohuilla yhdysviivoilla, joita käytetään luottamus-/tilasto-osiossa. Rasterikartta on brändin tunnusomainen visuaalinen elementti – sen liukuväri siirtyy #d65620:sta (oranssi) violetin, sinisen, azuurin, turkoosin ja keltaisen läpi luoden spektrin, joka yhdistää koko brändipaletin yhdelle koristeelliselle pinnalle. Kuvakkeilla on tasainen ääriviivan paksuus 1,5–2 pikseliä #232730- tai #a9acb6-muunnelmissa, ja aktiivisia tiloja varten on täyttö. Ei lifestyle-kuvia, ei abstrakteja 3D-renderöintejä – pidättyvyys on tarkoituksellista, jotta huomio kiinnittyy tuotteeseen ja dataan.
Paletti
Merkki
- Indigo Navy
#111a4a— Ensisijaista brändiväriä käytetään täytetyissä toimintakehotuksissa, aktiivisissa navigointitiloissa, otsikossa ja logossa. Syvän violetinsininen väri antaa sivustolle kiinteän mutta rikkaan mustan sävyn; valkoisen tekstin kanssa se luo sivuston vakuuttavimman painikkeen. - Seafoam 600
#44b48b— Koodin ja datan väri on JSON-avainten, tunnisteiden ja taloudellisten arvojen brändiväri koodinpätkissä. Sitä käytetään myös kaavioiden ja kasvun visualisointien datapisteissä. - Seafoam 700
#167e6c— Tummempi merenvaahdon sävy ääriviivalle, kaavioviivoille ja kuvakkeiden korostuksille datakontekstissa. Tämä ankkuroi merenvaahdon asteikon tummempaa taustaa vasten. - Seafoam 400
#94efb7— Korostettu koodinpätkä sisältää merkkijonoarvoja, URL-osoitteita ja API-päätepisteitä koodilohkojen sisällä. Vaalein merensininen väri lukee kiinteävälisenä fonttina, jossa on vihertävä sävy. - Deep Sea
#023247— Kaavion koristeellinen ääriviiva ja korostusväri on SVG-kuvituksissa ja datan visualisoinneissa käytetty rikas turkoosi väri yhdessä merensinisen väriskaalan kanssa.
Neutraali
- Midnight Ink
#011821— Tumma pinta ja korostettu teksti – tuotekortin tausta, voimakas kontrasti päätekstissä. Lähempänä harmaata, viileä sinivihreä sävy; käytetään pohjana tummalle tilalle, kun osio on käännettävä. - Slate Ink
#3b3e47— Toissijainen otsikko ja pääteksti ovat hieman lämpimämpiä kuin Midnight Ink, jota käytetään silloin, kun puhdas musta näyttäisi liian karulta vaalealla kankaalla. - Steel
#7c7f88— Päätekstiä ja linkkitekstiä hallitsee hillitty väri (jota on käytetty päätekstissä 245 kertaa). Neutraali harmaansininen väri, joka mielletään rauhalliseksi, ei koskaan haalistuneeksi kuvaksi. - Fog
#a9acb6— Kuvakkeiden ääriviivat, tertiääriset reunat ja paikkamerkkiteksti. Keskiharmaa väri, joka erottaa tekstin kilpailematta sen kanssa. - Mist
#cbcccf— Pääteksti – allekirjoitukset, vastuuvapauslausekkeet ja pienellä präntätty teksti – on luettavissa valkoisella taustalla, mutta visuaalisesti vähemmän havaittavissa. - Silver Lining
#e3e4e8— Kortin reunat, syöttökentän reunat, jakoviivat. Tätä rakenteellista, hienovaraista väriä käytetään silloin, kun kaksi pintaa on erotettava toisistaan ilman varjoja.
Typografia
10–60 pikseliä · 10 askelta
- SuisseIntl — korvaava: Inter · ääriviivat 300, 400, 500, 600 · Ensisijainen fontti – käytetään kaikissa otsikoissa, leipätekstissä, painikkeissa, navigoinnissa, linkeissä ja korttiteksteissä. Ainutlaatuinen geometrinen sans serif antaa Columnille erottuvan toimituksellisen tyylin, joka erottaa sen muista yksinomaan Inter-onlyn kanssa työskentelevistä fintech-yrityksistä. Otsikoiden paino on 600 52–60 pikselin kokoon asti, alaotsikoiden 500, leipätekstin 400 ja matalan painotuksen linkkien 300.
- SuisseIntlMono — korvaava: JetBrains Mono · ääriviivat 400 · SuisseIntlin kaltainen kiinteävälisinen fontti, jota käytetään teknisissä otsikoissa, API-tunnisteissa ja käyttöliittymäelementteihin upotetussa datassa. Se säilyttää samat mittasuhteet kuin SuisseIntl, joten kiinteävälisinen ja suhteutettu teksti tasataan oikein sekalaisissa yhteyksissä.
- SFMono — korvaava: Fira Code · ääriviivat 400 · Koodinpätkän näyttö – näytetään JSON-esimerkeissä ja API-dokumentaatiolohkoissa. Merivaahdon sävyä käytetään koodin erottamiseen käyttöliittymätekstistä visuaalisesti.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | keskimäärin |
| Perusvaihe | 8px |
| Painikkeen säde | 8px |
| Kortin säde | 8px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 72px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Column -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- dope.security — Keskiyön terminaali violeteilla majakoilla
- Leonardo — Käänteinen toimituksellinen galleria. Mustaseinäinen museo, jossa violetit otsikot toimivat seinäinstallaatioina ja tekoälyn luomat muotokuvat roikkuvat tiheässä ruudukossa alapuolella.
- VEED — Valkoinen galleriaseinä neonvihreillä valonapeilla
- Craft Docs — Digitaalinen kollaasi scrapbookingiin. Design muistuttaa harkittua, kosketeltavaa scrapbookingia, jossa strukturoidut digitaaliset muistiinpanot yhdistyvät pehmeisiin, orgaanisiin tekstuureihin.
- Letter — Yksityinen galleria, jossa on esillä varastosta löytyviä kimaltelevia esineitä. Mustaseinäinen näyttelytila, jossa serifioidut otsikot leijuvat kromiveistosten yllä gallerian sävytetyillä seinillä.
- Railway — Kosminen keskiyön pikajuna. Rauhallinen ja jännittävä matka pimeän, tähtien valaiseman avaruuden halki selkeiden signaalien ohjaamana.
- Garden Eight — Monumentaalinen pääkirjoitus kermanväriselle paperille. 215 pikselin serif-otsikko on yksinään lämpimällä pergamentilla, leijuvien veistoksellisten muotojen ja meri-ilmaa muistuttavan negatiivisen tilan ympäröimänä – sivu tuntuu enemmän taidemonografian kannelta kuin kojelaudalta.
- Steep — Serif-fonttien analyysi lämpimällä paperilla
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- AI for Business — Brutalistinen toimituksellinen showroom lämpimin harmaan sävyin