Stripe
Księga rachunkowa napisana atramentem indygowym na matowym szkle
Stripe używa niemal monochromatycznego języka dla instrumentów finansowych: miękkie, chłodne białe płótno z ciemnoniebieskimi nagłówkami, praktycznie bez dekoracyjnych chromowanych elementów i pojedynczy jasny indygo (#533afd), który mógłby zostać wykorzystany jako przycisk, link lub kontur ikony. Typografia jest wyjątkowo cienka, o grubości 300 punktów – nawet przy 56 px – co sprawia wrażenie pewnej powściągliwości, a nie nachalnego korporacyjnego charakteru; odstępy między literami gwałtownie maleją wraz ze wzrostem rozmiaru. Przyciski są małe, kwadratowe (4 px) i używają fioletowych wypełnień lub najcieńszych fioletowych konturów. System całkowicie unika cieni; głębię uzyskuje się poprzez zmieniające się odcienie tła (biały → #f8fafd → #e5edf5 → odcienie fioletu), a nie poprzez podniesienie. Cały interfejs zachowuje się jak księga rachunkowa lub terminal: gęste informacje, wyraźne linie, dużo przestrzeni między sekcjami, a kolor pojawia się tylko wtedy, gdy wymagane jest działanie.
Maksymalna szerokość wynosi ~1320 px dla wyśrodkowanej kolumny treści na białym płótnie. Bohaterem jest wyrównany do lewej blok tekstu w pełnym rozmiarze (56 px) z dwoma wezwaniami do działania poniżej, bez obrazu bohatera — typografia JEST bohaterem. Sekcje są ułożone pionowo z równymi odstępami 96 px i 1 px separatorami #e5edf5; nie ma naprzemiennych ciemnych/jasnych pasów. Każda sekcja podąża za powtarzającym się wzorem: mały tytuł sekcji pisany wielkimi literami (kolor przydymiony, 12 px), następnie nagłówek 32-48 px, następnie akapit 22 px, następnie siatka kart produktów (3 kolumny na komputerze) lub dwukolumnowy blok tekstu z grafiką. Loga klientów pojawiają się na wąskim pionowym pasku wyrównanym do lewej. Stopka to jeden szeroki pasek #f8fafd z wielokolumnowymi listami linków. Ogólny rytm jest powolny, miarowy i głównie tekstowy — gęstość informacji jest niska, pomimo długiego przewijania.
Grafika jest oszczędna i ma charakter dokumentalny. Zdjęcia całostronicowe pojawiają się tylko w sekcjach zawierających studia przypadków (np. zdjęcia ruchu lotniczego dla Hertz), wykonane z góry lub pod dramatycznym kątem, w naturalnych kolorach – bez duotonu ani przetwarzania kolorów. Zrzuty ekranu interfejsu użytkownika produktu są używane w kartach funkcji, renderowane z ostrymi kątami i wyraźnymi obramowaniami, bez ramek urządzenia. Loga partnerów są wyświetlane w ich własnych kolorach, bez żadnych kontenerów. Brak ilustracji, renderów 3D lub dekoracyjnych abstrakcyjnych elementów graficznych. Ikony są jednolite: grubość linii 1, grubość linii 2 na białym tle, z geometryczną grafiką (szewrony, strzałki, znaczniki wyboru, symbole dokumentu). Strona składa się głównie z tekstu i białej przestrzeni; obrazy zajmują mniej niż 3% całkowitej powierzchni wizualnej.
Paleta
Marka
- Indigo Ink
#533afd— Kolor fioletowy jest używany w przypadku przycisków wypełnionych, wybranych stanów nawigacji i momentów konwersji opartych na skupieniu uwagi. - Indigo Hover
#7389ff— Fioletowy kolor służy do wyróżniania linków, tagów i krótkich fraz. Nie powinien być używany jako kolor podstawowy w wezwaniach do działania.
Neutralny
- Midnight Ink
#061b31— Główny nagłówek i tekst mają głęboki, niemal czarny kolor z chłodnym, niebieskim odcieniem, który stanowi podstawę całego systemu czcionek. - Slate
#64748d— Szary tekst podświetla linki, tagi i krótkie frazy. - Steel
#50617a— Dodatkowy tekst i materiały pomocnicze umieszczono pomiędzy odcieniami koloru łupkowego i stonowanymi odcieniami fioletu, stosowanymi w przypadku podlicencji. - Smoke
#839bc8— W przypadku dużych, ozdobnych nagłówków i towarzyszącego im tekstu stosuje się stonowany odcień fioletu – nigdy w akapitach zasadniczych. - Pure White
#ffffff— Płótno strony i podniesione powierzchnie kart; domyślne tło, względem którego mierzone są wszystkie inne elementy. - Mist
#f8fafd— Tło stopki i podział sekcji mają delikatny, chłodny odcień, który oddziela obszary bez widocznej granicy.
Typografia
od 12 do 56px · 9 kroków
- sohne-var — wymiana: Inter Tight (variable · wytyczne 300, 400 · Jedynym krojem używanym w całym interfejsie jest czcionka nagłówków, tekstu głównego, nawigacji, przycisków i etykiet. Grubość 300 pikseli sprawdza się nawet przy przekątnej ekranu 56 pikseli, co jest jej charakterystyczną cechą: nagłówki szepczą, a nie krzyczą, budując autorytet poprzez powściągliwość, a nie głośność. Grubość 400 pikseli pojawia się tylko w szerokości 14–16 pikseli w nawigacji i tekście przycisków, gdzie dodatkowa kreska jest wymagana dla czytelności w mniejszych rozmiarach.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przestronny |
| Podstawowy krok | 8px |
| Promień przycisku | 4px |
| Promień karty | 4px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 96px |
| Szerokość strony | 1320px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Stripe 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
- Ui — plan kliniczny na papierze matowym
- monopo saigon — Płynna, opalizująca poświata za redakcyjną ciszą – monochromatyczna galeria redakcyjna unosząca się na roztopionym świetle
- Ventriloc — Obserwatorium redakcyjne danych na temat ciepłego papieru – pojedynczy pomarańczowy żar podkreślający monochromatyczną precyzję
- Hyer Aviation — Zmierzch w kokpicie nad pergaminem. Blade niebo o świcie spotyka się z szeryfowym logo wielkości kadłuba, a pojedynczy, ciepły, gliniany akcent przełamuje monochromatyczną powściągliwość.
- Family — Rozkład z bajki na kremowym pergaminie
- OFF+BRAND. — Tęczowa kula na ciepłym pergaminie
- Geniestudio — Miękki notes do czytania w świetle dziennym – taki z szerokimi marginesami i jedną grubą kreską pióra
- xAI — Ciepły krem laboratoryjny z czarną tabletką
- Seed — żywy organizm pod szkłem laboratoryjnym
- Cosmos — Ściana galerii wyłożona lnem i zawieszona polaroidami
- Cal — Monochromatyczna praktyczność, ludzkie podejście. System, który stawia na przejrzystość i funkcjonalność poprzez surową paletę czerni i bieli, ale łagodzi ją przyjazną typografią i zaokrąglonymi kształtami.
- T1 Energy — Rysunek zakładu produkcyjnego na ciepłym pergaminie to spokojna, monochromatyczna scena, w której przemysłowa skala i subtelna typografia ucieleśniają całą markę.