Stripe
Ein mit indigoblauer Tinte auf mattiertem Glas geschriebenes Kassenbuch
Stripe verwendet für Finanzinstrumente eine nahezu monochrome Gestaltung: ein sanftes, kühles Weiß mit dunkelblauen Überschriften, fast ohne dekorative Chromelemente und einem einzigen leuchtenden Indigo (#533afd), das sich auch für Schaltflächen, Links oder Symbolumrisse eignet. Die Typografie ist außergewöhnlich dünn, mit einer Strichstärke von 300 Punkt – selbst bei 56 Pixeln –, was eher zurückhaltend als aufdringlich geschäftsmäßig wirkt; der Buchstabenabstand verringert sich mit zunehmender Größe deutlich. Schaltflächen sind klein, quadratisch (4 Pixel) und haben violette Füllungen oder hauchdünne violette Umrisse. Das System verzichtet vollständig auf Schatten; Tiefe wird durch wechselnde Hintergrundfarben (Weiß → #f8fafd → #e5edf5 → Violetttöne) und nicht durch Erhebungen erzeugt. Die gesamte Benutzeroberfläche ähnelt einem Buchhaltungsbuch oder einem Terminal: dichte Informationsdichte, klare Linien, großzügiger Abstand zwischen den Abschnitten und Farbe erscheint nur, wenn eine Aktion erforderlich ist.
Die maximale Breite beträgt ca. 1320 Pixel für eine zentrierte Inhaltsspalte auf weißem Hintergrund. Der Hero-Bereich ist ein linksbündiger Textblock in voller Größe (56 Pixel) mit zwei Handlungsaufforderungen darunter. Es gibt kein Hero-Bild – die Typografie steht im Vordergrund. Die Abschnitte sind vertikal mit gleichmäßigen 96-Pixel-Abständen und 1 Pixel breiten Trennlinien (Farbcode: #e5edf5) angeordnet; es gibt keine abwechselnden hellen und dunklen Streifen. Jeder Abschnitt folgt einem wiederkehrenden Muster: ein kleiner Abschnittstitel in Großbuchstaben (Farbcode: Smokey, 12 Pixel), gefolgt von einer 32–48 Pixel großen Überschrift, einem 22 Pixel langen Absatz und anschließend einer Tabelle mit Produktkarten (dreispaltig auf Desktop-Computern) oder einem zweispaltigen Textblock mit Bildmaterial. Kundenlogos erscheinen in einem schmalen, linksbündigen vertikalen Streifen. Die Fußzeile besteht aus einem breiten Streifen (Farbcode: #f8fafd) mit mehrspaltigen Linklisten. Der Lesefluss ist insgesamt ruhig, bedächtig und überwiegend textbasiert – die Informationsdichte ist trotz der langen Scrolllänge gering.
Die Bildsprache ist zurückhaltend und dokumentarisch. Ganzseitige Fotos erscheinen nur in Abschnitten mit Fallstudien (z. B. Luftaufnahmen des Verkehrs für Hertz), aufgenommen aus der Vogelperspektive oder aus dramatischen Blickwinkeln, in natürlichen Farben – ohne Duoton- oder Farbbearbeitung. Screenshots der Benutzeroberfläche werden in Feature-Karten verwendet und mit scharfen Winkeln und klaren Rändern ohne Geräterahmen dargestellt. Partnerlogos werden in ihren eigenen Farben und ohne Rahmen angezeigt. Es gibt keine Illustrationen, 3D-Renderings oder dekorative abstrakte Grafikelemente. Die Icons sind einheitlich: Linienstärke 1 und 2 auf weißem Hintergrund, geometrische Linienzeichnungen (Winkel, Pfeile, Häkchen, Dokumentensymbole). Die Seite besteht hauptsächlich aus Text und Weißraum; Bilder nehmen weniger als 3 % der gesamten Bildfläche ein.
Palette
Marke
- Indigo Ink
#533afd— Lila wird für ausgefüllte Schaltflächen, ausgewählte Navigationszustände und fokussierte Konversionsmomente verwendet. - Indigo Hover
#7389ff— Lila dient zur Hervorhebung von Links, Schlagwörtern und kurzen Phrasen. Es sollte nicht als Hauptfarbe für Handlungsaufforderungen verwendet werden.
Neutral
- Midnight Ink
#061b31— Die Hauptüberschrift und der Fließtext sind in einem tiefen, fast schwarzen Farbton mit einem kühlen Blaustich gehalten, der als Grundlage für das gesamte Schriftsystem dient. - Slate
#64748d— Grauer Text hebt Links, Schlagwörter und kurze Phrasen hervor. - Steel
#50617a— Zusätzlicher Text und Begleitmaterialien sind zwischen den schiefergrauen und gedämpften violetten Tönen angeordnet, die bei Unterlizenzen verwendet werden. - Smoke
#839bc8— Für große, dekorative Überschriften und den dazugehörigen Text wird ein gedeckter Lilaton verwendet – niemals in den Fließtextabsätzen. - Pure White
#ffffff— Die Papierfläche und die erhabenen Oberflächen der Karten; der Standardhintergrund, an dem alles andere gemessen wird. - Mist
#f8fafd— Der Hintergrund der Fußzeile und die Abschnittstrennlinie sind in einem dezenten, kühlen Farbton gehalten, der Bereiche ohne sichtbare Grenze voneinander trennt.
Typografie
von 12 auf 56 Pixel · 9 Schritte
- sohne-var — Ersatz: Inter Tight (variable · Umrisse 300, 400 · Die gesamte Benutzeroberfläche verwendet ausschließlich die Schriftart 300 für Überschriften, Fließtext, Navigation, Schaltflächen und Beschriftungen. Selbst bei einer Bildschirmgröße von 56 Pixeln ist die Schriftstärke 300 deutlich erkennbar, was ein besonderes Merkmal darstellt: Überschriften wirken dezent und zurückhaltend, wodurch Autorität durch Zurückhaltung statt durch Lautstärke vermittelt wird. Die Schriftstärke 400 kommt nur bei 14–16 Pixeln für Navigations- und Schaltflächentexte zum Einsatz, da hier für bessere Lesbarkeit bei kleineren Größen ein zusätzlicher Strich erforderlich ist.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | geräumig |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 4px |
| Kartenradius | 4px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 96px |
| Seitenbreite | 1320px |
KI erstellt Ihre Website im Stripe -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Ui — Klinischer Plan auf mattem Papier
- monopo saigon — Ein flüssiges, irisierendes Leuchten hinter der redaktionellen Stille – eine monochrome Bildergalerie, die auf geschmolzenem Licht schwebt
- Ventriloc — Ein redaktionelles Observatorium von Daten auf warmem Papier – eine einzelne orangefarbene Glut, die die monochrome Präzision hervorhebt.
- Hyer Aviation — Dämmerung im Cockpit über Pergament. Der blasse Morgenhimmel trifft auf das rumpfgroße Serifenlogo, und ein einzelner warmer Tonakzent durchbricht die monochrome Zurückhaltung.
- Family — Eine Doppelseite aus einem Märchen auf cremefarbenem Pergament
- OFF+BRAND. — Schimmernde Kugel auf warmem Pergament
- Geniestudio — Ein Notizbuch für sanftes Tageslicht – eines mit breiten Rändern und einem dicken Federstrich.
- xAI — Warm Cream Lab mit schwarzer Pille
- Seed — ein lebender Organismus unter Laborglas
- Cosmos — Eine mit Leinen ausgekleidete und mit Polaroids behängte Galeriewand.
- Cal — Funktionalität in Schwarz-Weiß, ein menschlicher Ansatz. Ein System, das Klarheit und Funktionalität durch eine strikte Schwarz-Weiß-Palette priorisiert, diese aber durch freundliche Typografie und abgerundete Formen auflockert.
- T1 Energy — Eine Zeichnung einer Produktionsanlage auf warmem Pergament ist eine ruhige, monochrome Szene, in der industrielle Dimensionen und subtile Typografie die gesamte Marke verkörpern.