Framer
neon gallery sa kawang
Ang Framer naglihok isip hapit hingpit nga kangitngit—usa ka itom nga canvas diin ang sulud naglutaw sama sa usa ka neon sign sa usa ka gallery opening. Ang mga headline, nga gibutang sa GT Walsheim Medium nga adunay hugot nga line spacing nga 0.8–1.1 ug agresibo nga negatibo nga letra nga spacing (-0.04em sa 54px), nagmugna og usa ka mubo, pangdekorasyon nga typeface nga nagduso sa unahan imbes nga molingkod nga hapsay sa panid. Ang usa ka electric blue (#0099ff) naghatag sa tanan nga magamit nga mga accent—mga border, glow, mga icon, aktibo nga estado—samtang ang nahabilin nga interface nagpabilin nga achromatic, nga nagsalig sa malumo nga gray nga mga transition (#111, #171717, #242424) aron makamugna og giladmon gikan sa puro nga itom. Ang mga sangkap mobati nga gikonsiderar imbes nga pangdekorasyon: lingin nga radii nga 8–25px, nipis nga 1px nga mga border, gamay nga drop shadow, ug translucent nga mga nawong nga nagtugot sa haw-ang nga mosidlak.
Ang mga seksyon nga puno sa gilapdon molapas sa itom nga canvas, nga ang sulud limitado sa labing taas nga gilapdon nga ~1200px ug nakasentro sa sulod. Ang pangunang seksyon adunay usa ka header nga naka-align sa wala ug usa ka buton nga call-to-action (CTA), nga ang tuo nga kilid tinuyo nga gibiyaan nga blangko—dili simetriko, dili nakasentro. Ang mga seksyon nagpuli-puli tali sa mga layout nga teksto lamang (dako nga header + subtext) ug mga screenshot sa produkto. Ang seksyon nga "Comes with Framer" naggamit ug bungbong sa logo sa usa ka 4-kolum nga grid. Sa seksyon sa komunidad, ang screenshot sa produkto gibutang sulod sa usa ka nakasentro, puno sa gilapdon nga sudlanan nga adunay lingin nga mga kanto. Gamay ra ang nabigasyon—usa ka nipis nga top bar nga adunay logo sa wala ug mga link nga naka-align sa tuo, nga walay makita nga mga kontrol. Ritmo sa seksyon: hinungdanon nga 80px nga bertikal nga mga kal-ang tali sa mga seksyon, nga nagmugna og lahi nga mga isla sa sulud nga naglutaw sa kawang.
Ang mga screenshot sa user interface sa produkto mao ang nagdominar—gi-frame sa usa ka bintana nga sama sa chrome nga adunay mga tuldok sa traffic light, ang mga naka-embed nga screenshot sa app nahimong pangunang imahe. Ang mga logo, nga nagsilbing pruweba sa kalidad, gipresentar sa puti nga letra sa itom nga background nga adunay lapad nga espasyo. Walay mga litrato, ilustrasyon, o abstract graphics nga gigamit—ang biswal nga pinulongan mao ang produkto mismo, nga gipakita isip usa ka buhing interface. Estilo sa icon: minimalist, outlined, monochrome ug puti sa gagmay nga mga gidak-on. Densidad sa teksto: kasagaran teksto, nga adunay usahay dagkong mga tipik sa porma sa mga screenshot sa produkto. Ang biswal nga balanse sa espasyo klaro nga nagpabor sa tipograpiya kaysa mga imahe.
Paleta
Brand
- Vivid Violet
#0066ff— Ang pangunang buton sa aksyon mao lamang ang lugar sa interface diin gipakita ang usa ka solidong kolor nga background sa buton.
Neutral
- Bone
#ffffff— Mga pangunang ulohan, pangunang teksto sa ngitngit nga background, ang background sa butones mao lamang ang tinubdan sa kahayag. - Void
#000000— Ang page canvas, navigation background, card surfaces, icon fill—tanan kay walay kinutuban nga itom nga kolor nga mosuhop sa tanang dili importanteng sulod. - Graphite
#111111— Ang gipataas nga mga nawong sa kard usa ka lakang ibabaw sa haw-ang—dagko, magamit nga mga kard ug modal nga mga sudlanan. - Obsidian
#171717— Intermediate nga nawong para sa mga butones, dugang nga mga kard, UI fill - nagbulag sa mga interactive nga elemento gikan sa canvas. - Slate
#242424— Sa pag-hover, ang mga input field ug indented panel mao ang pinakahayag nga neutral shade sa dili pa mobalhin sa text format. - Ash
#333333— Lawom nga pagpuno para sa dili aktibo nga mga imahe sa background ug mga elemento sa istruktura.
Tipograpiya
gikan sa 12 ngadto sa 68px · 8 ka lakang
- sans-serif — kapuli: Inter · mga balangkas 400 · sans-serif - makita sa nakuha nga datos apan wala gihulagway sa AI.
- GT Walsheim — kapuli: Inter Tight · mga balangkas 500 · Ang font para sa mga heading ug title kay brand font. Kini agresibo nga gipamubo, nga ang line spacing kay 0.8–1.1 ug letter spacing kay -0.04em hangtod -0.05em sa 44–68px range. Dili kini usa ka pangdekorasyon nga elemento; ang geometric warmth sa GT Walsheim, inubanan sa estrikto nga metrics, nagmugna sa tingog sa sistema—masaligon, compact, ug medyo futuristic. Para sa susamang geometric expression, hunahunaa ang Inter Tight o Space Grotesk Bold.
- Inter Variable — kapuli: Inter · mga balangkas 400 · Ang pangunang teksto, nabigasyon, ug ikaduhang mga ulohan mao ang labing importante. Ang Inter Variable axis nagtugot sa hapsay nga interpolasyon sa mga gibug-aton. Ang pagsubay mogamay samtang modako ang gidak-on: gikan sa -0.001em ngadto sa 18px ug ngadto sa -0.027em ngadto sa 22px. Ang variable nga bersyon nagtugot sa hapsay nga mga micro-animation sa site. Kapuli: Inter ( Google) – usa ka halos parehas nga fallback.
Mga interval ug porma
| Katuyoan | Kahulugan |
|---|---|
| Densidad | aberids |
| Batakang lakang | 10px |
| Radius sa butones | 9999px |
| Radius sa kard | 20px |
| Mga anino | walay - mga utlanan imbes nga mga anino |
| Taliwala sa mga seksyon | 80px |
| Lapad sa panid | 1200px |
Ang AI motukod sa imong website sa estilo sa Framer 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
- Auros — Abyssal terminal nga adunay bioluminescent data ball
- Origin Financial — Usa ka galeriya sa tungang gabii sa hilom nga kaharuhay. Usa ka hilom, halos ngitngit nga lawak diin ang dagkong serif nga mga font ug pipila ka gisidlakan nga mga panel nga kolor nagmugna sa pagbati nga ang pinansya usa ka maampingong giorganisar nga obra maestra.
- Raycast — Sentro sa Komandante sa Tungang Gabii, Coral Neon
- Dimension — usa ka workstation nga nalamdagan sa kangitngit nga adunay mga panel nga bildo nga may frosted
- Reflect Notes — Ang mabituon nga violet nga kawanangan usa ka ngitngit nga obserbatoryo diin ang mga nota naglutaw sama sa mga konstelasyon batok sa talan-awon sa halos itom nga indigo nga kahaw-ang.
- Ameba — Ang control room sa tungang gabii – usa ka electric blue nga pulso sulod sa mga frosted glass panel
- Branding — Itom nga bungbong sa gallery, pula nga mga accent sa dugo - Ang dagkong puti nga mga font naglutaw sa usa ka itom nga canvas nga morag usa ka haw-ang, gibalda sa usa ka hayag nga pula nga accent ug talagsaong mga elemento sa dekorasyon nga mas morag signage sa gallery kaysa usa ka web interface.
- Harness — Mission Control sa tungang gabii nga adunay phosphorescent green accents
- Koto — Ang Obsidian Gallery sa tungang gabii. Usa ka hapit ngitngit nga entablado, diin ang bugtong mainit nga tinubdan sa kahayag mao ang usa ka dalag nga marka, ug ang kondensado nga tipo naglutaw sa halapad nga negatibo nga wanang sama sa mga poster sa eksibisyon.
- Ohzi — Usa ka nagdan-ag nga kubo nga nagbitay sa usa ka ngitngit nga galeriya
- Depot — Usa ka ngitngit nga server terminal. Usa ka halos itom nga developer console, nga adunay usa ka berde nga LED nga nagsenyas sa pagsugod sa trabaho, ug ang nahabilin nga user interface gipakita sa graphite.
- Maciej Zadykowicz — Ang Midnight Gallery uban sa kaleidoscopic mural niini usa ka halos itom nga bungbong sa studio diin ang usa ka mahayag, mabulukon nga typographic nga piraso sa arte nakadani sa atensyon samtang ang tanan nagpabilin nga hilom ug tinuyo.