Telegram, WhatsApp+380637610482
Valeri Danjuk
Valeri DanjukkehittäjäTekoälytyökalujen kehittäminen yrityksille. Korkealaatuinen. Edullinen.Kirjoita Telegramissa
Cursor — esikatselu sivustosta tässä tyylissä

Cursor

Viihtyisä pergamenttipaja, kytevien hiilien valaisema

Cursor käyttää lämmintä, pergamenttimaista typografiaa: kermanväristä kangasta, musteenmustaa tekstiä ja yhtä tulisen oranssia aksenttia, joka aktivoi linkkejä ja valintoja painikkeiden täyttämisen sijaan. CursorGothicissa 400-painoisilla otsikoilla on vähitellen pienenevä kirjainväli niiden koon kasvaessa – auktoriteetti saavutetaan hillityllä tekstillä ja ohuilla kirjainpainoilla pikemminkin kuin rohkeudella. Pinnat pidetään tasaisina ja paperimaisina, ohuilla reunoilla ja pehmeillä, lämpimin harmailla varjoilla; kulmat pysyvät terävinä 4 pikselin painolla koko tekstin ajan. EB Garamondia käytetään valikoivasti alaotsikoissa ja proosassa, kun taas berkeleyMono käsittelee koodia, tunnisteita ja metatietoja, mikä antaa järjestelmälle typografisen persoonallisuuden, joka tuntuu enemmän kirjallisuuslehdeltä kuin SaaS-kojelaudalta.

Enimmäisleveys: 1300 pikseliä keskitettynä, 24 pikselin marginaali. Yläosan navigointi: 52 pikselin korkea läpinäkyvä otsikko, jossa logo ja tekstimerkki vasemmalla, 4 keskitettyä navigointilinkkiä, "Kirjaudu sisään / Ota yhteyttä / Lataa" -ryppääs tasattu oikealle. Pääosio: Vasemmalle tasattu otsikko + kaksinkertainen toimintakehotuslohko, jossa teksti kulkee vasemmalta yläkulmalta, sitten koko leveä tuotemallikortti, joka ulottuu koko sivun leveydelle. Luottamusraita: Yksi vaakasuora rivi, jossa on 8 logoruutua yhdellä rivillä osion leveyden poikki. Ominaisuudet osioissa teksti vasemmalla ja kuvakaappaus oikealla vuorottelevat kaksisarakkeisessa asettelussa, kukin 50/50, osioiden välillä 64–96 pikselin pystysuuntaisella rytmillä. Kaikki ominaisuuskuvakaappaukset ovat ikkunamalleja, joissa on identtinen macOS-tyyli. Alatunniste: Neljäsarakkeinen linkkiruudukko, jossa brändimerkki on vasemmalla. Osiot on erotettu toisistaan runsaasta hengähdystauosta eikä jakajista - kermanvärinen kangas itsessään tarjoaa erottelun.

Tuotteen kuvakaappaukset ovat keskipisteenä: suuret macOS-ikkunamallit, jotka esittelevät Cursor IDE:tä toiminnassa: tiedostovälilehdet, vertailunäkymät, agenttisuunnitelmat, päätepaneelit ja Slack/chat-integraatio. Jokaisen ikkunamallin ympärillä on pehmeän lämmin kontrastin omaava #f2f1ed-kortti. Vaimennettu maisemakuva (vuoret/aavikon horisontti) ulottuu pääosan ulkopuolelle ja lisää lämpöä kilpailematta käyttöliittymän kanssa. Asiakaslogot ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) esitetään yksivärisinä kirjaimina pillerinmuotoisten Linen-laattojen sisällä. Ihmisvalokuvia, kuvituksia tai abstrakteja koristeellisia graafisia elementtejä ei ole – kaikki visuaalinen painoarvo keskittyy tuotteen käyttöliittymään ja brändäykseen. Kuvakkeet ovat ohuita, monolineaarisia symboleja, jotka on täytetty #7a7974 Ash -sävyllä, eivätkä koskaan kromaattisia.

Paletti

