Cursor
En mysig pergamentverkstad, upplyst av glödande kol
Cursor använder en varm, pergamentliknande typografi: en krämig duk, bläckig svart text och en enda eldig orange accent som aktiverar länkar och markeringar snarare än att fylla i knappar. Rubriker, inställda i CursorGothic med en vikt på 400, har gradvis minskande bokstavsavstånd allt eftersom de ökar i storlek – auktoritet uppnås genom återhållsamhet och tunna bokstavsvikter snarare än djärvhet. Ytorna hålls plana och pappersliknande, med tunna kanter och mjuka, varma grå skuggor; hörnen förblir skarpa med en vikt på 4px genom hela texten. EB Garamond används selektivt för underrubriker och prosa, medan berkeleyMono hanterar kod, taggar och metadata, vilket ger systemet en typografisk personlighet som känns mer som en litterär tidskrift än en SaaS-instrumentpanel.
Maximal bredd: 1300px centrerad, 24px marginal. Övre navigering: 52px hög transparent sidhuvud med logotyp och textmarkering till vänster, 4 centrerade navigeringslänkar, kluster "Logga in / Kontakt / Ladda ner" justerat till höger. Hero: Vänsterjusterad sidhuvud + dubbelt uppmaningsblock med text som löper från övre vänstra hörnet, sedan ett produktmockup-kort i full bredd som sträcker sig över hela sidans bredd. Trust stripe: En horisontell rad med 8 logotyprutor i en enda rad över sektionsbredden. Funktionssektioner alternerar text till vänster och en skärmdump till höger i en tvåkolumnslayout, vardera 50/50, med en vertikal rytm på 64-96px mellan sektionerna. Alla funktionsskärmdumpar är fönstermockups med identisk macOS-styling. Sidfot: Fyrakolumns rutnät med länkar med varumärket till vänster. Sektionerna är separerade med gott om andrum snarare än avdelare - den krämfärgade arbetsytan i sig utgör separationen.
Produktens skärmdumpar står i centrum: stora macOS-fönstermodeller som visar upp Cursor IDE i aktion: filmliknande flikar, diff-vyer, agentplaner, terminalpaneler och Slack/chatt-integration. Varje fönstermodell är inramad med ett #f2f1ed-kort med en mjuk, varm kontrast. Ett dämpat landskapsfoto (berg/ökenhorisont) sträcker sig bortom huvudsektionen och ger värme utan att konkurrera med användargränssnittet. Klientlogotyper ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) presenteras som monokroma bokstäver i pillerformade linneplattor. Det finns inga fotografier av människor, illustrationer eller abstrakta dekorativa grafiska element – all visuell tyngd är fokuserad på produktens användargränssnitt och varumärke. Ikonerna är tunna, monolinjära tecken fyllda med #7a7974 Ash, aldrig kromatisk.
Palett
Neutral
- Ink
#26251e— Primärtext, bakgrund av primär åtgärdsknapp, navigeringstext - en varm, nästan svart nyans, aldrig ren #000 - Parchment
#f7f7f4— Sidans bakgrund, den huvudsakliga arbetsytan, har en varm krämfärgad nyans som mjukar upp kontrasten och skapar känslan av bläcktryck snarare än digitaltryck. - Bone
#f2f1ed— Kartongytor och upphöjda behållare, en ton mörkare än duken, skapar en skiktad, kantlös "papper-på-papper"-effekt. - Linen
#e6e5e0— Ljus neutral fyllning för knappar på mörka ytor. - Stone
#cdcdc9— Tunna ramar, avdelare, diskreta partitioner – 1px-linjer i varma toner - Mist
#a1a19f— Hjälptext på tredje nivå, bildtexter - mellan den dämpade och sekundära texten.
Typografi
från 12 till 72px · 6 steg
- CursorGothic — ersättning: Inter · konturer 400, 500 · Det primära teckensnittet för användargränssnittet, rubriker, navigering, brödtext och produktdesign. Rubriker med en vikt på 400 punkter och gradvis minskande bokstavsavstånd (-0,005 em vid 22px → -0,03 em vid 72px) är ett utmärkande drag för teckensnittet: rubriker är aldrig fetstilta. Teckensnittsfunktionerna ss08, ss09 och tnum aktiverar stilistiska alternativ och tabellfigurer.
- EB Garamond — ersättning: Iowan Old Style · konturer 400, 500 · CursorGothic är ett redaktionellt serif-typsnitt för enskilda underrubriker, brödtext och tabelldata och ger gränssnittet en litterär touch.
- berkeleyMono — ersättning: ui-monospace · konturer 400, 500 · Monospace - för kodblock, kommandoradsavsnitt, metadata, filsökvägar och utvecklaretiketter - ett tekniskt språk.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 8px |
| Knappradie | 4px |
| Kortradie | 4px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 64-96px |
| Sidbredd | 1300px |
AI kommer att bygga din webbplats i Cursor -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Amplemarket — En soldränkt arbetsplats beströdd med konfetti
- Getharvest — Ett skrivbord vid gyllene timmen – en varm krämfärgad duk, vita vykort hängande på duken och en enda ljus orange låga
- Drive Capital — Retro roadtrip-affisch på varmt papper
- Wealthsimple — Kashmirfodrad lagerlokal med galleribelysning
- Huddle — Pastellfärgade inventariekort på krämfärgat papper
- Fuser — Spridda polaroidbilder på en designers arbetsvägg
- Campsite — En solbelyst redaktörsarbetsplats - varmt krämpapper med en enda orange stämpel
- Redis Agency — Redaktionsverkstaden, öppen efter stängning, är en becksvart plats där allt varumärkesarbete görs med serif-typsnitt och en enda röd rädisa.
- AI Product Generation — Redaktionell fotostudio på vitt papper - titel som omslag, orange färg för redaktionell markering
- Getanchor — Varm terrakottafärgad nyans mot en solblekt krämfärgad bakgrund
- Flatfile — En tyst datadagbok på varmt pergament
- Inthememory — En arkitektonisk teckning på vit marmor med ett enda varmt ljus. Ett tyst, redaktionellt datarum där djupt turkost bläck och pillerformade kontroller svävar över skarpa vita ytor, endast avbrutna av en enda skvätt orange.