Column
en mørkeblå hovedbog under den kølige daggry
Column bruger en dyb, institutionel marineblå farve på en næsten hvid baggrund: siden føles først som en robust overflade for bankprodukter og derefter som en legeplads for udviklere. Brandfarven er ikke én farve, men et koordineret par – marineblå #111a4a for seriøs struktur, mintgrøn #44b48b for data og kode – med en enkelt varm orange (#ec652b) reserveret til højintensive accentoverflader som Brex-kortet. Typografien er domineret af SuisseIntl, en geometrisk sans serif, der bruges på tværs af hele vægtområdet fra 300 (links) til 600 (display), hvilket giver systemet en raffineret, redaktionel stil, som de fleste fintech-virksomheder mangler. Kort flyder på store hvide overflader med subtile, lagdelte skygger; de fleste grænsefladeelementer er flade, med dybde, der kun vises, hvor kortet skal føles som et fysisk objekt (transaktionswidgets, produktmockups). Koden og de finansielle data præsenteres i monokrom, havskumfarvet – et visuelt signal om, at dette er en bank bygget af ingeniører til ingeniører.
Sidestrukturen er i fuld bredde, centreret med brede sidemargener (64-15 cm på desktop). Hovedskærmen har et delt layout: overskriften og opfordringer til handling er venstrejusteret ved 25 cm, mens en flydende transaktionswidget er placeret til højre ved 55 cm mod en rasterkortbaggrund. Under hovedskærmen skifter sektionerne mellem hvidt (4 cm) og lyst lærred (5 cm) med 6 cm lodrette marginer. Indholdet er arrangeret i henhold til et enkelt gitter med 6 kolonner: tekstblokke optager 4 kolonner (7 cm), billed-/produktkort optager 5-6 kolonner med en bevidst forskydning fra gitteret. Sektioner, der beskriver funktioner, bruger et layout med 2 kolonner: tekst til venstre, produkt til højre. Afsnittet om tillidsstatistik er opdelt i et gitter med 4 kolonner på tværs af sidens fulde bredde. Kundelogoer er placeret i en enkelt centreret række med 48px marginer. Sidefoden har et kompakt layout med to kolonner. Navigationen er en fast, 62px høj, gennemsigtig topbjælke over hovedskærmen med en sløret baggrund, der falmer til hvid, når du ruller. Der er ingen sidebjælke eller megamenu – rullemenuerne er simple pilelignende menuer.
Den visuelle stil er minimalistisk og funktionel – Kolonner undgår fuldstændigt stockfotografier. Det visuelle sprog er bygget på tre kilder: (1) SVG-dataillustrationer, specifikt et prikket halvtoneverdenskort, gengivet med en gradient fra indigo til orange til turkis, hvilket skaber en atmosfære af global skala bag hovedelementet; (2) produktkortlayouts – flydende widgets, der viser kontosaldi, overførselsdetaljer og JSON-kodestykker i hvide kort med dramatiske skygger; (3) diagramvisualiseringer – turkise lysestage- eller søjlediagrammer med tynde forbindelseslinjer, der bruges i tillids-/statistiksektionen. Halvtonekortet er et signaturvisuelt element – dets gradientovergange går fra #d65620 (orange) til violet, blå, azurblå, turkis og gul, hvilket skaber et spektrum, der forener hele brandpaletten på en enkelt dekorativ overflade. Ikonerne har en ensartet konturtykkelse på 1,5-2px i #232730- eller #a9acb6-varianterne, med en udfyldning for aktive tilstande. Ingen livsstilsfotos, ingen abstrakte 3D-gengivelser – tilbageholdenheden er bevidst om at fokusere opmærksomheden på produktet og dataene.
Palet
Mærke
- Indigo Navy
#111a4a— Den primære brandfarve bruges til udfyldte opfordringer til handling, aktive navigationstilstande, headeren og logoet. Den dybe violetblå farve giver webstedet en solid, men fyldig sort nuance; kombineret med hvid tekst skaber den den mest selvsikre knap på webstedet. - Seafoam 600
#44b48b— Kode- og datafarve er brandfarven for JSON-nøgler, identifikatorer og økonomiske værdier i kodestykker. Den bruges også til datapunkter i diagrammer og vækstvisualiseringer. - Seafoam 700
#167e6c— En mørkere nuance af havskum til omridset, diagramlinjer og ikonaccenter i datakonteksten. Dette forankrer havskumskalaen mod den mørkere baggrund. - Seafoam 400
#94efb7— Det fremhævede kodefragment indeholder strengværdier, URL'er og API-slutpunkter i kodeblokke. Den lyseste havskumfarve læses som en monospaced-skrifttype med et grønligt skær. - Deep Sea
#023247— Diagrammets dekorative kontur- og accentfarve er en rig turkis farve, der bruges i SVG-illustrationer og datavisualiseringer, sammen med havskumsfarveskalaen.
Neutral
- Midnight Ink
#011821— Mørk overflade og fremhævet tekst – produktkortbaggrund, hovedtekst med høj kontrast. Tættere på grå med et køligt blågrønt skær; bruges som base for mørk tilstand, når en sektion skal inverteres. - Slate Ink
#3b3e47— Den sekundære titel og hovedteksten er lidt varmere end Midnight Ink, der bruges hvor ren sort ville virke for hård på det lyse lærred. - Steel
#7c7f88— Hovedteksten og linkteksten er domineret af en dæmpet farve (anvendt 245 gange i hovedteksten). En neutral gråblå farve, der opfattes som rolig, aldrig et udvasket billede. - Fog
#a9acb6— Ikonkonturer, tertiære rammer og pladsholdertekst. En mellemgrå farve, der adskiller teksten uden at konkurrere med den. - Mist
#cbcccf— Hovedteksten – underskrifter, ansvarsfraskrivelser og småskrift – er læselig på en hvid baggrund, men visuelt mindre synlig. - Silver Lining
#e3e4e8— Kortgrænser, inputfeltgrænser, skillelinjer. Denne strukturelle, diskrete farve bruges, hvor to overflader skal adskilles uden skygger.
Typografi
fra 10 til 60px · 10 trin
- SuisseIntl — udskiftning: Inter · konturer 300, 400, 500, 600 · Primær skrifttype – bruges til alle overskrifter, brødtekst, knapper, navigation, links og korttekst. Den unikke geometriske sans serif giver Column en karakteristisk redaktionel stil, der adskiller den fra andre fintech-virksomheder, der udelukkende arbejder med Inter-only. Vægten er 600 ved 52-60px for overskrifter, 500 for underoverskrifter, 400 for brødtekst og 300 for links med lav vægtning.
- SuisseIntlMono — udskiftning: JetBrains Mono · konturer 400 · En skrifttype med fast linjeafstand svarende til SuisseIntl, der bruges til tekniske etiketter, API-identifikatorer og indlejrede data i brugergrænsefladeelementer. Den opretholder de samme proportioner som SuisseIntl, så tekst med fast linjeafstand og proportional tekst justeres korrekt i blandede kontekster.
- SFMono — udskiftning: Fira Code · konturer 400 · Visning af kodestykker – vises i JSON-eksempler og API-dokumentationsblokke. En havskumsfarve bruges til visuelt at skelne kode fra UI-tekst.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | gennemsnit |
| Grundlæggende trin | 8px |
| Knapradius | 8px |
| Kortradius | 8px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 72px |
| Sidebredde | 1200px |
AI vil bygge din hjemmeside i Column -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- dope.security — Midnatsterminal med lilla beacons
- Leonardo — Et omvendt redaktionelt galleri. Et museum med sorte vægge, hvor lilla overskrifter fungerer som væginstallationer, og AI-genererede portrætter hænger i et tæt gitter nedenunder.
- VEED — Hvid gallerivæg med neongrønne lysknapper
- Craft Docs — En digital collage til scrapbooking. Designet minder om en tankevækkende, taktil scrapbog, hvor strukturerede digitale noter kombineres med bløde, organiske teksturer.
- Letter — Et privat galleri med glitrende artefakter fra opbevaring. Et udstillingsrum med sorte vægge, hvor serif-overskrifter svæver over kromskulpturer på galleriets tonede vægge.
- Railway — Den Kosmiske Midnatsekspressen. En rolig, spændende rejse gennem det mørke, stjerneklare rum, guidet af klare signaler.
- Garden Eight — En monumental leder på cremefarvet papir. Overskriften med serif på 215px sidder alene på varmt pergament, omgivet af svævende skulpturelle former og negativt rum, der minder om havluft – siden føles mere som forsiden af en kunstmonografi end et dashboard.
- Steep — Analyse af serif-skrifttyper på varmt papir
- ElevenLabs — Et fotoessay i varme cremefarvede toner med diskrete overskrifter. En notesbog i Bauhaus-stil – æggeskalsfarvet papir, sort blæk og en enkelt lilla og orange accent til produktpræsentation.
- Awesomic — Redaktionelt zinknet med orange tegnsætningstegn, der minder om konfetti
- Monad — redaktionelt teknisk tidsskrift på varmt pergament
- AI for Business — Brutalistisk redaktionelt showroom i varme grå toner