Stripe
En räkenskapsbok skriven med indigobläck på frostat glas
Stripe använder ett nästan monokromt språk för finansiella instrument: en mjuk, kall vit duk med mörkblå rubriker, nästan inga dekorativa kromelement och en enda ljus indigo (#533afd) som med rätta skulle kunna användas som en knapp-, länk- eller ikonkontur. Typografin är exceptionellt tunn, med en vikt på 300 punkter – även vid 56 px – vilket känns självsäkert diskret snarare än överdrivet företagsamt; bokstavsavståndet minskar kraftigt med ökande storlek. Knapparna är små, fyrkantiga (4 px) och använder lila fyllningar eller de tunnaste lila konturerna. Systemet undviker helt skuggor; djup uppnås genom att ändra bakgrundsnyanser (vit → #f8fafd → #e5edf5 → lila nyanser), snarare än genom höjdjustering. Hela gränssnittet beter sig som en redovisningsbok eller en terminal: tät information, tydliga linjer, gott om utrymme mellan sektioner och färg visas bara när en åtgärd krävs.
Den maximala bredden är ~1320px för en centrerad innehållskolumn på en vit arbetsyta. Huvuddelen är ett vänsterjusterat textblock i full storlek (56px) med två uppmaningar till handling nedanför, ingen huvudbild – typografin ÄR huvuddelen. Avsnitten är arrangerade vertikalt med lika stora 96px-rännor och 1px #e5edf5-avdelare; det finns inga alternerande mörka/ljusa ränder. Varje avsnitt följer ett upprepande mönster: en liten avsnittsrubrik i versaler (rökfärgad, 12px), sedan en rubrik på 32–48px, sedan ett stycke på 22px, sedan ett rutnät med produktkort (3 kolumner på skrivbordet) eller ett textblock med 2 kolumner med visuell konst. Kundlogotyper visas i en smal vertikal remsa, vänsterjusterad. Sidfoten är en bred #f8fafd-remsa med listor med länkar i flera kolumner. Den övergripande rytmen är långsam, avmätt och övervägande textbaserad – informationstätheten är låg, trots den långa rullningslängden.
Bildspråket är återhållsamt och i dokumentär stil. Helsidesfoton visas endast i avsnitt med fallstudier (t.ex. flygfotografering av trafik för Hertz), tagna ovanifrån eller från dramatiska vinklar, med naturliga färger – ingen duotone- eller färgbehandling. Skärmdumpar av produktens användargränssnitt används inom funktionskort, renderade med skarpa vinklar och tydliga kanter, utan enhetsramar. Partnerlogotyper visas i sina egna färger, utan några behållare. Det finns inga illustrationer, 3D-renderingar eller dekorativa abstrakta grafiska element. Ikonerna är enhetliga: linjetjocklek 1, linjetjocklek 2 på vit bakgrund, med geometrisk linjeteckning (vinklar, pilar, bockmärken, dokumentsymboler). Sidan består huvudsakligen av text och vitt utrymme; bilder upptar mindre än 3 % av den totala visuella ytan.
Palett
Stämpla
- Indigo Ink
#533afd— Lila används för fyllda knappar, valda navigeringstillstånd och fokusdrivna konverteringsmoment. - Indigo Hover
#7389ff— Lila används för att markera länkar, taggar och korta fraser. Den bör inte användas som primärfärg för uppmaningar till handling.
Neutral
- Midnight Ink
#061b31— Huvudrubriken och brödtexten har en djup, nästan svart färg med en kall blå nyans, som fungerar som grund för hela typsnittssystemet. - Slate
#64748d— Grå text markerar länkar, taggar och korta fraser. - Steel
#50617a— Ytterligare text och stödmaterial är placerade mellan de skifferfärgade och dämpade lila tonerna som används på underlicenser. - Smoke
#839bc8— För stora dekorativa rubriker och medföljande text används en dämpad lila nyans – aldrig i brödtexten. - Pure White
#ffffff— Sidans arbetsyta och upphöjda ytor på kort; standardbakgrunden mot vilken allt annat mäts. - Mist
#f8fafd— Sidfotens bakgrund och sektionsavdelaren har en subtil, sval nyans som separerar områden utan en synlig kantlinje.
Typografi
från 12 till 56px · 9 steg
- sohne-var — ersättning: Inter Tight (variable · konturer 300, 400 · Det enda teckensnittet som används i hela gränssnittet är för rubriker, brödtext, navigering, knappar och etiketter. Vikten 300 gäller även vid en skärmstorlek på 56 pixlar, vilket är ett utmärkande drag: rubriker viskar snarare än ropar, vilket etablerar auktoritet genom återhållsamhet snarare än volym. Vikten 400 visas endast vid 14–16 pixlar för navigering och knapptext, där ett extra streck krävs för läsbarhet i mindre storlekar.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | rymlig |
| Grundläggande steg | 8px |
| Knappradie | 4px |
| Kortradie | 4px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 96px |
| Sidbredd | 1320px |
AI kommer att bygga din webbplats i Stripe -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Ui — klinisk plan på matt papper
- monopo saigon — En flytande, skimrande glöd bakom den redaktionella tystnaden – ett monokromt redaktionellt galleri som svävar på smält ljus
- Ventriloc — Ett redaktionellt observatorium för data på varmt papper - en enda orange glöd som framhäver den monokroma precisionen
- Hyer Aviation — Skymning i cockpiten över pergament. Den bleka gryningshimlen möter den flygkroppsstora serif-logotypen, och en enda varm leraaccent bryter den monokroma återhållsamheten.
- Family — Ett uppslag från en saga på gräddepergament
- OFF+BRAND. — Skimrande sfär på varmt pergament
- Geniestudio — En mjuk dagsljusbok – den sorten med breda marginaler och ett tjockt pennstreck
- xAI — Varm gräddelaboratorium med svart piller
- Seed — en levande organism under laboratorieglas
- Cosmos — En tavelvägg klädd med linnetyg och dekorerad med Polaroidbilder
- Cal — Monokrom praktiskhet, ett mänskligt förhållningssätt. Ett system som prioriterar tydlighet och funktionalitet genom en strikt svartvit palett, men mjukar upp den med vänlig typografi och rundade former.
- T1 Energy — En teckning av en produktionsanläggning på varmt pergament är en tyst, monokrom scen där industriell skala och subtil typografi förkroppsligar hela varumärket.