Column
en mørkeblå hovedbok under den kjølige daggryet
Column bruker en dyp, institusjonell marineblå farge på en nesten hvit bakgrunn: siden føles først som en robust bankproduktoverflate og deretter som en lekeplass for utviklere. Merkefargen er ikke én enkelt farge, men et koordinert par – marineblå #111a4a for seriøs struktur, mintgrønn #44b48b for data og kode – med en enkel varm oransje (#ec652b) reservert for høyintensive aksentflater som Brex-kortet. Typografien domineres av SuisseIntl, en geometrisk sans serif som brukes over hele vektområdet fra 300 (lenker) til 600 (display), noe som gir systemet en raffinert, redaksjonell stil som de fleste fintech-selskaper mangler. Kort flyter på store hvite overflater med subtile, lagdelte skygger; de fleste grensesnittelementene er flate, med dybde som bare vises der kortet skal føles som et fysisk objekt (transaksjonswidgeter, produktmodeller). Koden og de økonomiske dataene presenteres i monokrom, sjøskumfarget – et visuelt signal om at dette er en bank bygget av ingeniører for ingeniører.
Sidestrukturen er i full bredde, sentrert med brede sidemarger (64–15 cm på skrivebordet). Hovedskjermen har et delt oppsett: overskriften og handlingsfremmende oppfordringer er venstrejustert ved 25 cm, mens en flytende transaksjonswidget er plassert til høyre ved 55 cm mot en rasterbasert kartbakgrunn. Under hovedskjermen veksler seksjonene mellom hvitt (4 cm) og lyst lerret (5 cm) med 6 cm vertikale innmarger. Innholdet er ordnet i henhold til et enkelt rutenett med 6 kolonner: tekstblokker opptar 4 kolonner (7 cm), bilde-/produktkort opptar 5–6 kolonner, med en bevisst forskyvning fra rutenettet. Seksjoner som beskriver funksjoner bruker et oppsett med 2 kolonner: tekst til venstre, produkt til høyre. Tillitsstatistikkdelen er delt inn i et rutenett med 4 kolonner over hele sidens bredde. Kundelogoer er plassert i en enkelt sentrert rad med 48 piksler innmarger. Bunnteksten har et kompakt oppsett med to kolonner. Navigasjonen er en fast, 62 piksler høy, gjennomsiktig topplinje over hovedskjermen med en uskarp bakgrunn som blekner til hvit når du blar. Det er ingen sidefelt eller megameny – rullegardinmenyene er enkle pillignende menyer.
Den visuelle stilen er minimalistisk og funksjonell – kolonner unngår fullstendig arkivfotografering. Det visuelle språket er bygget på tre kilder: (1) SVG-dataillustrasjoner, nærmere bestemt et stiplet halvtoneverdenskart, gjengitt med en gradient fra indigo til oransje til turkis, noe som skaper en atmosfære av global skala bak hovedelementet; (2) produktkortlayouter – flytende widgeter som viser kontosaldoer, overføringsdetaljer og JSON-kodebiter i hvite kort med dramatiske skygger; (3) diagramvisualiseringer – turkise lysestake- eller søylediagrammer med tynne forbindelseslinjer brukt i tillits-/statistikkdelen. Halvtonekartet er et visuelt signaturelement – gradienten går fra #d65620 (oransje) til fiolett, blå, asurblå, turkis og gul, og skaper et spektrum som forener hele merkevarepaletten på en enkelt dekorativ overflate. Ikonene har en jevn konturtykkelse på 1,5–2 piksler i #232730- eller #a9acb6-variantene, med fyll for aktive tilstander. Ingen livsstilsbilder, ingen abstrakte 3D-gjengivelser – tilbakeholdenheten er bevisst for å fokusere oppmerksomheten på produktet og dataene.
Palett
Merke
- Indigo Navy
#111a4a— Den primære merkefargen brukes til utfylte handlingsfremmende oppfordringer, aktive navigasjonstilstander, overskriften og logoen. Den dype fiolettblå fargen gir nettstedet en solid, men likevel rik svart fargetone; sammen med hvit tekst skaper den den mest selvsikre knappen på nettstedet. - Seafoam 600
#44b48b— Kode- og datafarge er merkevarefargen for JSON-nøkler, identifikatorer og økonomiske verdier i kodebiter. Den brukes også for datapunkter i diagrammer og vekstvisualiseringer. - Seafoam 700
#167e6c— En mørkere nyanse av sjøskum for omrisset, diagramlinjer og ikonaksenter i datakonteksten. Dette forankrer sjøskumskalaen mot den mørkere bakgrunnen. - Seafoam 400
#94efb7— Det uthevede kodefragmentet inneholder strengverdier, URL-er og API-endepunkter i kodeblokker. Den lyseste sjøskumfargen leses som en monospaced-skrifttype med et grønnaktig skjær. - Deep Sea
#023247— Den dekorative omrisset og aksentfargen på diagrammet er en rik turkis farge som brukes i SVG-illustrasjoner og datavisualiseringer, sammen med sjøskumfargeskalaen.
Nøytral
- Midnight Ink
#011821— Mørk overflate og uthevet tekst – produktkortbakgrunn, hovedtekst med høy kontrast. Nærmere grå med en kjølig blågrønn fargetone; brukes som base for mørk modus når en seksjon må inverteres. - Slate Ink
#3b3e47— Sekundærtittelen og hovedteksten er litt varmere enn Midnight Ink, som brukes der ren svart ville virke for hard på det lyse lerretet. - Steel
#7c7f88— Hovedteksten og lenketeksten domineres av en dempet farge (brukt 245 ganger i hovedteksten). En nøytral gråblå farge som oppfattes som rolig, aldri et utvasket bilde. - Fog
#a9acb6— Ikonomriss, tertiære kantlinjer og plassholdertekst. En mellomgrå farge som skiller teksten uten å konkurrere med den. - Mist
#cbcccf— Hovedteksten – signaturer, ansvarsfraskrivelser og liten skrift – er lesbar på hvit bakgrunn, men visuelt mindre synlig. - Silver Lining
#e3e4e8— Kortgrenser, inndatafeltgrenser, skillelinjer. Denne strukturelle, subtile fargen brukes der to overflater må skilles uten skygger.
Typografi
fra 10 til 60 piksler · 10 trinn
- SuisseIntl — erstatning: Inter · omriss 300, 400, 500, 600 · Primær skrifttype – brukes for alle overskrifter, brødtekst, knapper, navigasjon, lenker og korttekst. Den unike geometriske sans-serif-skriften gir Column en særegen redaksjonell stil, som skiller den fra andre fintech-selskaper som jobber utelukkende med Inter-only. Vekten er 600 ved 52–60 piksler for overskrifter, 500 for underoverskrifter, 400 for brødtekst og 300 for lenker med lav vektlegging.
- SuisseIntlMono — erstatning: JetBrains Mono · omriss 400 · En skrifttype med fast linjeavstand, lik SuisseIntl, brukt til tekniske etiketter, API-identifikatorer og innebygde data i UI-elementer. Den opprettholder de samme proporsjonene som SuisseIntl, slik at tekst med fast linjeavstand og proporsjonal tekst justeres riktig i blandede kontekster.
- SFMono — erstatning: Fira Code · omriss 400 · Kodeutdragsvisning – vises i JSON-eksempler og API-dokumentasjonsblokker. En sjøskumfarge brukes til å visuelt skille kode fra UI-tekst.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | gjennomsnittlig |
| Grunnleggende trinn | 8px |
| Knapperadius | 8px |
| Kortradius | 8px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 72px |
| Sidebredde | 1200px |
AI vil bygge nettstedet ditt i Column -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- dope.security — Midnattsterminal med lilla beacons
- Leonardo — Et omvendt redaksjonelt galleri. Et museum med svarte vegger der lilla overskrifter fungerer som vegginstallasjoner, og AI-genererte portretter henger i et tett rutenett under.
- VEED — Hvit bildevegg med neongrønne lysknapper
- Craft Docs — En digital kollasj for scrapbooking. Designet ligner en gjennomtenkt, taktil utklippsbok, hvor strukturerte digitale notater kombineres med myke, organiske teksturer.
- Letter — Et privat galleri med skimrende gjenstander fra lageret. Et utstillingsrom med svarte vegger hvor serif-overskrifter svever over kromskulpturer på galleriets tonede vegger.
- Railway — Den kosmiske midnattsekspressen. En rolig og spennende reise gjennom det mørke, stjerneklare rommet, guidet av klare signaler.
- Garden Eight — En monumental lederartikkel på kremfarget papir. Overskriften med serif på 215 piksler sitter alene på varmt pergament, omgitt av svevende skulpturelle former og negativt rom som minner om sjøluft – siden føles mer som omslaget til en kunstmonografi enn et dashbord.
- Steep — Analyse av serif-fonter på varmt papir
- ElevenLabs — Et fotoessay i varme kremfarger med diskré overskrifter. En notatbok i Bauhaus-stil – eggeskallfarget papir, svart blekk og en enkelt lilla og oransje aksent for produktfremvisning.
- Awesomic — Redaksjonelt sinknett med oransje tegnsettingstegn som minner om konfetti
- Monad — redaksjonell teknisk tidsskrift på varmt pergament
- AI for Business — Brutalistisk redaksjonelt showroom i varme gråtoner