Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukvývojářVývoj nástrojů umělé inteligence pro firmy. Vysoce kvalitní. Cenově dostupné.Napsat na Telegram
Stripe — náhled webu v tomto stylu

Stripe

Účetní kniha psaná indigovým inkoustem na matném skle

Stripe používá pro finanční nástroje téměř monochromatický jazyk: měkké, chladné bílé plátno s tmavě modrými nadpisy, téměř žádné dekorativní chromové prvky a jediné jasné indigo (#533afd), které by se dalo legitimně použít jako tlačítko, odkaz nebo obrys ikony. Typografie je mimořádně tenká, s tloušťkou 300 bodů – i při 56 px – což působí spíše sebevědomě decentně než zjevně korporátně; rozteč písmen se s rostoucí velikostí prudce snižuje. Tlačítka jsou malá, čtvercová (4 px) a používají fialové výplně nebo nejtenčí fialové obrysy. Systém se zcela vyhýbá stínům; hloubky je dosaženo změnou odstínů pozadí (bílá → #f8fafd → #e5edf5 → fialové odstíny), nikoli zvětšením. Celé rozhraní se chová jako účetní kniha nebo terminál: husté informace, jasné čáry, dostatek prostoru mezi sekcemi a barva se objevuje pouze tehdy, když je vyžadována akce.

Maximální šířka pro středový sloupec obsahu na bílém plátně je ~1320px. Hlavní sloupec je textový blok zarovnaný doleva v plné velikosti (56px) se dvěma výzvami k akci pod ním, bez hlavního obrázku – typografie JE hlavní sloupec. Sekce jsou uspořádány svisle se stejnými mezerami o velikosti 96px a oddělovači o velikosti 1px #e5edf5; nejsou zde žádné střídavé tmavé/světlé pruhy. Každá sekce se řídí opakujícím se vzorem: malý název sekce velkými písmeny (kouřová barva, 12px), poté nadpis o velikosti 32–48px, poté odstavec o velikosti 22px a poté mřížka produktových karet (3 sloupce na počítači) nebo textový blok se dvěma sloupci s vizuální grafikou. Loga klientů se zobrazují v úzkém svislém pruhu zarovnaném doleva. Zápatí je jeden široký #f8fafd pruh s vícesloupcovými seznamy odkazů. Celkový rytmus je pomalý, odměřený a převážně textový – hustota informací je nízká, i přes dlouhou délku rolování.

Obrazový materiál je zdrženlivý a v dokumentárním stylu. Celostránkové fotografie se objevují pouze v sekcích s případovými studiemi (např. letecké dopravní snímky pro Hertz), pořízené shora nebo z dramatických úhlů, s použitím přirozených barev – bez duotonu nebo barevného zpracování. Snímky obrazovky uživatelského rozhraní produktu jsou použity v rámci karet funkcí, vykreslené s ostrými úhly a jasnými okraji, bez rámečků zařízení. Loga partnerů jsou zobrazena ve vlastních barvách, bez jakýchkoli kontejnerů. Nejsou zde žádné ilustrace, 3D rendery ani dekorativní abstraktní grafické prvky. Ikony jsou jednotné: tloušťka čáry 1, tloušťka čáry 2 na bílém pozadí, s geometrickou čárovou grafikou (šípky, šipky, zaškrtávací značky, symboly dokumentů). Stránka se skládá převážně z textu a bílého prostoru; obrázky zabírají méně než 3 % celkové vizuální plochy.

Paleta

Značka

  • Indigo Ink #533afd — Fialová se používá pro vyplněná tlačítka, vybrané stavy navigace a momenty konverze řízené fokusem.
  • Indigo Hover #7389ff — Fialová se používá k zvýraznění odkazů, tagů a krátkých frází. Neměla by se používat jako primární barva pro výzvy k akci.

Neutrální

  • Midnight Ink #061b31 — Hlavní nadpis a text těla jsou tmavé, téměř černé barvy se studeným modrým odstínem, která slouží jako základ pro celý systém písma.
  • Slate #64748d — Šedý text zvýrazňuje odkazy, štítky a krátké fráze.
  • Steel #50617a — Doplňující text a podpůrné materiály jsou umístěny mezi břidlicovými a tlumenými fialovými tóny použitými na sublicencích.
  • Smoke #839bc8 — Pro velké ozdobné nadpisy a doprovodný text se používá tlumený fialový odstín – nikdy ne v odstavcích textu.
  • Pure White #ffffff — Plátno stránky a vyvýšené plochy karet; výchozí pozadí, vůči kterému se vše ostatní poměřuje.
  • Mist #f8fafd — Pozadí zápatí a dělicí lišta sekcí jsou v jemném studeném odstínu, který odděluje oblasti bez viditelného ohraničení.

Typografie

od 12 do 56 pixelů · 9 kroků

  • sohne-var — nahrazení: Inter Tight (variable · obrysy 300, 400 · Jediné písmo použité v celém rozhraní je pro nadpisy, text, navigaci, tlačítka a popisky. Váha 300 převládá i při velikosti obrazovky 56px, což je charakteristický rys: nadpisy spíše šeptají než křičí a upevňují autoritu spíše skrze zdrženlivost než skrze hlasitost. Váha 400 se objevuje pouze při tloušťce 14–16px pro navigaci a text tlačítek, kde je u menších velikostí pro čitelnost nutný další tah.

Intervaly a forma

ÚčelVýznam
Hustotaprostorný
Základní krok8px
Poloměr tlačítka4px
Poloměr karty4px
Stínyne - okraje místo stínů
Mezi sekcemi96px
Šířka stránky1320px

Umělá inteligence vám vytvoří web ve stylu Stripe a naplní ho

  • Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
  • Přeneste obsah ze starého webu – stačí zadat adresu.
  • Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
  • Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.

Podobné styly

  • Ui — klinický plán na matném papíře
  • monopo saigon — Tekutá, duhová záře za redakčním tichem – monochromatická redakční galerie vznášející se na roztaveném světle
  • Ventriloc — Redakční observatoř dat na teplém papíře - jediný oranžový uhlík zdůrazňující monochromatickou preciznost
  • Hyer Aviation — Soumrak v kokpitu nad pergamenem. Bledá ranní obloha se setkává s patkovým logem velikosti trupu a jediný teplý hliněný akcent prolamuje monochromatickou zdrženlivost.
  • Family — Pomazánka z pohádky na krémovém pergamenu
  • OFF+BRAND. — Duhová koule na teplém pergamenu
  • Geniestudio — Měkký zápisník s denním světlem – takový s širokými okraji a jedním tlustým tahem pera
  • xAI — Teplý krém Lab s černou pilulkou
  • Seed — živý organismus pod laboratorním sklem
  • Cosmos — Galerijní stěna vystlaná lněným plátnem a ověšená polaroidovými snímky
  • Cal — Monochromatická praktičnost, lidský přístup. Systém, který upřednostňuje jasnost a funkčnost prostřednictvím striktní černobílé palety, ale zjemňuje ji přátelskou typografií a zaoblenými tvary.
  • T1 Energy — Kresba výrobního závodu na teplém pergamenu je tichá, monochromatická scéna, kde průmyslové měřítko a jemná typografie ztělesňují celou značku.