Cursor
Przytulny warsztat pergaminowy, oświetlony tlącymi się węglami
Cursor wykorzystuje ciepłą, pergaminową typografię: kremowe płótno, atramentowo czarny tekst i pojedynczy, ognisto-pomarańczowy akcent, który aktywuje linki i zaznaczenia, a nie wypełnia przyciski. Nagłówki, ustawione w czcionce CursorGothic o grubości 400, mają stopniowo zmniejszające się odstępy między literami w miarę ich zwiększania – autorytet uzyskuje się poprzez powściągliwość i cienką grubość liter, a nie ich pogrubienie. Powierzchnie są płaskie i przypominają papier, z cienkimi obramowaniami i miękkimi, ciepłymi, szarymi cieniami; rogi pozostają ostre przy grubości 4 pikseli w całym tekście. EB Garamond jest używany selektywnie do podtytułów i prozy, podczas gdy berkeleyMono obsługuje kod, tagi i metadane, nadając systemowi typograficzną osobowość, która bardziej przypomina magazyn literacki niż panel SaaS.
Maksymalna szerokość: 1300 px wyśrodkowane, margines 24 px. Górny pasek nawigacyjny: przezroczysty nagłówek o wysokości 52 px z logo i znacznikiem tekstowym po lewej stronie, 4 wyśrodkowane linki nawigacyjne, grupa „Logowanie / Kontakt / Pobieranie” wyrównana do prawej. Element główny: nagłówek wyrównany do lewej + podwójny blok wezwania do działania z tekstem biegnącym od lewego górnego rogu, a następnie karta produktu o pełnej szerokości, rozciągająca się na całą szerokość strony. Pasek zaufania: jeden poziomy rząd 8 kafelków logo w jednej linii na całej szerokości sekcji. Sekcje z wyróżnieniami zawierają naprzemiennie tekst po lewej stronie i zrzut ekranu po prawej stronie w układzie dwukolumnowym, każdy 50/50, z pionowym rytmem 64-96 px między sekcjami. Wszystkie zrzuty ekranu z wyróżnieniami to makiety okien z identycznym stylem macOS. Stopka: czterokolumnowa siatka linków ze znacznikiem marki po lewej stronie. Sekcje są oddzielone dużą przestrzenią, a nie przegrodami – kremowe płótno zapewnia separację.
Zrzuty ekranu produktu zajmują centralne miejsce: duże makiety okien macOS prezentujące IDE Cursor w akcji: zakładki plików, widoki różnic, plany agentów, panele terminala oraz integrację ze Slackiem/czatem. Każda makieta okna jest obramowana kartą #f2f1ed o miękkim, ciepłym kontraście. Stonowane zdjęcie krajobrazu (horyzont gór/pustyni) rozciąga się poza główną sekcję, dodając ciepła bez konkurowania z interfejsem użytkownika. Loga klientów ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) są prezentowane jako monochromatyczne napisy na płytkach Linen w kształcie pigułek. Nie ma zdjęć osób, ilustracji ani abstrakcyjnych dekoracyjnych elementów graficznych — cały ciężar wizualny skupia się na interfejsie użytkownika produktu i brandingu. Ikony to cienkie, monoliniowe glify wypełnione #7a7974 Ash, nigdy chromatyczne.
Paleta
Neutralny
- Ink
#26251e— Tekst podstawowy, tło głównego przycisku akcji, tekst nawigacyjny – ciepły, prawie czarny odcień, nigdy czysty #000 - Parchment
#f7f7f4— Tło strony, czyli główne płótno, ma ciepły, kremowy odcień, który łagodzi kontrast i sprawia wrażenie druku tuszem, a nie druku cyfrowego. - Bone
#f2f1ed— Tekturowe powierzchnie i wypukłe pojemniki, o ton ciemniejsze od płótna, tworzą warstwowy, bezramkowy efekt „papieru na papierze”. - Linen
#e6e5e0— Jasne, neutralne wypełnienie przycisków na ciemnych powierzchniach. - Stone
#cdcdc9— Cienkie obramowania, podziały, subtelne podziały – linie o grubości 1 piksela w ciepłych tonacjach - Mist
#a1a19f— Tekst pomocniczy trzeciego poziomu, napisy - pomiędzy tekstem wyciszonym i wtórnym.
Typografia
od 12 do 72px · 6 kroków
- CursorGothic — wymiana: Inter · wytyczne 400, 500 · Podstawowy krój czcionki dla interfejsu użytkownika, nagłówków, nawigacji, treści i projektu produktu. Nagłówki o grubości 400 punktów i stopniowo zmniejszającym się odstępie między literami (-0,005 em przy 22 px → -0,03 em przy 72 px) są charakterystyczną cechą tej czcionki: nagłówki nigdy nie są pogrubione. Funkcje czcionki ss08, ss09 i tnum aktywują alternatywy stylistyczne i figury tabelaryczne.
- EB Garamond — wymiana: Iowan Old Style · wytyczne 400, 500 · CursorGothic to czcionka szeryfowa przeznaczona do pojedynczych podtytułów, tekstu głównego i danych tabelarycznych, która nadaje interfejsowi literacki akcent.
- berkeleyMono — wymiana: ui-monospace · wytyczne 400, 500 · Monospace – dla bloków kodu, fragmentów wiersza poleceń, metadanych, ścieżek plików i etykiet programistycznych – język techniczny.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8px |
| Promień przycisku | 4px |
| Promień karty | 4px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64-96px |
| Szerokość strony | 1300px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Cursor i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Amplemarket — Zalane słońcem miejsce pracy pokryte konfetti
- Getharvest — Biurko o złotej godzinie – ciepłe kremowe płótno, białe pocztówki zawieszone na płótnie i pojedynczy, jasnopomarańczowy płomień
- Drive Capital — Plakat z retro podróżą samochodem na ciepłym papierze
- Wealthsimple — Magazyn wyłożony kaszmirem z oświetleniem galerii
- Huddle — Pastelowe karty inwentaryzacyjne na kremowym papierze
- Fuser — Rozrzucone zdjęcia Polaroid na ścianie, na której pracuje projektant
- Campsite — Rozświetlone słońcem stanowisko pracy redaktora – ciepły kremowy papier z pojedynczym pomarańczowym stemplem
- Redis Agency — Pracownia redakcyjna, otwarta po godzinach, to ciemne, smoliście czarne miejsce, w którym cała praca nad marką wykonywana jest za pomocą czcionek szeryfowych i pojedynczej czerwonej rzodkiewki.
- AI Product Generation — Studio fotografii redakcyjnej na białym papierze – tytuł jako okładka, kolor pomarańczowy do wyróżnienia redakcyjnego
- Getanchor — Ciepły odcień terakoty na wyblakłym od słońca kremowym tle
- Flatfile — Cichy dziennik danych na ciepłym pergaminie
- Inthememory — Rysunek architektoniczny na białym marmurze, oświetlony pojedynczym, ciepłym światłem. Cichy, redakcyjny pokój danych, gdzie głęboki turkusowy atrament i kontrolki w kształcie pigułek unoszą się nad czystą, białą powierzchnią, przełamaną jedynie pojedynczym pomarańczowym akcentem.