Neutraali

  • Ink #26251e — Ensisijainen teksti, ensisijaisen toimintopainikkeen tausta, navigointiteksti - lämmin, lähes musta sävy, ei koskaan puhdas #000
  • Parchment #f7f7f4 — Sivun tausta, pääkangas, on lämpimän kermanvärinen, joka pehmentää kontrastia ja luo vaikutelman mustepainatuksesta digitaalisen painatuksen sijaan.
  • Bone #f2f1ed — Pahvipinnat ja koholla olevat, yhden sävyn kanvasta tummemmat astiat luovat kerroksellisen, reunattoman "paperi paperilla" -efektin.
  • Linen #e6e5e0 — Vaalea neutraali täyttö tummilla pinnoilla oleville napeille.
  • Stone #cdcdc9 — Ohuet reunat, jakajat, hienovaraiset väliseinät – lämpimin sävyin 1px:n viivat
  • Mist #a1a19f — Kolmannen tason aputeksti, kuvatekstit - mykistettyjen ja toissijaisten tekstien välissä.

Typografia

12:sta 72 pikseliin · 6 vaihetta

  • CursorGothic — korvaava: Inter · ääriviivat 400, 500 · Käyttöliittymän, otsikoiden, navigoinnin, leipätekstin ja tuotesuunnittelun ensisijainen fontti. Fontin erottuva ominaisuus on 400 pisteen painoiset otsikot, joiden kirjainväli pienenee asteittain (-0,005em 22 pikselin koossa → -0,03em 72 pikselin koossa): otsikot eivät ole koskaan lihavoituja. Fonttifunktiot ss08, ss09 ja tnum aktivoivat tyylivaihtoehtoja ja taulukkomuotoisia kuvia.
  • EB Garamond — korvaava: Iowan Old Style · ääriviivat 400, 500 · CursorGothic on toimituksellinen serif-kirjasintyyppi yksittäisille alaotsikoille, leipätekstille ja taulukkomuotoisille tiedoille, ja se lisää käyttöliittymään kirjallisen silauksen.
  • berkeleyMono — korvaava: ui-monospace · ääriviivat 400, 500 · Monospace - koodilohkoille, komentorivin katkelmille, metatiedoille, tiedostopoluille ja kehittäjätunnisteille - tekninen kieli.

Intervallit ja muoto

TarkoitusMerkitys
Tiheystiheä
Perusvaihe8px
Painikkeen säde4px
Kortin säde4px
Varjotei - reunoja varjojen sijaan
Osioiden välillä64-96px
Sivun leveys1300px

Tekoäly rakentaa verkkosivustosi Cursor -tyyliin ja täyttää sen

  • Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
  • Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
  • Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
  • Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.

Samankaltaisia tyylejä

  • Amplemarket — Auringon paahtama työpaikka, joka on täynnä konfetteja
  • Getharvest — Kultainen työpöytä – lämmin kermanvärinen kangas, valkoiset postikortit roikkumassa kankaalla ja yksi kirkkaan oranssi liekki
  • Drive Capital — Retro road trip -juliste lämpimällä paperilla
  • Wealthsimple — Kashmirilla vuorattu varasto, jossa on galleriavalaistus
  • Huddle — Pastellinväriset inventaariokortit kermanväriselle paperille
  • Fuser — Hajallaan olevia polaroid-kuvia suunnittelijan työseinällä
  • Campsite — Auringon valaisema toimittajan työasema - lämmintä kermanväristä paperia ja yksi oranssi leima
  • Redis Agency — Toimituksen työpaja, joka on avoinna aukioloaikojen ulkopuolella, on pikimusta paikka, jossa kaikki brändäystyö tehdään serif-fonteilla ja yhdellä punaisella retiisillä.
  • AI Product Generation — Toimituksellinen valokuvausstudio valkoisella paperilla - otsikko kannessa, oranssi väri toimituksellista korostusta varten
  • Getanchor — Lämmin terrakotan sävy auringon haalistuneella kermanvärisellä taustalla
  • Flatfile — Hiljainen tietopäiväkirja lämpimällä pergamentilla
  • Inthememory — Arkkitehtoninen piirros valkoiselle marmorille yhdellä lämpimällä valolla. Hiljainen, toimituksellinen datahuone, jossa syvän turkoosi muste ja pillerinmuotoiset säätimet leijuvat terävien valkoisten pintojen yllä, joita rikkoo vain yksi oranssin väripilkku.