
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
| Účel | Význam |
|---|---|
| Hustota | prostorný |
| Základní krok | 8px |
| Poloměr tlačítka | 4px |
| Poloměr karty | 4px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 96px |
| Šířka stránky | 1320px |
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.