Column
een donkerblauwe kasboek onder de koele ochtendgloed
Column gebruikt een diep, institutioneel marineblauw op een bijna witte achtergrond: de pagina voelt in de eerste plaats aan als een robuust bankproduct en pas in de tweede plaats als een ontwikkelomgeving. De merkkleur is niet één enkele kleur, maar een gecoördineerd paar – marineblauw #111a4a voor een serieuze structuur, mintgroen #44b48b voor data en code – met een enkele warme oranje tint (#ec652b) gereserveerd voor opvallende accenten zoals de Brex-kaart. De typografie wordt gedomineerd door SuisseIntl, een geometrische schreefloze letter die wordt gebruikt voor alle gewichten, van 300 (links) tot 600 (display), waardoor het systeem een verfijnde, redactionele stijl krijgt die de meeste fintechbedrijven missen. Kaarten zweven op grote witte vlakken met subtiele, gelaagde schaduwen; de meeste interface-elementen zijn plat, met diepte alleen waar de kaart als een fysiek object moet aanvoelen (transactiewidgets, productmockups). De code en financiële gegevens worden in monochrome, zeegroene tinten gepresenteerd – een visueel signaal dat dit een bank is die door ingenieurs voor ingenieurs is gebouwd.
De paginastructuur is volledig breed, gecentreerd met brede zijmarges (64–15 cm op desktop). Het hoofdscherm heeft een gesplitste lay-out: de koptekst en call-to-actions zijn links uitgelijnd op 25 cm, terwijl een zwevende transactiewidget rechts is geplaatst op 55 cm tegen een halftoonkaartachtergrond. Onder het hoofdscherm wisselen secties af tussen wit (4 cm) en licht canvas (5 cm) met verticale tussenruimtes van 6 cm. De inhoud is gerangschikt volgens een raster van zes kolommen: tekstblokken beslaan vier kolommen (7 cm), afbeeldingen/productkaarten beslaan vijf tot zes kolommen, met een bewuste verschuiving ten opzichte van het raster. Secties die functies beschrijven, gebruiken een lay-out van twee kolommen: tekst links, product rechts. De sectie met vertrouwensstatistieken is verdeeld in een raster van vier kolommen over de volledige breedte van de pagina. Klantlogo's staan in één gecentreerde rij met tussenruimtes van 48px. De footer heeft een compacte lay-out van twee kolommen. De navigatie bestaat uit een vaste, 62px hoge, transparante bovenbalk boven het hoofdscherm met een wazige achtergrond die wit wordt naarmate je scrollt. Er is geen zijbalk of megamenu; de dropdownmenu's zijn eenvoudige menu's met pijltjes.
De visuele stijl is minimalistisch en functioneel – Column vermijdt volledig stockfoto's. De visuele taal is gebaseerd op drie bronnen: (1) SVG-data-illustraties, met name een gestippelde halftoonwereldkaart, weergegeven met een verloop van indigo naar oranje naar turquoise, waardoor een sfeer van wereldwijde schaal achter het hoofdelement ontstaat; (2) productkaartlay-outs – zwevende widgets die rekeningsaldi, overschrijvingsgegevens en JSON-codefragmenten weergeven in witte kaarten met dramatische schaduwen; (3) grafische visualisaties – turquoise candlestick- of staafdiagrammen met dunne verbindingslijnen, gebruikt in het gedeelte met vertrouwen/statistieken. De halftoonkaart is een kenmerkend visueel element – het verloop loopt van #d65620 (oranje) via violet, blauw, azuurblauw, turquoise en geel, waardoor een spectrum ontstaat dat het gehele merkpalet verenigt op één decoratief oppervlak. De iconen hebben een uniforme omtreklijndikte van 1,5–2 px in de varianten #232730 of #a9acb6, met een vulling voor actieve staten. Geen lifestylefoto's, geen abstracte 3D-renders – de terughoudendheid is bewust gekozen om de aandacht te vestigen op het product en de gegevens.
Palet
Merk
- Indigo Navy
#111a4a— De primaire merkkleur wordt gebruikt voor gevulde call-to-action-knoppen, actieve navigatiebalken, de header en het logo. De diepe violetblauwe kleur geeft de site een solide maar rijke zwarte tint; in combinatie met witte tekst creëert het de meest assertieve knop op de site. - Seafoam 600
#44b48b— Code- en datakleur is de huisstijlkleur voor JSON-sleutels, identificatoren en financiële waarden in codefragmenten. Het wordt ook gebruikt voor datapunten in grafieken en groeivisualisaties. - Seafoam 700
#167e6c— Een donkerdere tint zeegroen voor de omtrek, grafieklijnen en iconen binnen de datacontext. Dit zorgt ervoor dat de zeegroene schaal goed afsteekt tegen de donkere achtergrond. - Seafoam 400
#94efb7— Het gemarkeerde codefragment bevat tekenreekswaarden, URL's en API-eindpunten binnen codeblokken. De lichtste zeegroene kleur wordt weergegeven als een monospace lettertype met een groenige tint. - Deep Sea
#023247— De decoratieve omlijning en accentkleur van de grafiek zijn een rijke turquoise tint, die gebruikt wordt in SVG-illustraties en datavisualisaties, samen met de zeegroene kleurschaal.
Neutrale
- Midnight Ink
#011821— Donkere ondergrond en gemarkeerde tekst – achtergrond van de productkaart, hoofdtekst met hoog contrast. Neigt naar grijs met een koele blauwgroene tint; gebruikt als basis voor de donkere modus wanneer een gedeelte moet worden omgekeerd. - Slate Ink
#3b3e47— De subtitel en de hoofdtekst hebben een iets warmere tint dan Midnight Ink, en zijn gebruikt waar puur zwart te hard zou overkomen op het lichte canvas. - Steel
#7c7f88— De hoofdtekst en de linktekst worden gedomineerd door een gedempte kleur (245 keer gebruikt in de hoofdtekst). Een neutrale grijsblauwe kleur die als rustgevend wordt ervaren, nooit een flets beeld. - Fog
#a9acb6— Pictogramcontouren, tertiaire randen en plaatsaanduidingstekst. Een middengrijze kleur die de tekst scheidt zonder ermee te concurreren. - Mist
#cbcccf— De hoofdtekst – handtekeningen, disclaimers en kleine lettertjes – is leesbaar op een witte achtergrond, maar valt visueel minder op. - Silver Lining
#e3e4e8— Randen van kaarten, randen van invoervelden, scheidingslijnen. Deze structurele, subtiele kleur wordt gebruikt waar twee oppervlakken van elkaar gescheiden moeten worden zonder schaduwen.
Typografie
van 10 tot 60px · 10 stappen
- SuisseIntl — vervanging: Inter · overzichten 300, 400, 500, 600 · Het primaire lettertype – gebruikt voor alle koppen, hoofdtekst, knoppen, navigatie, links en kaarttekst. Het unieke geometrische schreefloze lettertype geeft Column een onderscheidende redactionele stijl, waarmee het zich onderscheidt van andere fintechbedrijven die uitsluitend met Inter werken. De letterdikte is 600 bij 52–60px voor koppen, 500 voor subkoppen, 400 voor hoofdtekst en 300 voor links met een lage nadruk.
- SuisseIntlMono — vervanging: JetBrains Mono · overzichten 400 · Een lettertype met vaste breedte, vergelijkbaar met SuisseIntl, gebruikt voor technische labels, API-identificaties en ingebedde gegevens in UI-elementen. Het behoudt dezelfde verhoudingen als SuisseIntl, waardoor tekst met vaste breedte en tekst met normale verhoudingen correct uitgelijnd zijn in gemengde contexten.
- SFMono — vervanging: Fira Code · overzichten 400 · Codefragmentweergave – weergegeven in JSON-voorbeelden en API-documentatieblokken. Een zeegroene tint wordt gebruikt om code visueel te onderscheiden van UI-tekst.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 8px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 72px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Column en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- dope.security — Middernachtterminal met paarse bakens
- Leonardo — Een omgekeerde redactionele galerij. Een museum met zwarte muren waar paarse krantenkoppen als wandinstallaties fungeren en door AI gegenereerde portretten in een dicht raster eronder hangen.
- VEED — Witte galeriewand met neon groene lichtknoppen
- Craft Docs — Een digitale collage voor scrapbooking. Het ontwerp doet denken aan een zorgvuldig samengesteld, tastbaar plakboek, waarin gestructureerde digitale notities gecombineerd worden met zachte, organische texturen.
- Letter — Een privégalerij met glinsterende objecten uit een depot. Een tentoonstellingsruimte met zwarte muren waar titels in schreefletters boven chromen sculpturen op de getinte wanden van de galerij zweven.
- Railway — De Kosmische Middernacht Express. Een kalme, spannende reis door de donkere, sterrenhemel, geleid door heldere signalen.
- Garden Eight — Een monumentaal redactioneel artikel op crèmekleurig papier. De kop met schreefletters van 215px staat alleen op warm perkament, omgeven door zwevende, sculpturale vormen en een negatieve ruimte die doet denken aan zeelucht – de pagina voelt meer aan als de omslag van een kunstmonografie dan als een dashboard.
- Steep — Analyse van schreeflettertypen op warm papier
- ElevenLabs — Een fotoreportage in warme crèmekleuren met subtiele titels. Een notitieboek in Bauhaus-stijl – gebroken wit papier, zwarte inkt en een enkel paars en oranje accent voor productpresentatie.
- Awesomic — Redactioneel zinkgaas met oranje accenten die aan confetti doen denken
- Monad — redactioneel technisch tijdschrift op warm perkament
- AI for Business — Brutalistische redactionele showroom in warme grijstinten