Column
un registru albastru închis sub răcoarea zorilor
Column folosește un albastru marin intens, instituțional, pe un fundal aproape alb: pagina se simte mai întâi ca o suprafață robustă pentru un produs bancar și apoi ca un loc de joacă pentru dezvoltatori. Culoarea mărcii nu este una singură, ci o pereche coordonată - albastru marin #111a4a pentru o structură serioasă, verde mentă #44b48b pentru date și cod - cu un singur portocaliu cald (#ec652b) rezervat suprafețelor cu accent intens, cum ar fi cardul Brex. Tipografia este dominată de SuisseIntl, un sans serif geometric utilizat pe întreaga gamă de grosimi de la 300 (linkuri) la 600 (afișaj), conferind sistemului un stil editorial rafinat, pe care majoritatea companiilor fintech îl lipsesc. Cardurile plutesc pe suprafețe albe mari, cu umbre subtile, stratificate; majoritatea elementelor de interfață sunt plate, adâncimea apărând doar acolo unde cardul ar trebui să se simtă ca un obiect fizic (widget-uri de tranzacții, machete de produse). Codul și datele financiare sunt prezentate monocrome, în culoarea spumei de mare - un semnal vizual că aceasta este o bancă construită de ingineri pentru ingineri.
Structura paginii este pe lățime completă, centrată, cu margini laterale late (64–15 cm pe desktop). Ecranul principal are un aspect divizat: titlul și îndemnurile la acțiune sunt aliniate la stânga la 25 cm, în timp ce un widget flotant pentru tranzacții este poziționat în dreapta la 55 cm, pe un fundal de hartă cu semitonuri. Sub ecranul principal, secțiunile alternează între alb (4 cm) și pânză deschisă la culoare (5 cm) cu margini verticale de 6 cm. Conținutul este aranjat conform unei singure grile de 6 coloane: blocurile de text ocupă 4 coloane (7 cm), cardurile de imagine/produs ocupă 5–6 coloane, cu o decalare deliberată față de grilă. Secțiunile care descriu caracteristicile utilizează un aspect pe 2 coloane: text în stânga, produs în dreapta. Secțiunea de statistici de încredere este împărțită într-o grilă de 4 coloane pe toată lățimea paginii. Logo-urile clienților sunt amplasate pe un singur rând centrat, cu margini de 48px. Subsolul are un aspect compact pe două coloane. Navigarea este o bară superioară fixă, transparentă, cu o înălțime de 62px, situată deasupra ecranului principal, cu un fundal neclar care se estompează în alb pe măsură ce derulați. Nu există o bară laterală sau un mega-meniu - meniurile derulante sunt simple meniuri în stil săgeată.
Stilul vizual este minimalist și funcțional — Column evită complet fotografia de stoc. Limbajul vizual este construit pe trei surse: (1) ilustrații de date SVG, în special o hartă a lumii punctată în semitonuri, redată cu un gradient de la indigo la portocaliu și turcoaz, creând o atmosferă de scară globală în spatele elementului principal; (2) machete de fișe de produs — widget-uri plutitoare care afișează soldurile conturilor, detaliile transferurilor și fragmente de cod JSON în fișe albe cu umbre dramatice; (3) vizualizări de diagrame — diagrame turcoaz în formă de lumânări sau bare cu linii subțiri de conectare utilizate în secțiunea de încredere/statistici. Harta în semitonuri este un element vizual caracteristic — gradientul său trece de la #d65620 (portocaliu) la violet, albastru, azuriu, turcoaz și galben, creând un spectru care unește întreaga paletă a mărcii pe o singură suprafață decorativă. Pictogramele au o grosime uniformă a conturului de 1,5–2 px în variantele #232730 sau #a9acb6, cu o umplere pentru stările active. Fără fotografii cu stilul de viață, fără randări 3D abstracte - reținerea este intenționată pentru a concentra atenția asupra produsului și datelor.
Paletă
Marca
- Indigo Navy
#111a4a— Culoarea principală a mărcii este utilizată pentru îndemnurile la acțiune umplute, stările de navigare active, antet și logo. Culoarea violet-albastru intens conferă site-ului o nuanță neagră solidă, dar bogată; combinată cu text alb, creează cel mai asertiv buton de pe site. - Seafoam 600
#44b48b— Culoarea codului și a datelor este culoarea de marcă pentru cheile JSON, identificatori și valori financiare din fragmentele de cod. De asemenea, este utilizată pentru punctele de date din diagrame și vizualizări ale creșterii. - Seafoam 700
#167e6c— O nuanță mai închisă de spumă de mare pentru contur, liniile diagramei și accentele pictogramelor din contextul datelor. Aceasta ancorează scara spumei de mare pe fundalul mai închis. - Seafoam 400
#94efb7— Fragmentul de cod evidențiat conține valori de tip șir de caractere, adrese URL și puncte finale API în cadrul blocurilor de cod. Culoarea cea mai deschisă, spumă de mare, se citește ca un font monospaționar cu o tentă verzuie. - Deep Sea
#023247— Conturul decorativ și culoarea de accent a diagramei sunt o culoare turcoaz bogată, utilizată în ilustrațiile SVG și vizualizările de date, împreună cu scala de culori spumă de mare.
Neutru
- Midnight Ink
#011821— Suprafață întunecată și text evidențiat – fundalul fișei de produs, text principal cu contrast ridicat. Mai aproape de gri, cu o tentă albastru-verzuie rece; folosit ca bază pentru modul întunecat atunci când o secțiune trebuie inversată. - Slate Ink
#3b3e47— Titlul secundar și textul principal sunt puțin mai calde decât în Midnight Ink, folosite acolo unde negrul pur ar părea prea dur pe pânza deschisă la culoare. - Steel
#7c7f88— Textul principal și textul linkului sunt dominate de o culoare estompată (folosită de 245 de ori în textul principal). O culoare gri-albăstruie neutră, percepută ca fiind calmă, niciodată o imagine decolorată. - Fog
#a9acb6— Contururi ale pictogramelor, chenarele terțiare și textul substituent. O culoare gri mediu care separă textul fără a concura cu acesta. - Mist
#cbcccf— Textul principal — semnături, declinarea responsabilității și textele cu litere mici — este lizibil pe fundal alb, dar mai puțin vizibil. - Silver Lining
#e3e4e8— Margini de card, margini de câmp de introducere, linii de demarcație. Această culoare structurală, subtilă, este utilizată acolo unde două suprafețe trebuie separate fără umbre.
Tipografie
de la 10 la 60px · 10 pași
- SuisseIntl — înlocuire: Inter · contururi 300, 400, 500, 600 · Font principal – folosit pentru toate titlurile, textul, butoanele, navigarea, linkurile și textul cardurilor. Fontul geometric unic sans serif conferă Column un stil editorial distinctiv, diferențiindu-l de alte companii fintech care lucrează exclusiv cu Inter-only. Ponderea este de 600 la 52–60px pentru titluri, 500 pentru subtitluri, 400 pentru textul și 300 pentru linkurile cu accentuare redusă.
- SuisseIntlMono — înlocuire: JetBrains Mono · contururi 400 · Un font monospațiat similar cu SuisseIntl, utilizat pentru etichete tehnice, identificatori API și date încorporate în elementele UI. Acesta menține aceleași proporții ca SuisseIntl, astfel încât textul monospațiat și cel proporțional se aliniază corect în contexte mixte.
- SFMono — înlocuire: Fira Code · contururi 400 · Afișarea fragmentului de cod – afișată în exemplele JSON și blocurile de documentație API. O nuanță de tip spumă de mare este utilizată pentru a distinge vizual codul de textul interfeței utilizator.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 8px |
| Raza butonului | 8px |
| Raza cardului | 8px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 72px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Column și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- dope.security — Terminal de la miezul nopții cu balize mov
- Leonardo — O galerie editorială inversată. Un muzeu cu pereți negri, unde titlurile mov acționează ca niște instalații murale, iar portretele generate de inteligență artificială atârnă într-o grilă densă dedesubt.
- VEED — Perete galerie alb cu butoane luminoase verzi neon
- Craft Docs — Un colaj digital pentru scrapbooking. Designul seamănă cu un album de scrapbooking atent și tactil, unde notițele digitale structurate se combină cu texturi moi și organice.
- Letter — O galerie privată cu artefacte strălucitoare din depozit. Un spațiu expozițional cu pereți negri, unde titluri cu serife plutesc deasupra sculpturilor cromate de pe pereții vopsiți ai galeriei.
- Railway — Expresul Cosmic de la Miezul Nopții. O călătorie calmă și palpitantă prin spațiul întunecat și luminat de stele, ghidată de semnale clare.
- Garden Eight — Un editorial monumental pe hârtie crem. Titlul cu serife de 215 pixeli stă singur pe un pergament cald, înconjurat de forme sculpturale plutitoare și spațiu negativ care amintește de aerul mării — pagina seamănă mai mult cu coperta unei monografii de artă decât cu un tablou de bord.
- Steep — Analiza fonturilor Serif pe hârtie caldă
- ElevenLabs — Un eseu foto în tonuri calde de crem, cu titluri subtile. Un caiet în stil Bauhaus — hârtie de culoarea cojii de ou, cerneală neagră și un singur accent violet și portocaliu pentru prezentarea produsului.
- Awesomic — Plasă de zinc editorială cu semne de punctuație portocalii care amintesc de confetti
- Monad — revistă tehnică editorială pe pergament cald
- AI for Business — Showroom editorial brutalist în tonuri calde de gri