Column
en mörkblå huvudbok under den svala gryningen
Column använder en djup, institutionell marinblå färg på en nästan vit bakgrund: sidan känns först som en robust bankproduktyta och sedan som en lekplats för utvecklare. Varumärkesfärgen är inte en enda färg, utan ett koordinerat par – marinblå #111a4a för seriös struktur, mintgrön #44b48b för data och kod – med en enda varm orange (#ec652b) reserverad för högintensiva accentytor som Brex-kortet. Typografin domineras av SuisseIntl, ett geometriskt sans serif-tecken som används över hela viktintervallet från 300 (länkar) till 600 (display), vilket ger systemet en förfinad, redaktionell stil som de flesta fintech-företag saknar. Kort flyter på stora vita ytor med subtila, lager-på-lager-skuggor; de flesta gränssnittselementen är plana, med djup som bara visas där kortet ska kännas som ett fysiskt objekt (transaktionswidgets, produktmodeller). Koden och finansiell information presenteras i monokrom, sjöskumsfärgad – en visuell signal om att detta är en bank byggd av ingenjörer för ingenjörer.
Sidstrukturen är full bredd, centrerad med breda sidmarginaler (64–15 cm på datorn). Huvudskärmen har en delad layout: rubriken och uppmaningarna till handling är vänsterjusterade vid 25 cm, medan en flytande transaktionswidget är placerad till höger vid 55 cm mot en rasterbild av kartan. Under huvudskärmen växlar sektionerna mellan vit (4 cm) och ljus arbetsyta (5 cm) med 6 cm vertikala marginaler. Innehållet är ordnat enligt ett enda rutnät med 6 kolumner: textblock upptar 4 kolumner (7 cm), bild-/produktkort upptar 5–6 kolumner, med en avsiktlig förskjutning från rutnätet. Sektioner som beskriver funktioner använder en layout med 2 kolumner: text till vänster, produkt till höger. Avsnittet för förtroendestatistik är uppdelat i ett rutnät med 4 kolumner över hela sidans bredd. Kundlogotyper är placerade i en enda centrerad rad med 48px marginaler. Sidfoten har en kompakt layout med två kolumner. Navigeringen är en fast, 62px hög, transparent topplist ovanför huvudskärmen med en suddig bakgrund som bleknar till vit när du skrollar. Det finns ingen sidofält eller megameny – rullgardinsmenyerna är enkla pilformade menyer.
Den visuella stilen är minimalistisk och funktionell – Kolumner undviker helt stockbilder. Det visuella språket bygger på tre källor: (1) SVG-dataillustrationer, specifikt en prickad halvtonskarta i världsformat, renderad med en gradient från indigo till orange till turkos, vilket skapar en atmosfär av global skala bakom huvudelementet; (2) produktkortslayouter – flytande widgetar som visar kontosaldon, överföringsdetaljer och JSON-kodavsnitt i vita kort med dramatiska skuggor; (3) diagramvisualiseringar – turkosa ljusstake- eller stapeldiagram med tunna anslutande linjer som används i förtroende-/statistikavsnittet. Halvtonskartan är ett signaturvisuellt element – dess gradientövergångar från #d65620 (orange) till violett, blått, azurblått, turkos och gult, vilket skapar ett spektrum som förenar hela varumärkespaletten på en enda dekorativ yta. Ikonerna har en enhetlig konturtjocklek på 1,5–2px i varianterna #232730 eller #a9acb6, med en fyllning för aktiva tillstånd. Inga livsstilsfoton, inga abstrakta 3D-renderingar – återhållsamheten är avsiktlig för att fokusera uppmärksamheten på produkten och data.
Palett
Stämpla
- Indigo Navy
#111a4a— Den primära varumärkesfärgen används för ifyllda uppmaningar till handling, aktiva navigationslägen, sidhuvudet och logotypen. Den djupt violettblå färgen ger webbplatsen en solid men ändå fyllig svart nyans; i kombination med vit text skapar den den mest självsäkra knappen på webbplatsen. - Seafoam 600
#44b48b— Kod- och datafärg är varumärkesfärgen för JSON-nycklar, identifierare och finansiella värden i kodavsnitt. Den används också för datapunkter i diagram och tillväxtvisualiseringar. - Seafoam 700
#167e6c— En mörkare nyans av sjöskum för konturerna, diagramlinjerna och ikonaccenterna inom datakontexten. Detta förankrar sjöskumsskalan mot den mörkare bakgrunden. - Seafoam 400
#94efb7— Det markerade kodfragmentet innehåller strängvärden, URL:er och API-slutpunkter inom kodblock. Den ljusaste havsskumsfärgen läses som ett monospaced-teckensnitt med en grönaktig nyans. - Deep Sea
#023247— Diagrammets dekorativa kontur och accentfärg är en rik turkos färg som används i SVG-illustrationer och datavisualiseringar, tillsammans med havsskumsfärgskalan.
Neutral
- Midnight Ink
#011821— Mörk yta och markerad text – produktkortsbakgrund, huvudtext med hög kontrast. Närmare grå med en sval blågrön nyans; används som bas för mörkt läge när ett avsnitt behöver inverteras. - Slate Ink
#3b3e47— Den sekundära titeln och huvudtexten är lite varmare än Midnight Ink, som används där ren svart skulle verka för hård på den ljusa duken. - Steel
#7c7f88— Huvudtexten och länktexten domineras av en dämpad färg (används 245 gånger i huvudtexten). En neutral gråblå färg som uppfattas som lugn, aldrig en urtvättad bild. - Fog
#a9acb6— Ikonkonturer, tertiära ramar och platshållartext. En mellangrå färg som separerar texten utan att konkurrera med den. - Mist
#cbcccf— Huvudtexten – signaturer, ansvarsfriskrivningar och liten stil – är läsbar mot vit bakgrund, men visuellt mindre synlig. - Silver Lining
#e3e4e8— Kortgränser, inmatningsfältsgränser, delningslinjer. Denna strukturella, subtila färg används där två ytor behöver separeras utan skuggor.
Typografi
från 10 till 60px · 10 steg
- SuisseIntl — ersättning: Inter · konturer 300, 400, 500, 600 · Primärt teckensnitt – används för alla rubriker, brödtext, knappar, navigering, länkar och korttext. Det unika geometriska sans serif-tecknet ger Column en distinkt redaktionell stil som skiljer den från andra fintech-företag som arbetar exklusivt med Inter-only. Vikten är 600 vid 52–60px för rubriker, 500 för underrubriker, 400 för brödtext och 300 för länkar med låg betoning.
- SuisseIntlMono — ersättning: JetBrains Mono · konturer 400 · Ett teckensnitt med fast radavstånd liknande SuisseIntl, som används för tekniska etiketter, API-identifierare och inbäddad data i UI-element. Det bibehåller samma proportioner som SuisseIntl, så att fast radavstånd och proportionell text justeras korrekt i blandade sammanhang.
- SFMono — ersättning: Fira Code · konturer 400 · Kodavsnittsvisning – visas i JSON-exempel och API-dokumentationsblock. En havsskumsnyans används för att visuellt skilja kod från UI-text.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | genomsnitt |
| Grundläggande steg | 8px |
| Knappradie | 8px |
| Kortradie | 8px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 72px |
| Sidbredd | 1200px |
AI kommer att bygga din webbplats i Column -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- dope.security — Midnattsterminal med lila fyrbåkar
- Leonardo — Ett inverterat redaktionellt galleri. Ett museum med svarta väggar där lila rubriker fungerar som vägginstallationer och AI-genererade porträtt hänger i ett tätt rutnät nedanför.
- VEED — Vit tavelvägg med neongröna ljusknappar
- Craft Docs — Ett digitalt collage för scrapbooking. Designen liknar en tankeväckande, taktil scrapbooking, där strukturerade digitala anteckningar kombineras med mjuka, organiska texturer.
- Letter — Ett privat galleri med skimrande artefakter från förvaring. Ett utställningsutrymme med svarta väggar där seriferade rubriker svävar ovanför kromskulpturer på galleriets tonade väggar.
- Railway — Kosmiska Midnattsexpressen. En lugn, spännande resa genom mörk, stjärnklar rymd, guidad av tydliga signaler.
- Garden Eight — En monumental ledare på krämfärgat papper. Rubriken med serif på 215 pixlar sitter ensam på varmt pergament, omgiven av svävande skulpturala former och negativt utrymme som påminner om havsluft – sidan känns mer som omslaget till en konstmonografi än en instrumentpanel.
- Steep — Analys av serif-teckensnitt på varmt papper
- ElevenLabs — En fotoessä i varma krämfärgade toner med diskreta rubriker. En anteckningsbok i Bauhaus-stil – äggskalfärgat papper, svart bläck och en enda lila och orange accentfärg för produktpresentation.
- Awesomic — Redaktionellt zinknät med orange skiljetecken som påminner om konfetti
- Monad — redaktionell teknisk tidskrift på varmt pergament
- AI for Business — Brutalistiskt redaktionellt showroom i varma gråtoner