Column
ein dunkelblaues Hauptbuch unter der kühlen Morgendämmerung
Column verwendet ein tiefes, institutionelles Marineblau auf nahezu weißem Hintergrund: Die Seite wirkt zunächst wie eine solide Oberfläche für Bankprodukte und erst dann wie eine Entwickler-Spielwiese. Die Markenfarbe ist nicht einheitlich, sondern ein abgestimmtes Farbpaar – Marineblau #111a4a für eine seriöse Struktur, Mintgrün #44b48b für Daten und Code – ergänzt durch ein warmes Orange (#ec652b), das für akzentuierte Flächen wie die Brex-Karte reserviert ist. Die Typografie wird von SuisseIntl dominiert, einer geometrischen serifenlosen Schrift, die in allen Schriftschnitten von 300 (Links) bis 600 (Display) verwendet wird und dem System einen eleganten, redaktionellen Stil verleiht, der den meisten Fintech-Unternehmen fehlt. Karten schweben auf großen weißen Flächen mit subtilen, abgestuften Schatten; die meisten Interface-Elemente sind flach, Tiefe entsteht nur dort, wo die Karte sich wie ein physisches Objekt anfühlen soll (Transaktions-Widgets, Produkt-Mockups). Der Code und die Finanzdaten werden monochrom in einem hellen Meerschaumton präsentiert – ein visuelles Signal, dass es sich um eine Bank von Ingenieuren für Ingenieure handelt.
Die Seite ist zentriert und in voller Breite mit breiten Seitenrändern (64–15 cm auf Desktop-Computern) gestaltet. Der Hauptbildschirm ist zweigeteilt: Überschrift und Handlungsaufforderungen sind linksbündig bei 25 cm ausgerichtet, während ein schwebendes Transaktions-Widget rechts bei 55 cm vor einem Halbtonkartenhintergrund positioniert ist. Unterhalb des Hauptbildschirms wechseln sich weiße (4 cm) und helle (5 cm) Abschnitte mit 6 cm breiten vertikalen Abständen ab. Der Inhalt ist in einem 6-spaltigen Raster angeordnet: Textblöcke belegen 4 Spalten (7 cm), Bild-/Produktkarten 5–6 Spalten, wobei sie bewusst vom Raster versetzt sind. Abschnitte mit Produktbeschreibungen verwenden ein 2-spaltiges Layout: Text links, Produkt rechts. Der Bereich mit den Vertrauensstatistiken ist in einem 4-spaltigen Raster über die gesamte Seitenbreite unterteilt. Kundenlogos befinden sich in einer zentrierten Zeile mit 48 Pixel breiten Abständen. Die Fußzeile ist kompakt zweispaltig gestaltet. Die Navigation besteht aus einer festen, 62 Pixel hohen, transparenten Leiste am oberen Bildschirmrand mit unscharfem Hintergrund, der beim Scrollen weiß wird. Es gibt keine Seitenleiste oder ein Mega-Menü – die Dropdown-Menüs sind einfache Pfeilmenüs.
Der visuelle Stil ist minimalistisch und funktional – Column verzichtet vollständig auf Stockfotos. Die Bildsprache basiert auf drei Elementen: (1) SVG-Datenillustrationen, insbesondere eine gepunktete Halbton-Weltkarte mit einem Farbverlauf von Indigo über Orange zu Türkis, die hinter dem Hauptelement eine globale Dimension erzeugt; (2) Produktkarten-Layouts – schwebende Widgets, die Kontostände, Überweisungsdetails und JSON-Code-Snippets in weißen Karten mit markanten Schatten anzeigen; (3) Diagrammvisualisierungen – türkisfarbene Candlestick- oder Balkendiagramme mit dünnen Verbindungslinien im Bereich „Vertrauen/Statistiken“. Die Halbtonkarte ist ein charakteristisches visuelles Element – ihr Farbverlauf von #d65620 (Orange) über Violett, Blau, Azurblau und Türkis bis Gelb erzeugt ein Spektrum, das die gesamte Markenpalette auf einer einzigen dekorativen Fläche vereint. Die Icons haben eine einheitliche Konturstärke von 1,5–2 Pixeln in den Varianten #232730 oder #a9acb6 und sind in aktiven Zuständen gefüllt. Keine Lifestyle-Fotos, keine abstrakten 3D-Renderings – diese Zurückhaltung ist beabsichtigt, um die Aufmerksamkeit auf das Produkt und die Daten zu lenken.
Palette
Marke
- Indigo Navy
#111a4a— Die primäre Markenfarbe wird für ausgefüllte Handlungsaufforderungen, aktive Navigationselemente, den Header und das Logo verwendet. Das tiefe Violettblau verleiht der Website einen satten, aber dennoch kräftigen Schwarzton; in Kombination mit weißer Schrift ergibt sich so der markanteste Button der Website. - Seafoam 600
#44b48b— Die Code- und Datenfarbe ist die Markenfarbe für JSON-Schlüssel, Kennungen und Finanzwerte in Code-Snippets. Sie wird auch für Datenpunkte in Diagrammen und Wachstumsvisualisierungen verwendet. - Seafoam 700
#167e6c— Ein dunklerer Meerschaumton für die Konturen, Diagrammlinien und Symbolakzente im Datenkontext. Dadurch hebt sich die Meerschaumskala vom dunkleren Hintergrund ab. - Seafoam 400
#94efb7— Der hervorgehobene Codeabschnitt enthält Zeichenketten, URLs und API-Endpunkte innerhalb von Codeblöcken. Die hellste seegrüne Farbe entspricht einer nichtproportionalen Schriftart mit einem grünlichen Schimmer. - Deep Sea
#023247— Die dekorative Kontur und Akzentfarbe des Diagramms ist ein sattes Türkis, das in SVG-Illustrationen und Datenvisualisierungen zusammen mit der seegrünen Farbskala verwendet wird.
Neutral
- Midnight Ink
#011821— Dunkle Oberfläche und hervorgehobener Text – Hintergrund der Produktkarte, kontrastreicher Haupttext. Eher grau mit einem kühlen Blaugrünstich; dient als Basis für den Dunkelmodus, wenn ein Abschnitt invertiert werden soll. - Slate Ink
#3b3e47— Der Untertitel und der Haupttext sind etwas wärmer als Midnight Ink, was dort zum Einsatz kommt, wo reines Schwarz auf dem hellen Hintergrund zu hart wirken würde. - Steel
#7c7f88— Der Haupttext und die verlinkten Texte sind in einer gedeckten Farbe gehalten (245 Mal im Haupttext verwendet). Ein neutrales Graublau, das Ruhe ausstrahlt und niemals blass wirkt. - Fog
#a9acb6— Symbolumrisse, Rahmen und Platzhaltertext. Ein mittleres Grau, das den Text abgrenzt, ohne mit ihm zu konkurrieren. - Mist
#cbcccf— Der Haupttext – Unterschriften, Haftungsausschlüsse und Kleingedrucktes – ist auf weißem Hintergrund lesbar, aber optisch weniger auffällig. - Silver Lining
#e3e4e8— Kartenränder, Eingabefeldränder, Trennlinien. Diese strukturelle, dezente Farbe wird dort eingesetzt, wo zwei Flächen ohne Schatten voneinander getrennt werden sollen.
Typografie
von 10 auf 60 Pixel · 10 Schritte
- SuisseIntl — Ersatz: Inter · Umrisse 300, 400, 500, 600 · Die primäre Schriftart wird für alle Überschriften, Fließtext, Schaltflächen, Navigationselemente, Links und Kartentexte verwendet. Die einzigartige geometrische serifenlose Schriftart verleiht Column einen unverwechselbaren redaktionellen Stil und hebt es von anderen Fintech-Unternehmen ab, die ausschließlich mit Inter-only arbeiten. Die Schriftstärke beträgt 600 Punkt bei 52–60 Pixeln für Überschriften, 500 Punkt für Unterüberschriften, 400 Punkt für Fließtext und 300 Punkt für Links mit geringer Hervorhebung.
- SuisseIntlMono — Ersatz: JetBrains Mono · Umrisse 400 · Eine nichtproportionale Schriftart ähnlich SuisseIntl, die für technische Bezeichnungen, API-Kennungen und eingebettete Daten in UI-Elementen verwendet wird. Sie behält die gleichen Proportionen wie SuisseIntl bei, sodass nichtproportionaler und proportionaler Text in gemischten Kontexten korrekt ausgerichtet werden.
- SFMono — Ersatz: Fira Code · Umrisse 400 · Code-Snippet-Anzeige – wird in JSON-Beispielen und API-Dokumentationsblöcken dargestellt. Ein hellgrüner Farbton dient zur visuellen Unterscheidung des Codes vom UI-Text.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 8px |
| Kartenradius | 8px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 72px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Column -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- dope.security — Mitternachtsterminal mit violetten Leuchtfeuern
- Leonardo — Eine umgekehrte Redaktionsgalerie. Ein Museum mit schwarzen Wänden, in dem violette Schlagzeilen als Wandinstallationen fungieren und KI-generierte Porträts in einem dichten Raster darunter hängen.
- VEED — Weiße Bilderwand mit neongrünen Leuchtknöpfen
- Craft Docs — Eine digitale Collage für Scrapbooking. Das Design ähnelt einem liebevoll gestalteten, haptischen Sammelalbum, in dem strukturierte digitale Notizen mit weichen, organischen Texturen kombiniert werden.
- Letter — Eine private Galerie mit schimmernden Artefakten aus dem Depot. Ein Ausstellungsraum mit schwarzen Wänden, in dem serifenbetonte Schlagzeilen über Chromskulpturen an den getönten Wänden der Galerie schweben.
- Railway — Der Kosmische Mitternachtsexpress. Eine ruhige, aufregende Reise durch den dunklen, sternenklaren Weltraum, geleitet von klaren Signalen.
- Garden Eight — Ein monumentaler Leitartikel auf cremefarbenem Papier. Die 215 Pixel große Serifenschrift steht allein auf warmem Pergament, umgeben von schwebenden skulpturalen Formen und Negativraum, der an Meeresluft erinnert – die Seite wirkt eher wie das Cover einer Kunstmonografie als wie ein Armaturenbrett.
- Steep — Analyse von Serifenschriften auf warmem Papier
- ElevenLabs — Eine Fotostrecke in warmen Cremetönen mit dezenten Überschriften. Ein Notizbuch im Bauhaus-Stil – eierschalenfarbenes Papier, schwarze Tinte und ein einzelner violetter und orangefarbener Akzent zur Produktpräsentation.
- Awesomic — Redaktionelles Zinkgewebe mit orangefarbenen Satzzeichen, die an Konfetti erinnern
- Monad — redaktionelles Fachjournal auf warmem Pergament
- AI for Business — Brutalistischer Editorial-Showroom in warmen Grautönen