Cursor
Isang maginhawang pagawaan ng pergamino, na naliliwanagan ng mga nagbabagang uling
Gumagamit ang Cursor ng mainit at mala-pergamino na tipograpiya: isang kremang canvas, mala-tinta na itim na teksto, at isang nag-iisang maalab na orange na accent na nagpapagana ng mga link at seleksyon sa halip na pagpuno sa mga buton. Ang mga heading, na nakatakda sa CursorGothic sa bigat na 400, ay unti-unting bumababa ang pagitan ng mga letra habang lumalaki ang mga ito—nakamit ang awtoridad sa pamamagitan ng pagpipigil at manipis na bigat ng letra sa halip na katapangan. Ang mga ibabaw ay pinapanatiling patag at parang papel, na may manipis na mga hangganan at malambot, mainit na kulay abong mga anino; nananatiling malinaw ang mga sulok sa bigat na 4px sa buong teksto. Ang EB Garamond ay ginagamit nang pili para sa mga subheading at prosa, habang ang berkeleyMono ay humahawak ng code, mga tag, at metadata, na nagbibigay sa sistema ng isang personalidad sa tipograpiya na mas parang isang magasin sa panitikan kaysa sa isang SaaS dashboard.
Pinakamataas na lapad: 1300px sa gitna, 24px na margin. Pangunahing nabigasyon: 52px ang taas na transparent na header na may logo at marka ng teksto sa kaliwa, 4 na nakasentrong link ng nabigasyon, nakahanay sa kanan ang kumpol na "Login / Contact / Download". Hero: Header na nakahanay sa kaliwa + dobleng bloke ng call-to-action na may tekstong tumatakbo mula sa kaliwang itaas, pagkatapos ay isang full-width na mockup card ng produkto na sumasaklaw sa buong lapad ng pahina. Trust stripe: Isang pahalang na hilera ng 8 tile ng logo sa isang linya sa lapad ng seksyon. Ang mga feature section ay may salit-salit na teksto sa kaliwa at isang screenshot sa kanan sa isang layout na may dalawang hanay, bawat isa ay 50/50, na may patayong ritmo na 64-96px sa pagitan ng mga seksyon. Lahat ng feature screenshot ay mga window mockup na may magkaparehong estilo ng macOS. Footer: Apat na hanay na grid ng mga link na may marka ng brand sa kaliwa. Ang mga seksyon ay pinaghihiwalay ng sapat na espasyo sa halip na mga divider - ang cream canvas mismo ang nagbibigay ng paghihiwalay.
Ang mga screenshot ng produkto ang pangunahing tampok: malalaking mockup ng window ng macOS na nagpapakita ng Cursor IDE habang ginagamit: mga file tab, diff view, agent plan, terminal panel, at Slack/chat integration. Ang bawat mockup ng window ay naka-frame gamit ang #f2f1ed card na may malambot at mainit na contrast. Ang isang naka-mute na larawan ng landscape (mga bundok/disyerto horizon) ay lumalagpas sa pangunahing seksyon, na nagdaragdag ng init nang hindi nakikipagkumpitensya sa UI. Ang mga logo ng kliyente ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) ay ipinapakita bilang monochrome lettering sa loob ng mga Linen tile na hugis-pill. Walang mga litrato ng mga tao, ilustrasyon, o abstract na pandekorasyon na elemento ng graphic—lahat ng visual na bigat ay nakatuon sa UI at branding ng produkto. Ang mga icon ay manipis, monolinear glyph na puno ng #7a7974 Ash, hindi kailanman chromatic.
Paleta
Neutral
- Ink
#26251e— Pangunahing teksto, background ng pangunahing action button, teksto ng nabigasyon - isang mainit, halos itim na kulay, hindi kailanman puro #000 - Parchment
#f7f7f4— Ang background ng pahina, ang pangunahing canvas, ay isang mainit na kremang kulay na nagpapalambot sa contrast at lumilikha ng pakiramdam ng pag-imprenta gamit ang tinta sa halip na digital printing. - Bone
#f2f1ed— Ang mga karton na ibabaw at nakataas na mga lalagyan, na isang tono ang mas madilim kaysa sa canvas, ay lumilikha ng patong-patong at walang hangganang epektong "papel-sa-papel". - Linen
#e6e5e0— Banayad na neutral na palaman para sa mga butones sa madilim na ibabaw. - Stone
#cdcdc9— Manipis na mga hangganan, mga divider, mga banayad na partisyon – 1px na linya sa maayang mga tono - Mist
#a1a19f— Tekstong pantulong sa ikatlong antas, mga caption - sa pagitan ng naka-mute at pangalawang teksto.
Tipograpiya
mula 12 hanggang 72px · 6 na hakbang
- CursorGothic — kapalit: Inter · mga balangkas 400, 500 · Ang pangunahing font para sa user interface, mga heading, nabigasyon, body copy, at disenyo ng produkto. Ang mga heading na may 400-point weight at unti-unting bumababang espasyo ng mga letra (-0.005em sa 22px → -0.03em sa 72px) ay isang natatanging katangian ng font: ang mga heading ay hindi kailanman naka-bold. Ang mga function ng font na ss08, ss09, at tnum ay nagpapagana ng mga stylistic alternate at tabular figure.
- EB Garamond — kapalit: Iowan Old Style · mga balangkas 400, 500 · Isang editorial serif typeface para sa mga indibidwal na subheading, body text, at tabular data, ang CursorGothic ay nagdaragdag ng pampanitikang ugnayan sa interface.
- berkeleyMono — kapalit: ui-monospace · mga balangkas 400, 500 · Monospace - para sa mga code block, command line snippet, metadata, file path, at developer label - isang teknikal na wika.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8px |
| Radius ng buton | 4px |
| Radius ng card | 4px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 64-96px |
| Lapad ng pahina | 1300px |
Gagawa ang AI ng website mo sa estilong Cursor at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Amplemarket — Isang lugar ng trabaho na nasisinagan ng araw at puno ng confetti
- Getharvest — Isang mesa sa ginintuang oras – isang mainit na kremang canvas, mga puting postcard na nakasabit sa canvas, at isang nag-iisang matingkad na kulay kahel na apoy
- Drive Capital — Retro road trip poster sa mainit na papel
- Wealthsimple — Bodega na may linya ng kashmir at may ilaw sa gallery
- Huddle — Mga kard ng imbentaryo na may pastel sa kremang papel
- Fuser — Nakakalat na mga Polaroid sa dingding ng trabaho ng isang taga-disenyo
- Campsite — Isang workstation ng editor na nasisinagan ng araw - mainit na kremang papel na may iisang orange na intent stamp
- Redis Agency — Ang workshop sa editoryal, na bukas pagkatapos ng oras ng trabaho, ay isang madilim na lugar kung saan ang lahat ng gawaing branding ay ginagawa gamit ang mga serif font at isang pulang labanos.
- AI Product Generation — Studio ng potograpiyang editoryal sa puting papel - pamagat bilang pabalat, kulay kahel para sa pagbibigay-diin sa editoryal
- Getanchor — Mainit na kulay terracotta sa isang kupas na kremang background na kupas na sa araw
- Flatfile — Isang tahimik na talaarawan ng datos sa mainit na pergamino
- Inthememory — Isang arkitektural na drowing sa puting marmol na may mainit na liwanag. Isang tahimik at editoryal na silid ng datos kung saan ang malalim na turkesang tinta at mga kontrol na hugis tableta ay lumulutang sa ibabaw ng malulutong na puting ibabaw, na nababasag lamang ng isang talsik ng kulay kahel.