Stripe
Buzlu cam üzerine çivit mavisi mürekkeple yazılmış bir hesap defteri.
Stripe finansal araçlar için neredeyse tek renkli bir dil kullanıyor: koyu mavi başlıklar, neredeyse hiç dekoratif krom öğe içermeyen yumuşak, serin beyaz bir zemin ve düğme, bağlantı veya simge çerçevesi olarak kullanılabilecek tek bir parlak indigo (#533afd). Tipografi son derece ince, 56 pikselde bile 300 punto ağırlığında; bu da aşırı kurumsal olmaktan ziyade kendinden emin bir şekilde sade bir görünüm sağlıyor; harf aralığı boyut arttıkça keskin bir şekilde azalıyor. Düğmeler küçük, kare (4 piksel) ve mor dolgular veya en ince mor çerçeveler kullanıyor. Sistem tamamen gölgelerden kaçınıyor; derinlik, yükseklik yerine arka plan tonlarının (beyaz → #f8fafd → #e5edf5 → mor tonları) değiştirilmesiyle elde ediliyor. Tüm arayüz bir muhasebe defteri veya terminal gibi davranıyor: yoğun bilgi, net çizgiler, bölümler arasında geniş boşluk ve renk yalnızca bir işlem gerektiğinde ortaya çıkıyor.
Beyaz bir zeminde ortalanmış içerik sütunu için maksimum genişlik yaklaşık 1320 pikseldir. Ana başlık, tam boyutta (56 piksel) sola hizalanmış bir metin bloğudur ve altında iki eylem çağrısı bulunur; ana başlık görseli yoktur—tipografi ana başlığın kendisidir. Bölümler, eşit 96 piksel boşluklar ve 1 piksel #e5edf5 ayırıcılarla dikey olarak düzenlenmiştir; koyu/açık şeritler arasında geçiş yoktur. Her bölüm tekrarlayan bir deseni izler: büyük harflerle yazılmış küçük bir bölüm başlığı (füme renk, 12 piksel), ardından 32-48 piksellik bir başlık, ardından 22 piksellik bir paragraf, ardından ürün kartlarından oluşan bir ızgara (masaüstünde 3 sütun) veya görsel sanat içeren 2 sütunlu bir metin bloğu. Müşteri logoları, sola hizalanmış dar bir dikey şeritte görünür. Altbilgi, çok sütunlu bağlantı listeleri içeren geniş bir #f8fafd şerididir. Genel ritim yavaş, ölçülü ve ağırlıklı olarak metinseldir—uzun kaydırma uzunluğuna rağmen bilgi yoğunluğu düşüktür.
Görseller sade ve belgesel tarzında. Tam sayfa fotoğraflar yalnızca örnek olay incelemelerini içeren bölümlerde (örneğin, Hertz için havadan trafik fotoğrafçılığı) yer alıyor ve doğal renkler kullanılarak, yukarıdan veya çarpıcı açılardan çekilmiş. Ürün kullanıcı arayüzünün ekran görüntüleri, keskin açılar ve net kenarlarla, cihaz çerçeveleri olmadan, özellik kartları içinde kullanılıyor. Ortak logoları, herhangi bir çerçeve olmadan, kendi renklerinde gösteriliyor. İllüstrasyon, 3B render veya dekoratif soyut grafik öğeler bulunmuyor. Simgeler tek tip: beyaz bir arka plan üzerinde 1 ve 2 çizgi kalınlığı, geometrik çizgi sanatı (oklar, onay işaretleri, belge sembolleri). Sayfa esas olarak metin ve beyaz alandan oluşuyor; görseller toplam görsel alanın %3'ünden azını kaplıyor.
Palet
Marka
- Indigo Ink
#533afd— Mor renk, doldurulmuş düğmeler, seçili gezinme durumları ve odaklanmayı gerektiren dönüşüm anları için kullanılır. - Indigo Hover
#7389ff— Mor renk, bağlantıları, etiketleri ve kısa ifadeleri vurgulamak için kullanılır. Eylem çağrıları için ana renk olarak kullanılmamalıdır.
Doğal
- Midnight Ink
#061b31— Ana başlık ve gövde metni, tüm yazı tipi sisteminin temelini oluşturan, soğuk mavi tonlu, koyu, neredeyse siyah bir renktedir. - Slate
#64748d— Gri metin, bağlantıları, etiketleri ve kısa ifadeleri vurgular. - Steel
#50617a— Ek metin ve destekleyici materyaller, alt lisanslarda kullanılan arduvaz ve soluk mor tonları arasına yerleştirilmiştir. - Smoke
#839bc8— Büyük, dekoratif başlıklar ve bunlara eşlik eden metinler için soluk bir mor tonu kullanılır; ancak metin paragraflarında asla kullanılmaz. - Pure White
#ffffff— Sayfa yüzeyi ve kartların kabartmalı yüzeyleri; her şeyin ölçüldüğü varsayılan arka plan. - Mist
#f8fafd— Altbilgi arka planı ve bölüm ayırıcı, görünür bir sınır olmadan alanları ayıran, zarif ve soğuk bir tondadır.
Tipografi
12 ila 56 piksel arası · 9 adım
- sohne-var — yenisiyle değiştirme: Inter Tight (variable · ana hatlar 300, 400 · Arayüzde kullanılan tek yazı tipi başlıklar, gövde metni, gezinme menüsü, düğmeler ve etiketler içindir. 300 kalınlık, 56 piksel ekran boyutunda bile baskınlığını koruyor; bu da ayırt edici bir özellik: başlıklar bağırmak yerine fısıldıyor, otoriteyi ses yüksekliği yerine ölçülülükle kuruyor. 400 kalınlık ise yalnızca 14-16 pikselde gezinme menüsü ve düğme metni için kullanılıyor; daha küçük boyutlarda okunabilirlik için ekstra bir çizgi gerekiyor.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ferah |
| Temel adım | 8px |
| Düğme yarıçapı | 4px |
| Kart yarıçapı | 4px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 96px |
| Sayfa genişliği | 1320px |
Yapay zeka, web sitenizi Stripe tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- Ui — mat kağıda klinik plan
- monopo saigon — Editörlük sessizliğinin ardındaki akışkan, yanardöner bir parıltı—erimiş ışık üzerinde yüzen tek renkli bir editörlük galerisi
- Ventriloc — Sıcak kağıt üzerindeki verilerin editoryal gözlem evi - tek bir turuncu kor, tek renkli hassasiyeti vurguluyor.
- Hyer Aviation — Kokpitte, parşömen üzerinde alacakaranlık çökmüş. Soluk şafak gökyüzü, gövde boyutundaki serif yazı tipindeki logoyla buluşuyor ve tek bir sıcak kil rengi vurgu, tekdüze kısıtlamayı kırıyor.
- Family — Krem rengi parşömen kağıdı üzerine bir peri masalından bir sayfa.
- OFF+BRAND. — Sıcak parşömen üzerinde yanardöner küre
- Geniestudio — Yumuşak gün ışığı tonlarında bir defter—geniş kenar boşlukları ve tek kalın kalem darbesiyle aydınlanan türden.
- xAI — Sıcak Krem Laboratuvarı Siyah Hap ile
- Seed — laboratuvar camı altında yaşayan bir organizma
- Cosmos — Keten kumaşla kaplı ve Polaroid fotoğraflarla süslenmiş bir galeri duvarı.
- Cal — Tek renkli pratiklik, insancıl bir yaklaşım. Sıkı bir siyah-beyaz palet aracılığıyla netliği ve işlevselliği önceliklendiren, ancak bunu samimi tipografi ve yuvarlak şekillerle yumuşatan bir sistem.
- T1 Energy — Sıcak parşömen üzerine çizilmiş bir üretim tesisi resmi, endüstriyel ölçeğin ve incelikli tipografinin tüm markayı somutlaştırdığı, sakin, tek renkli bir sahnedir.