Column
usa ka itom nga asul nga ledger ubos sa bugnaw nga kaadlawon
Ang kolum migamit og lawom, institusyonal nga navy blue sa halos puti nga background: ang panid daw sama sa usa ka lig-on nga nawong sa produkto sa bangko una ug usa ka dulaanan sa mga developer ikaduha. Ang kolor sa brand dili usa ra, apan usa ka koordinado nga pares—navy blue #111a4a para sa seryoso nga istruktura, mint green #44b48b para sa datos ug code—nga adunay usa ka mainit nga orange (#ec652b) nga gitagana para sa mga high-intensity accent surface sama sa Brex card. Ang tipograpiya gidominar sa SuisseIntl, usa ka geometric sans serif nga gigamit sa tibuok weight range gikan sa 300 (mga link) hangtod 600 (display), nga naghatag sa sistema og pino, editoryal nga estilo nga wala sa kadaghanan sa mga kompanya sa fintech. Ang mga kard naglutaw sa dagkong puti nga mga nawong nga adunay gamay, layered nga mga anino; kadaghanan sa mga elemento sa interface patag, nga ang giladmon makita lamang kung diin ang kard kinahanglan nga mobati nga usa ka pisikal nga butang (mga widget sa transaksyon, mga mockup sa produkto). Ang code ug pinansyal nga datos gipresentar sa monochrome, kolor sa seafoam—usa ka biswal nga senyales nga kini usa ka bangko nga gitukod sa mga inhenyero para sa mga inhenyero.
Ang istruktura sa panid kay tibuok gilapdon, nakasentro nga adunay lapad nga mga margin sa kilid (64–15 cm sa desktop). Ang pangunang screen kay usa ka split layout: ang headline ug mga call to action kay naka-left-align sa 25 cm, samtang ang usa ka floating transaction widget gibutang sa tuo sa 55 cm batok sa background sa halftone map. Ubos sa pangunang screen, ang mga seksyon nagpuli-puli tali sa puti (4 cm) ug light canvas (5 cm) nga adunay 6 cm nga bertikal nga mga gutter. Ang sulud gihan-ay sumala sa usa ka 6-column grid: ang mga text block nag-okupar og 4 ka kolum (7 cm), ang mga image/product card nag-okupar og 5–6 ka kolum, nga adunay tinuyo nga offset gikan sa grid. Ang mga seksyon nga naghulagway sa mga feature naggamit og 2-column layout: teksto sa wala, produkto sa tuo. Ang seksyon sa trust statistics gibahin ngadto sa 4-column grid sa tibuok gilapdon sa panid. Ang mga logo sa kustomer nahimutang sa usa ka single centered row nga adunay 48px nga mga gutter. Ang footer adunay compact two-column layout. Ang nabigasyon usa ka pirmi, 62px-kataas, transparent nga top bar ibabaw sa main screen nga adunay hanap nga background nga mopaputi samtang mag-scroll ka. Walay sidebar o mega-menu—ang mga dropdown kay yano nga mga menu nga sama sa pana.
Minimalist ug praktikal ang biswal nga estilo—Ang kolum hingpit nga naglikay sa stock photography. Ang biswal nga pinulongan gibase sa tulo ka tinubdan: (1) mga ilustrasyon sa datos sa SVG, ilabi na ang usa ka tuldok-tuldok nga mapa sa kalibutan sa halftone, nga gi-render nga adunay gradient gikan sa indigo ngadto sa orange ngadto sa turquoise, nga nagmugna og usa ka atmospera sa global scale sa luyo sa pangunang elemento; (2) mga layout sa product card—mga naglutaw nga widget nga nagpakita sa mga balanse sa account, mga detalye sa pagbalhin, ug mga snippet sa JSON code sa puti nga mga kard nga adunay dramatikong mga anino; (3) mga visualization sa tsart—turquoise candlestick o bar chart nga adunay nipis nga mga linya nga nagkonektar nga gigamit sa seksyon sa trust/statistics. Ang halftone map usa ka signature visual element—ang mga transisyon sa gradient niini gikan sa #d65620 (orange) hangtod sa violet, asul, azure, turquoise, ug dilaw, nga nagmugna og usa ka spectrum nga naghiusa sa tibuok paleta sa brand sa usa ka pangdekorasyon nga nawong. Ang mga icon adunay parehas nga gibag-on sa outline nga 1.5–2px sa mga variant sa #232730 o #a9acb6, nga adunay fill para sa mga aktibo nga estado. Walay mga litrato sa estilo sa kinabuhi, walay abstract 3D renders—ang pagpugong gituyo aron ma-pokus ang atensyon sa produkto ug datos.
Paleta
Brand
- Indigo Navy
#111a4a— Ang pangunang kolor sa brand gigamit para sa puno nga mga panawagan sa aksyon, aktibong mga estado sa nabigasyon, ang header, ug ang logo. Ang lawom nga kolor nga violet-blue naghatag sa site og lig-on apan dato nga itom nga kolor; inubanan sa puti nga teksto, kini nagmugna sa labing mapugsanon nga buton sa site. - Seafoam 600
#44b48b— Ang kolor sa code ug data mao ang kolor sa brand para sa mga JSON key, identifier, ug financial value sa mga code snippet. Gigamit usab kini para sa mga data point sa mga tsart ug growth visualization. - Seafoam 700
#167e6c— Usa ka mas ngitngit nga landong sa seafoam para sa outline, mga linya sa tsart, ug icon ang naghatag og gibug-aton sulod sa konteksto sa datos. Kini ang nag-angkla sa seafoam scale batok sa mas ngitngit nga background. - Seafoam 400
#94efb7— Ang gipasiugda nga tipik sa code adunay mga kantidad sa string, URL, ug mga endpoint sa API sulod sa mga bloke sa code. Ang pinakagaan nga kolor sa seafoam mabasa isip monospaced nga font nga adunay berde nga kolor. - Deep Sea
#023247— Ang pangdekorasyon nga outline ug accent nga kolor sa tsart usa ka dato nga turquoise nga kolor nga gigamit sa mga ilustrasyon sa SVG ug mga data visualization, uban sa seafoam color scale.
Neutral
- Midnight Ink
#011821— Ngitngit nga nawong ug gi-highlight nga teksto – background sa product card, high-contrast nga pangunang teksto. Mas duol sa abohon nga adunay bugnaw nga asul-berde nga kolor; gigamit isip base para sa dark mode kung ang usa ka seksyon kinahanglan nga balihon. - Slate Ink
#3b3e47— Ang ikaduhang titulo ug pangunang teksto medyo mas init kay sa Midnight Ink, nga gigamit diin ang purong itom daw sobra ra ka gahi sa nipis nga canvas. - Steel
#7c7f88— Ang pangunang teksto ug ang link text gidominar sa usa ka muted nga kolor (gigamit 245 ka beses sa pangunang teksto). Usa ka neyutral nga abohon-asul nga kolor nga giisip nga kalmado, dili gyud usa ka washed out nga imahe. - Fog
#a9acb6— Mga outline sa icon, mga tertiary border, ug placeholder text. Usa ka medium gray nga kolor nga nagbulag sa teksto nga dili makigkompetensya niini. - Mist
#cbcccf— Ang pangunang teksto—mga pirma, mga pagpasabot, ug gagmay nga mga letra—mabasa sa puti nga background, apan dili kaayo mamatikdan. - Silver Lining
#e3e4e8— Mga border sa card, mga border sa input field, mga linya sa pagbahin. Kini nga istruktural ug pino nga kolor gigamit diin ang duha ka nawong kinahanglan nga ibulag nga walay mga anino.
Tipograpiya
gikan sa 10 hangtod 60px · 10 ka lakang
- SuisseIntl — kapuli: Inter · mga balangkas 300, 400, 500, 600 · Pangunang font – gigamit para sa tanang heading, body text, mga butones, nabigasyon, mga link, ug card text. Ang talagsaon nga geometric sans serif naghatag sa Column og lahi nga estilo sa editoryal, nga nagpalahi niini gikan sa ubang mga kompanya sa fintech nga eksklusibo nga nagtrabaho uban sa Inter-only. Ang gibug-aton kay 600 sa 52–60px para sa mga heading, 500 para sa mga subheading, 400 para sa body text, ug 300 para sa mga link nga ubos ang gibug-aton.
- SuisseIntlMono — kapuli: JetBrains Mono · mga balangkas 400 · Usa ka monospaced nga font nga susama sa SuisseIntl, nga gigamit para sa mga teknikal nga label, mga API identifier, ug mga naka-embed nga datos sa mga elemento sa UI. Gipadayon niini ang parehas nga proporsyon sama sa SuisseIntl, busa ang monospaced ug proportional nga teksto husto nga nag-align sa sinagol nga mga konteksto.
- SFMono — kapuli: Fira Code · mga balangkas 400 · Pagpakita sa mga snippet sa code – gipakita sa mga ehemplo sa JSON ug mga bloke sa dokumentasyon sa API. Gigamit ang seafoam shade aron makita nga mailhan ang code gikan sa teksto sa UI.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 8px |
| Radius sa butones | 8px |
| Radius sa kard | 8px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 72px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Column ug mopuno niini
- Pun-a og mga produkto ug mga post pinaagi sa link - Instagram, TikTok, Facebook.
- Ibalhin ang sulod gikan sa imong daang site—ipiho lang ang adres.
- Modernong disenyo sa pinakamaayong makina: React ( Next.js) nga adunay server rendering ug SEO optimization nga andam na gamiton.
- Bug-os nga awtomatik nga pag-optimize sa SEO para sa mga resulta sa pagpangita ug mga rekomendasyon sa neural network.
Parehas nga mga estilo
- dope.security — Terminal sa tungang gabii nga adunay mga purpura nga suga
- Leonardo — Usa ka baliktad nga galeriya sa editoryal. Usa ka museyo nga gilibutan og itom nga bungbong diin ang mga purpura nga ulohan sa balita nagsilbing mga instalasyon sa bungbong, ug ang mga hulagway nga gihimo sa AI nagbitay sa usa ka baga nga grid sa ubos.
- VEED — Puti nga bungbong sa gallery nga adunay mga butones nga neon green nga suga
- Craft Docs — Usa ka digital collage para sa scrapbooking. Ang disenyo susama sa usa ka mahunahunaon ug mahikap nga scrapbook, diin ang istrukturado nga digital nga mga nota gihiusa uban sa humok ug organikong mga tekstura.
- Letter — Usa ka pribadong galeriya nga nagpakita sa naggilakgilak nga mga artifact gikan sa bodega. Usa ka luna sa eksibisyon nga adunay itom nga bungbong diin ang mga serifed headline naglutaw ibabaw sa mga eskultura nga chrome sa mga tinted nga bungbong sa galeriya.
- Railway — Ang Cosmic Midnight Express. Usa ka malinawon ug kulbahinam nga panaw latas sa ngitngit ug gisidlakan sa mga bituon nga kawanangan, gigiyahan sa klaro nga mga senyales.
- Garden Eight — Usa ka dakong editoryal sa krema nga papel. Ang 215px nga serif nga ulohan nag-inusarang gibutang sa init nga pergamino, gilibutan sa naglutaw nga mga eskultura ug negatibo nga wanang nga nagpahinumdom sa hangin sa dagat—ang panid mas morag hapin sa usa ka art monograp kaysa usa ka dashboard.
- Steep — Pag-analisar sa mga Serif Font sa Mainit nga Papel
- ElevenLabs — Usa ka photo essay sa init nga krema nga mga kolor nga adunay malumo nga mga ulohan sa balita. Usa ka notebook nga istilo sa Bauhaus—papel nga kolor sama sa kabhang sa itlog, itom nga tinta, ug usa ka purpura ug kahel nga accent para sa display sa produkto.
- Awesomic — Editoryal nga zinc mesh nga adunay orange nga mga marka sa bantas nga nagpahinumdom sa confetti
- Monad — teknikal nga dyornal sa editoryal bahin sa mainit nga pergamino
- AI for Business — Brutalist nga showroom sa editoryal sa mainit nga abuhon nga mga tono