Stripe
Un libro contabile scritto con inchiostro indaco su vetro smerigliato.
Stripe utilizza un linguaggio quasi monocromatico per gli strumenti finanziari: una tela bianca tenue e fredda con intestazioni blu scuro, quasi nessun elemento decorativo cromato e un singolo indaco brillante (#533afd) che potrebbe legittimamente essere utilizzato come contorno per pulsanti, link o icone. La tipografia è eccezionalmente sottile, con un peso di 300 punti, anche a 56px, che trasmette una sensazione di sobria sicurezza piuttosto che di eccessiva aziendalità; la spaziatura tra le lettere diminuisce drasticamente con l'aumentare delle dimensioni. I pulsanti sono piccoli, quadrati (4px) e utilizzano riempimenti viola o contorni viola sottilissimi. Il sistema evita completamente le ombre; la profondità è ottenuta attraverso la variazione delle tonalità di sfondo (bianco → #f8fafd → #e5edf5 → tonalità di viola), piuttosto che tramite l'elevazione. L'intera interfaccia si comporta come un registro contabile o un terminale: informazioni dense, linee chiare, ampio spazio tra le sezioni e il colore appare solo quando è richiesta un'azione.
La larghezza massima è di circa 1320px per una colonna di contenuto centrata su uno sfondo bianco. L'elemento principale è un blocco di testo allineato a sinistra a dimensione intera (56px) con due call to action sottostanti, senza immagine principale: la tipografia È l'elemento principale. Le sezioni sono disposte verticalmente con margini uguali di 96px e divisori di 1px in #e5edf5; non ci sono strisce scure/chiare alternate. Ogni sezione segue uno schema ripetitivo: un piccolo titolo di sezione tutto in maiuscolo (colore fumé, 12px), poi un'intestazione di 32-48px, poi un paragrafo di 22px, poi una griglia di schede prodotto (3 colonne su desktop) o un blocco di testo a 2 colonne con elementi grafici. I loghi dei clienti appaiono in una stretta striscia verticale, allineata a sinistra. Il piè di pagina è una striscia larga in #f8fafd con elenchi di link su più colonne. Il ritmo generale è lento, misurato e prevalentemente testuale: la densità di informazioni è bassa, nonostante la lunga lunghezza di scorrimento.
L'immaginario è sobrio e in stile documentaristico. Le foto a pagina intera compaiono solo nelle sezioni dedicate ai casi di studio (ad esempio, le fotografie aeree del traffico per Hertz), scattate dall'alto o da angolazioni suggestive, con colori naturali, senza bicromia o elaborazione del colore. Gli screenshot dell'interfaccia utente del prodotto sono utilizzati all'interno delle schede informative, con angoli netti e bordi definiti, senza cornici. I loghi dei partner sono visualizzati nei loro colori originali, senza alcun contenitore. Non sono presenti illustrazioni, rendering 3D o elementi grafici astratti decorativi. Le icone sono uniformi: spessore linea 1, spessore linea 2 su sfondo bianco, con linee geometriche (chevron, frecce, segni di spunta, simboli di documento). La pagina è composta principalmente da testo e spazio bianco; le immagini occupano meno del 3% della superficie visiva totale.
Tavolozza
Marca
- Indigo Ink
#533afd— Il viola viene utilizzato per i pulsanti pieni, gli stati di navigazione selezionati e i momenti di conversione che richiedono il focus. - Indigo Hover
#7389ff— Il viola si usa per evidenziare link, tag e frasi brevi. Non dovrebbe essere usato come colore principale per le call to action.
Neutro
- Midnight Ink
#061b31— Il titolo principale e il corpo del testo sono di un colore intenso, quasi nero, con una fredda sfumatura blu, che funge da base per l'intero sistema di caratteri. - Slate
#64748d— Il testo grigio evidenzia collegamenti, tag e frasi brevi. - Steel
#50617a— Il testo aggiuntivo e i materiali di supporto sono posizionati tra le tonalità ardesia e viola tenue utilizzate nelle sublicenze. - Smoke
#839bc8— Per i titoli decorativi di grandi dimensioni e il testo che li accompagna, si utilizza una tonalità di viola tenue, mai nei paragrafi del corpo del testo. - Pure White
#ffffff— La tela della pagina e le superfici in rilievo delle carte: lo sfondo predefinito rispetto al quale viene misurato tutto il resto. - Mist
#f8fafd— Lo sfondo del piè di pagina e il divisore di sezione presentano una delicata tonalità fredda che separa le aree senza un bordo visibile.
Tipografia
da 12 a 56 pixel · 9 passaggi
- sohne-var — sostituzione: Inter Tight (variable · contorni 300, 400 · L'unico carattere utilizzato nell'intera interfaccia è quello per titoli, testo del corpo, navigazione, pulsanti ed etichette. Il peso 300 prevale anche su uno schermo di 56 pixel, una caratteristica distintiva: i titoli sussurrano anziché gridare, affermando la propria autorevolezza attraverso la sobrietà piuttosto che il volume. Il peso 400 compare solo a 14-16 pixel per la navigazione e il testo dei pulsanti, dove è necessario un tratto aggiuntivo per garantire la leggibilità a dimensioni ridotte.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | spazioso |
| Passo base | 8px |
| Raggio del pulsante | 4px |
| Raggio della carta | 4px |
| Ombre | no - bordi invece di ombre |
| Tra le sezioni | 96px |
| Larghezza del pannello | 1320px |
L'IA creerà il tuo sito web nello stile Stripe e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Ui — piano clinico su carta opaca
- monopo saigon — Un bagliore liquido e iridescente dietro il silenzio editoriale: una galleria editoriale monocromatica che fluttua su una luce fusa.
- Ventriloc — Un osservatorio editoriale di dati su carta calda: una singola brace arancione che evidenzia la precisione monocromatica
- Hyer Aviation — Il crepuscolo nella cabina di pilotaggio su pergamena. Il pallido cielo dell'alba incontra il logo serif grande quanto la fusoliera, e un singolo accento color argilla calda rompe la sobrietà monocromatica.
- Family — Una tavola tratta da una fiaba su pergamena color crema
- OFF+BRAND. — Sfera iridescente su pergamena calda
- Geniestudio — Un quaderno morbido, adatto alla luce del giorno, con ampi margini e un tratto di penna spesso.
- xAI — Labbra color crema calda con pillola nera
- Seed — un organismo vivente sotto un vetrino da laboratorio
- Cosmos — Una parete della galleria rivestita di lino e decorata con Polaroid.
- Cal — Praticità monocromatica, un approccio umano. Un sistema che privilegia chiarezza e funzionalità attraverso una rigorosa palette in bianco e nero, ma che la addolcisce con una tipografia accattivante e forme arrotondate.
- T1 Energy — Il disegno di un impianto di produzione su pergamena calda è una scena tranquilla e monocromatica in cui la scala industriale e la tipografia discreta incarnano l'intero marchio.