Column
in donkerblau grutboek ûnder de koele moarnsiten
Kolom brûkt in djip, ynstitúsjoneel marineblau op in hast wite eftergrûn: de side fielt earst as in robuust bankproduktoerflak en dan as in ûntwikkeldersspielplak. De merkkleur is net ien kleur, mar in koördinearre pear - marineblau #111a4a foar serieuze struktuer, mintgrien #44b48b foar gegevens en koade - mei in inkele waarme oranje (#ec652b) reservearre foar aksintoerflakken mei hege yntensiteit lykas de Brex-kaart. De typografy wurdt dominearre troch SuisseIntl, in geometryske sans serif dy't brûkt wurdt oer it heule gewichtsberik fan 300 (keppelings) oant 600 (werjefte), wêrtroch it systeem in ferfine, redaksjonele styl krijt dy't de measte fintech-bedriuwen misse. Kaarten driuwe op grutte wite oerflakken mei subtile, laachske skaden; de measte ynterface-eleminten binne flak, mei djipte dy't allinich ferskynt wêr't de kaart as in fysyk objekt fiele moat (transaksjewidgets, produktmodellen). De koade en finansjele gegevens wurde presintearre yn monochroom, seeskuimkleurich - in fisueel sinjaal dat dit in bank is boud troch yngenieurs foar yngenieurs.
De sidestruktuer is folsleine breedte, sintraal mei brede sydmarzjes (64–15 sm op buroblêd). It haadskerm is in split-layout: de koptekst en oprop ta aksje binne lofts útrjochte op 25 sm, wylst in driuwende transaksjewidget oan 'e rjochterkant pleatst is op 55 sm tsjin in healtoankaartachtergrûn. Under it haadskerm wikselje seksjes ôf tusken wyt (4 sm) en ljocht doek (5 sm) mei 6 sm fertikale goten. Ynhâld is ynrjochte neffens in inkele raster fan 6 kolommen: tekstblokken nimme 4 kolommen yn (7 sm), ôfbyldings-/produktkaarten nimme 5–6 kolommen yn, mei in bewuste offset fan it raster. Seksjes dy't funksjes beskriuwe, brûke in yndieling fan 2 kolommen: tekst oan 'e lofterkant, produkt oan 'e rjochterkant. De seksje fertrouwensstatistiken is ferdield yn in raster fan 4 kolommen oer de folsleine breedte fan 'e side. Klantlogo's binne pleatst yn in inkele sintraal rige mei 48px goten. De fuottekst hat in kompakte yndieling fan twa kolommen. De navigaasje is in fêste, 62px hege, transparante boppeste balke boppe it haadskerm mei in wazige eftergrûn dy't nei wyt ferdwynt as jo scrolle. Der is gjin sydbalke of megamenu - de útklapmenu's binne ienfâldige pylkstylmenu's.
De fisuele styl is minimalistysk en funksjoneel - Kolom foarkomt stockfotografy folslein. De fisuele taal is boud op trije boarnen: (1) SVG-gegevensyllustraasjes, spesifyk in stippele healtone wrâldkaart, werjûn mei in gradiënt fan indigo nei oranje nei turkoois, wêrtroch in sfear fan wrâldwide skaal efter it haadelemint ûntstiet; (2) produktkaartlayouts - driuwende widgets dy't akkountsaldo's, oerdrachtdetails en JSON-koadefragminten werjaan yn wite kaarten mei dramatyske skaden; (3) diagramvisualisaasjes - turkooizen kandelaar- of staafdiagrammen mei tinne ferbiningslinen dy't brûkt wurde yn 'e fertrouwen/statistikenseksje. De healtonekaart is in karakteristike fisuele elemint - syn gradiënt giet oer fan #d65620 (oranje) fia fiolet, blau, azuer, turkoois en giel, wêrtroch in spektrum ûntstiet dat it heule merkpalet ferieniget op ien dekoratyf oerflak. De ikoanen hawwe in unifoarme omtrekdikte fan 1,5-2px yn 'e #232730- of #a9acb6-farianten, mei in opfoling foar aktive steaten. Gjin libbensstylfoto's, gjin abstrakte 3D-renders - de beheining is bewust om de oandacht te rjochtsjen op it produkt en de gegevens.
Palet
Merk
- Indigo Navy
#111a4a— De primêre merkkleur wurdt brûkt foar ynfolde oprop ta aksje, aktive navigaasjestaten, de koptekst en it logo. De djip fioletblauwe kleur jout de side in solide, mar rike swarte tint; yn kombinaasje mei wite tekst makket it de meast assertive knop op 'e side. - Seafoam 600
#44b48b— Koade- en gegevenskleur is de merkkleur foar JSON-kaaien, identifikaasjes en finansjele wearden yn koadefragminten. It wurdt ek brûkt foar gegevenspunten yn diagrammen en groeivisualisaasjes. - Seafoam 700
#167e6c— In tsjusterder skaad fan seefoam foar de omtrek, diagramlinen en ikoanaksinten binnen de gegevenskontekst. Dit ferankert de seefoamskaal tsjin de tsjusterder eftergrûn. - Seafoam 400
#94efb7— It markearre koadefragmint befettet tekenrigewearden, URL's en API-eindpunten binnen koadeblokken. De lichtste seefoamkleur lêst as in monospaced lettertype mei in grienige tint. - Deep Sea
#023247— De dekorative omtrek en aksintkleur fan 'e kaart is in rike turkooizen kleur dy't brûkt wurdt yn SVG-yllustraasjes en gegevensvisualisaasjes, tegearre mei de seeskuimkleurskaal.
Neutraal
- Midnight Ink
#011821— Tsjuster oerflak en markearre tekst - produktkaart eftergrûn, haadtekst mei hege kontrast. Tichter by griis mei in koele blau-griene tint; brûkt as basis foar tsjustere modus as in seksje omkeard wurde moat. - Slate Ink
#3b3e47— De sekundêre titel en haadtekst binne wat waarmer as Midnight Ink, brûkt dêr't suver swart te hurd lykje soe op it ljochte doek. - Steel
#7c7f88— De haadtekst en keppelingstekst wurde dominearre troch in gedempte kleur (245 kear brûkt yn 'e haadtekst). In neutrale griisblauwe kleur dy't as rêstich waarnommen wurdt, nea in útwosken byld. - Fog
#a9acb6— Ikoanomtrekken, tertiêre rânen en plakferfangende tekst. In middelgrize kleur dy't de tekst skiedt sûnder dermei te konkurrearjen. - Mist
#cbcccf— De haadtekst - hantekeningen, disclaimers en lytse letters - is lêsber op in wite eftergrûn, mar fisueel minder opfallend. - Silver Lining
#e3e4e8— Kaartgrinzen, ynfierfjildgrinzen, skiedingslinen. Dizze strukturele, subtile kleur wurdt brûkt wêr't twa oerflakken sûnder skaden skieden wurde moatte.
Typografy
fan 10 oant 60px · 10 stappen
- SuisseIntl — ferfanging: Inter · sketsen 300, 400, 500, 600 · Primêr lettertype - brûkt foar alle kopteksten, lichemstekst, knoppen, navigaasje, keppelings en kaarttekst. De unike geometryske sans serif jout Column in ûnderskiedende redaksjonele styl, wêrtroch it him ûnderskiedt fan oare fintech-bedriuwen dy't allinnich mei Inter-only wurkje. It gewicht is 600 by 52–60px foar kopteksten, 500 foar subkopteksten, 400 foar lichemstekst en 300 foar keppelings mei lege klam.
- SuisseIntlMono — ferfanging: JetBrains Mono · sketsen 400 · In monospaced lettertype fergelykber mei SuisseIntl, brûkt foar technyske labels, API-identifiers en ynbêde gegevens yn UI-eleminten. It hâldt deselde proporsjes as SuisseIntl, sadat monospaced en proporsjonele tekst korrekt útrjochte wurde yn mingde konteksten.
- SFMono — ferfanging: Fira Code · sketsen 400 · Werjefte fan koadefragminten - werjûn yn JSON-foarbylden en API-dokumintaasjeblokken. In seeskuimskaad wurdt brûkt om koade fisueel te ûnderskieden fan UI-tekst.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 8px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 72px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Column -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- dope.security — Middernachtsterminal mei pearse beacons
- Leonardo — In omkearde redaksjegalery. In museum mei swarte muorren dêr't pearse krantekoppen fungearje as muorreynstallaasjes, en troch AI generearre portretten yn in ticht raster hjirûnder hingje.
- VEED — Wite galerymuorre mei neon griene ljochtknoppen
- Craft Docs — In digitale kollaazje foar scrapbooking. It ûntwerp liket op in trochtochte, taktile scrapbooking, dêr't strukturearre digitale notysjes kombinearre wurde mei sêfte, organyske tekstueren.
- Letter — In priveegalery mei skimerjende artefakten út opslach. In eksposysjeromte mei swarte muorren dêr't serifearre krantekoppen boppe chrome bylden op 'e getinte muorren fan 'e galery sweve.
- Railway — De Kosmyske Middernachtekspres. In rêstige, spannende reis troch tsjustere, stjerreferljochte romte, begelaat troch dúdlike sinjalen.
- Garden Eight — In monumintaal redaksjewurk op crèmekleurich papier. De 215px serif-koptekst sit allinnich op waarm perkament, omjûn troch driuwende byldhouwurkfoarmen en negative romte dy't tinken docht oan seelucht - de pagina fielt mear as de omslach fan in keunstmonografy dan in dashboard.
- Steep — Analyse fan Serif-lettertypen op waarm papier
- ElevenLabs — In foto-essay yn waarme crèmekleurige toanen mei subtile koppen. In notebook yn Bauhaus-styl - aai-skulpkleurich papier, swarte inket, en in inkele pearse en oranje aksint foar produktwerjefte.
- Awesomic — Redaksjoneel sinkgaas mei oranje leestekens dy't tinken dogge oan konfetti
- Monad — redaksjoneel technysk tydskrift op waarm perkament
- AI for Business — Brutalistyske redaksjeshowroom yn waarme grize toanen