Cursor
Een knusse perkamentwerkplaats, verlicht door smeulende kolen.
Cursor gebruikt een warme, perkamentachtige typografie: een crèmekleurig canvas, inktzwarte tekst en een enkel feloranje accent dat links en selecties activeert in plaats van knoppen op te vullen. Kopteksten, gezet in CursorGothic met een letterdikte van 400, hebben een geleidelijk afnemende letterafstand naarmate ze groter worden – gezag wordt bereikt door ingetogenheid en dunne letterdiktes in plaats van vetgedrukte letters. De oppervlakken zijn vlak en papierachtig gehouden, met dunne randen en zachte, warme grijze schaduwen; hoeken blijven scherp met een dikte van 4px in de hele tekst. EB Garamond wordt selectief gebruikt voor subkopjes en proza, terwijl berkeleyMono de code, tags en metadata afhandelt, waardoor het systeem een typografische persoonlijkheid krijgt die meer doet denken aan een literair tijdschrift dan aan een SaaS-dashboard.
Maximale breedte: 1300px gecentreerd, 24px marge. Bovenste navigatie: 52px hoge transparante header met logo en tekstmerk links, 4 gecentreerde navigatielinks, cluster "Inloggen / Contact / Downloaden" rechts uitgelijnd. Hero: Links uitgelijnde header + dubbel call-to-action-blok met tekst vanaf linksboven, gevolgd door een productmockupkaart over de volledige breedte van de pagina. Vertrouwensstreep: Een horizontale rij van 8 logotegels in één regel over de breedte van de sectie. Functiesecties wisselen tekst links af met een screenshot rechts in een lay-out met twee kolommen, elk 50/50, met een verticaal ritme van 64-96px tussen de secties. Alle screenshots van functies zijn venstermockups met dezelfde macOS-stijl. Voettekst: Vierkoloms raster van links met het merkmerk links. De secties worden gescheiden door voldoende witruimte in plaats van scheidingslijnen - het crèmekleurige canvas zelf zorgt voor de scheiding.
De productscreenshots staan centraal: grote macOS-venstermockups die de Cursor IDE in actie laten zien: bestandstabbladen, diff-weergaven, agentplannen, terminalpanelen en Slack/chat-integratie. Elke venstermockup is omlijst met een #f2f1-kaart met een zacht, warm contrast. Een ingetogen landschapsfoto (bergen/woestijnhorizon) loopt door buiten het hoofdgedeelte en voegt warmte toe zonder te concurreren met de gebruikersinterface. Clientlogo's ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) worden weergegeven als monochrome letters in pilvormige Linen-tegels. Er zijn geen foto's van mensen, illustraties of abstracte decoratieve grafische elementen – alle visuele aandacht is gericht op de gebruikersinterface en de branding van het product. Pictogrammen zijn dunne, monolineaire glyphs gevuld met #7a7974 Ash, nooit chromatisch.
Palet
Neutrale
- Ink
#26251e— Hoofdtekst, achtergrond van de primaire actieknop, navigatietekst - een warme, bijna zwarte tint, nooit puur #000 - Parchment
#f7f7f4— De achtergrond van de pagina, het hoofdcanvas, heeft een warme crèmekleur die het contrast verzacht en de indruk wekt van inktdruk in plaats van digitale druk. - Bone
#f2f1ed— Kartonnen oppervlakken en verhoogde vakjes, een tint donkerder dan het canvas, creëren een gelaagd, randloos "papier-op-papier"-effect. - Linen
#e6e5e0— Lichte, neutrale vulling voor knoppen op donkere oppervlakken. - Stone
#cdcdc9— Dunne randen, scheidingslijnen, subtiele tussenschotten – lijnen van 1 pixel in warme tinten. - Mist
#a1a19f— Aanvullende tekst op het derde niveau, bijschriften - tussen de gedempte en secundaire tekst.
Typografie
van 12 tot 72px · 6 stappen
- CursorGothic — vervanging: Inter · overzichten 400, 500 · Het primaire lettertype voor de gebruikersinterface, koppen, navigatie, hoofdtekst en productontwerp. Koppen met een dikte van 400 punten en een geleidelijk afnemende letterafstand (-0,005em bij 22px → -0,03em bij 72px) zijn een kenmerkend aspect van het lettertype: koppen zijn nooit vetgedrukt. De lettertypefuncties ss08, ss09 en tnum activeren stilistische alternatieven en tabelcijfers.
- EB Garamond — vervanging: Iowan Old Style · overzichten 400, 500 · CursorGothic is een redactioneel schreeflettertype voor individuele subkoppen, hoofdtekst en tabellen, en geeft de interface een literaire uitstraling.
- berkeleyMono — vervanging: ui-monospace · overzichten 400, 500 · Monospace - voor codeblokken, commandoregelfragmenten, metadata, bestandspaden en ontwikkelaarslabels - een technische taal.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 8px |
| Knopradius | 4px |
| Kaartradius | 4px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64-96px |
| Paginabreedte | 1300px |
AI bouwt je website in de stijl Cursor en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Amplemarket — Een zonovergoten werkplek bezaaid met confetti.
- Getharvest — Een bureau tijdens het gouden uur – een warm crèmekleurig canvas, witte ansichtkaarten die aan het canvas hangen, en een enkele heldere oranje vlam.
- Drive Capital — Retro roadtrip-poster op warm papier
- Wealthsimple — Met kasjmier beklede loods met galerijverlichting
- Huddle — Pastelkleurige inventariskaarten op crèmekleurig papier
- Fuser — Verspreide Polaroidfoto's op de werkmuur van een ontwerper.
- Campsite — Een zonovergoten werkplek van een redacteur - warm crèmekleurig papier met een enkele oranje stempel.
- Redis Agency — De redactiewerkplaats, die ook buiten kantooruren open is, is een pikdonkere ruimte waar al het brandingwerk wordt gedaan met schreeflettertypen en een enkele rode radijs.
- AI Product Generation — Fotostudio voor redactionele fotografie op wit papier - titel als omslag, oranje kleur voor redactionele accentuering
- Getanchor — Warme terracotta tint op een door de zon vervaagde crèmekleurige achtergrond
- Flatfile — Een rustig gegevensdagboek op warm perkament.
- Inthememory — Een architectonische tekening op wit marmer met een enkele warme lichtbron. Een stille, redactionele dataruimte waar diep turkooizen inkt en pilvormige bedieningselementen zweven boven helderwitte oppervlakken, slechts onderbroken door een enkele oranje accent.