Cursor
Bengkel perkamen sing nyaman, dipadhangi areng sing murub
Kursor nggunakake tipografi sing anget kaya perkamen: kanvas sing krem, teks ireng tinta, lan aksen oranye murub siji sing ngaktifake pranala lan pilihan tinimbang tombol isi. Judhul, sing disetel ing CursorGothic kanthi bobot 400, kanthi jarak huruf sing saya suda nalika ukurane saya tambah—otoritas digayuh liwat pengekangan lan bobot huruf sing tipis tinimbang kandel. Permukaan tetep rata lan kaya kertas, kanthi wates sing tipis lan bayangan abu-abu sing alus lan anget; pojok tetep cetha kanthi bobot 4px ing saindenging teks. EB Garamond digunakake kanthi selektif kanggo subjudul lan prosa, dene berkeleyMono nangani kode, tag, lan metadata, menehi sistem kepribadian tipografi sing luwih kaya majalah sastra tinimbang dashboard SaaS.
Ambane maksimal: 1300 piksel ing tengah, margin 24 piksel. Navigasi ndhuwur: header transparan dhuwure 52 piksel nganggo logo lan tandha teks ing sisih kiwa, 4 pranala navigasi ing tengah, kluster "Login / Contact / Download" sejajar ing sisih tengen. Pahlawan: Header sejajar kiwa + blok ajakan tumindak dobel nganggo teks sing mlaku saka sisih kiwa ndhuwur, banjur kertu mockup produk ambane lengkap sing nyakup kabeh ambane kaca. Garis kepercayaan: Siji baris horisontal saka 8 kothak logo ing siji baris ing ambane bagean. Bagean fitur teks selang-seling ing sisih kiwa lan gambar layar ing sisih tengen ing tata letak rong kolom, saben 50/50, kanthi irama vertikal 64-96 piksel antarane bagean. Kabeh gambar layar fitur minangka mockup jendhela kanthi gaya macOS sing identik. Footer: Kisi pranala papat kolom nganggo tandha merek ing sisih kiwa. Bagean-bagean kasebut dipisahake dening papan ambegan sing cukup tinimbang pembagi - kanvas krim dhewe nyedhiyakake pamisahan.
Cuplikan layar produk dadi pusat perhatian: mockup jendela macOS gedhe sing nampilake IDE Kursor sing lagi digunakake: tab file, tampilan diff, rencana agen, panel terminal, lan integrasi Slack/chat. Saben mockup jendela dibingkai nganggo kertu #f2f1ed kanthi kontras sing alus lan anget. Foto lanskap sing diredam (pegunungan/cakrawala ara-ara samun) ngluwihi bagean utama, nambah anget tanpa saingan karo UI. Logo klien ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) ditampilake minangka huruf monokrom ing kothak Linen sing bentuke pil. Ora ana foto wong, ilustrasi, utawa elemen grafis dekoratif abstrak—kabeh bobot visual fokus ing UI lan branding produk. Ikon tipis, glif monolinier sing diisi karo #7a7974 Ash, ora tau kromatik.
Palet
Netral
- Ink
#26251e— Teks utama, latar mburi tombol aksi utama, teks navigasi - warna anget, meh ireng, ora tau murni #000 - Parchment
#f7f7f4— Latar mburi kaca, kanvas utama, awujud warna krem anget sing ngalusake kontras lan nggawe rasa kaya nyetak tinta tinimbang nyetak digital. - Bone
#f2f1ed— Permukaan kardus lan wadhah sing ditinggikake, siji nada luwih peteng tinimbang kanvas, nggawe efek "kertas ing kertas" sing berlapis lan tanpa wates. - Linen
#e6e5e0— Isi netral entheng kanggo kancing ing permukaan peteng. - Stone
#cdcdc9— Wates tipis, pembagi, partisi alus – garis 1px kanthi nada anget - Mist
#a1a19f— Teks bantu tingkat katelu, katrangan - antarane teks sing dibisu lan teks sekunder.
Tipografi
saka 12 nganti 72px · 6 langkah
- CursorGothic — panggantos: Inter · garis besar 400, 500 · Font utama kanggo antarmuka panganggo, judhul, navigasi, isi teks, lan desain produk. Judhul kanthi bobot 400 poin lan jarak huruf sing saya suda (-0.005em ing 22px → -0.03em ing 72px) minangka fitur khas font: judhul ora tau kandel. Fungsi font ss08, ss09, lan tnum ngaktifake alternatif gaya lan gambar tabular.
- EB Garamond — panggantos: Iowan Old Style · garis besar 400, 500 · Minangka jinis huruf serif editorial kanggo subjudul individu, teks awak, lan data tabular, CursorGothic nambahake sentuhan sastra ing antarmuka.
- berkeleyMono — panggantos: ui-monospace · garis besar 400, 500 · Monospace - kanggo blok kode, cuplikan baris perintah, metadata, jalur file, lan label pangembang - basa teknis.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | padhet |
| Langkah dhasar | 8px |
| Radius tombol | 4px |
| Radius kertu | 4px |
| Bayangan | ora ana wates tinimbang bayangan |
| Antarane bagean | 64-96px |
| Ambane kaca | 1300px |
AI bakal mbangun situs web sampeyan nganggo gaya Cursor lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- Amplemarket — Panggonan kerja sing kebak srengenge kebak konfeti
- Getharvest — Meja ing jam emas – kanvas krem anget, kartu pos putih digantung ing kanvas, lan geni oranye padhang siji
- Drive Capital — Poster perjalanan darat retro ing kertas anget
- Wealthsimple — Gudang dilapisi kasmir kanthi lampu galeri
- Huddle — Kartu inventaris pastel ing kertas krim
- Fuser — Polaroid sing kasebar ing tembok kerja desainer
- Campsite — Stasiun kerja editor sing kena srengenge - kertas krim anget kanthi cap niat oranye siji
- Redis Agency — Lokakarya editorial, sing dibukak sawise jam kerja, minangka papan sing peteng ndhedhet ing ngendi kabeh karya branding ditindakake nganggo font serif lan siji lobak abang.
- AI Product Generation — Studio fotografi editorial ing kertas putih - judhul minangka sampul, warna oranye kanggo sorotan editorial
- Getanchor — Werna terakota anget ing latar mburi krim sing wis luntur amarga srengenge
- Flatfile — Buku harian data sing sepi ing perkamen anget
- Inthememory — Gambar arsitektur ing marmer putih kanthi cahya anget siji. Ruang data editorial sing sepi ing ngendi tinta biru toska tuwa lan kontrol awujud pil ngambang ing ndhuwur permukaan putih sing resik, mung dipecah dening cipratan oranye siji.