Bundleloom
EN Shopify'a ekle

Marka kılavuzu

Bundleloom’un logosu, renkleri, yazıları, sesi ve mağazada görünen bileşenleri. Bir şey eksikse ya da emin değilseniz destek@bundleloom.com.

Yanlış kullanım

Esnetmeyin, sıkıştırmayın.
Renkleri değiştirmeyin. Turuncu, mor, teal kardeş markalarındır.
Döndürmeyin, eğmeyin.
Gölge, parlama, degrade eklemeyin.
Kalabalık ya da düşük kontrastlı zemine koymayın.
Simgeyi yazıdan büyütmeyin, parçalarını ayırmayın.

Renk

Kobalt güveni ve “Shopify’ın kendi indirimi” sakinliğini taşır; limon yalnız kazancın olduğu yerde yanar. Palet, kardeş uygulamaların (Yorumix ahududu, Swatchloom mor, Paysorty teal) ve Oxmira’nın amber vurgusunun hiçbirine yakın değildir.

  • Kobalt

    #1A3FE0 RGB 26, 63, 224

    Ana renk. Düğme, seçili bar, bağlantı, büyük renk alanları.

  • Limon

    #C6F432 RGB 198, 244, 50

    Kazanç vurgusu: indirim etiketi, hediye, yükseltme şeridi. Yalnız mürekkep yazıyla ya da koyu zeminde.

  • Mürekkep

    #0B1B3F RGB 11, 27, 63

    Metin, koyu yüzeyler, sepete ekle düğmesi.

  • Kâğıt

    #F6F8FF RGB 246, 248, 255

    Sayfa zemini. Beyazdan bir ton serin.

Kullanım oranı

Kâğıt %60 · Mürekkep %25 · Kobalt %10 · Limon %5. Limon bir sayfada en çok iki üç yerde görünür.

Yardımcı tonlar

  • Kobalt koyu #1B33C4Bağlantı ve düğme üzerine gelince
  • Kobalt açık #E3E8FFSeçili bar zemini, alternatif bölüm
  • Gri #4A5675İkincil metin; mürekkepten türetilmiş, nötr gri değil
  • Çizgi #C9D1EAKenarlar ve ayırıcılar

Kontrast (WCAG 2.2)

ÖrnekÖn / zeminOranSeviyeKullanım
Aa 200#0B1B3F / #F6F8FF15.92:1AAAgövde metni / başlık, kâğıt zemin
Aa 200#0B1B3F / #FFFFFF16.90:1AAAgövde metni, beyaz kart
Aa 200#4A5675 / #F6F8FF6.87:1AAikincil metin, kâğıt zemin
Aa 200#4A5675 / #E3E8FF5.99:1AAikincil metin, açık kobalt zemin
Aa 200#1A3FE0 / #F6F8FF6.99:1AAbağlantı / kobalt başlık, kâğıt zemin
Aa 200#1A3FE0 / #FFFFFF7.42:1AAAbağlantı, beyaz kart
Aa 200#FFFFFF / #1A3FE07.42:1AAAdüğme yazısı, kobalt düğme
Aa 200#0B1B3F / #C6F43213.19:1AAArozet yazısı, limon rozet
Aa 200#C6F432 / #0B1B3F13.19:1AAAlimon vurgu, mürekkep zemin
Aa 200#F6F8FF / #0B1B3F15.92:1AAAmetin, mürekkep zemin (ters)
Aa 200#C6F432 / #1A3FE05.79:1AAlimon büyük başlık/simge, kobalt zemin
Aa 200#1B33C4 / #F6F8FF8.54:1AAAbağlantı üzerine gelince
Aa 200#0B1B3F / #E3E8FF13.88:1AAAmetin, seçili satır

Gövde metni her zaman AAA (7:1 üstü). Limon açık zeminde metin rengi olarak kullanılmaz. Renk körlüğü simülasyonunda (protanopi, döteranopi, tritanopi) kobalt, limon ve mürekkep birbirinden ayrışır; seçili bar ayrıca kalın kenar ve dolu radyo ile belirtilir, yalnız renge dayanmaz. Ölçüm: python web-kaynak/bundleloom_palet.py.

Tipografi

Barlow Condensed 800

Bir alan, üç alsın.

AaBbÇçĞğİıÖöŞşÜü 0123456789 ₺ $ %

Başlıklar, fiyatlar, adet ve rozetler. Dar ve kalın: kutu üstündeki etiket gibi, az yerde çok şey söyler.

Barlow 400 / 600

Müşteri paketi seçer, indirim sepette Shopify’ın kendi indirimi olarak düşer.

AaBbÇçĞğİıÖöŞşÜü 0123456789

Gövde metni ve arayüz. Aynı ailenin geniş kesimi; başlıkla aynı iskeleti paylaşır.

RolYazıBoy / satır
KahramanBarlow Condensed 80054–96 px / 0.95
Bölüm başlığıBarlow Condensed 80037–58 px / 0.95
Ara başlıkBarlow Condensed 80024 px / 1.1
GövdeBarlow 40017.5 px / 1.6
KüçükBarlow 400 / 60014 px / 1.4

Fiyat ve sayılarda tablo rakamı (font-variant-numeric: tabular-nums) kullanılır; fiyat değişirken satır oynamaz. Yazılar SIL Open Font License ile sitenin kendi sunucusundan yüklenir, harici CDN yok.

İkonografi

24 px ızgara, 2 px çizgi, yuvarlak köşe ve uç. İkon her zaman metnin rengini alır (currentColor); vurgu gerekiyorsa mürekkep kare içinde limon çizilir. Emoji ve harf işaretleri ikon yerine kullanılmaz.

  • Paket barları
  • Sepet
  • Yükseltme
  • Stok
  • A/B testi
  • Analitik
  • Hediye
  • Varyant
  • İndirim
  • Hız
  • Sepet bütünlüğü
  • Uygulandı
  • Yok

Ses tonu

Bundleloom bir tezgâhtar gibi konuşur: fiyatı söyler, kazancı söyler, susar. Kısa cümle, somut sayı, satıcının cebine ne girdiği. Ünlem, abartı, “devrim” yok.

İlkeBöyleBöyle değil
Kısaİndirim sepette kendiliğinden düşer.Gelişmiş indirim motorumuz sayesinde tüm indirimleriniz sepet aşamasında otomatik olarak uygulanmaktadır.
Net2 adet seçildi: 698 TL, 200 TL indirim.Harika seçim! Muhteşem bir fırsat yakaladınız!
Satıcıya faydaMüşteri ikinciyi alır, siz sepette fark edersiniz.Dünyanın en güçlü paket uygulaması.
DürüstStok yetmiyorsa 3’lü barı göstermez.Asla satış kaçırmazsınız.
  • Vitrin metinlerinde müşteriye “siz” değil, doğrudan eylem: “1 adet daha ekle”.
  • Panel metinlerinde satıcıya “siz” deriz; teknik terim yerine Shopify’ın kendi adları (İndirimler, Tema düzenleyici).
  • Para birimi sayıdan sonra ve boşlukla: 1.347 TL. İngilizcede önce: $65.

Bileşenler

Aşağıdakiler mağazada görünen bileşenlerin kendisidir; ana sayfadaki canlı demoyla aynı CSS’i kullanır.

Paket bloğu

Çok al, az öde
1 AdetAdet başı 449 TLBu renkte stok yetmiyor449 TL
2 AdetEkstra 200 TL indirimAdet başı 349 TLBu renkte stok yetmiyor698 TL898 TLEn çok tercih edilen
3 AdetEkstra 450 TL indirimAdet başı 299 TLBu renkte stok yetmiyor897 TL1.347 TLHediye: çorap kesesi
Yün bakım şampuanı eklePaketle birlikte 89 TL 119 TL

Rozetler

Ekstra 200 TL indirimEn çok tercih edilen%22 indirimSon 2 adet

Düğmeler

Paketi kaydetÖnizleSepete ekle · 698 TL

Sepette yükseltme şeridi

1 adet daha ekle, 200 TL kazan

Ekle

1 adet daha ekle, 250 TL daha kazan

Ekle

En iyi paket fiyatı sepetinizde.

  • Seçili bar: 2 px kobalt kenar, açık kobalt zemin, dolu radyo. Seçili olmayan: 1.5 px çizgi rengi kenar.
  • İndirim etiketi limon, “en çok tercih edilen” şeridi mürekkep zemin üstüne limon yazı. Bir blokta en çok bir şerit.
  • Stoğu yetmeyen bar taralı zemin, kesikli kenar ve açıklama satırıyla kapanır; yalnız soluklaşmaz.
  • Köşeler: bar ve kart 14 px, düğme 10–12 px, rozet tam yuvarlak.

Görsel dil

Fotoğraf

  • Gerçek ürün, gün ışığı, düz kâğıt ya da açık kobalt fon. Ürün 1, 2, 3 adet olarak üst üste ya da yan yana dizilir: adet her karede sayılabilir olmalı.
  • Kalabalık sahne, stok fotoğraf gülümsemesi, yapay parıltı yok.
  • Ekran görüntüleri gerçek mağazadan, gerçek fiyatla; bulanıklaştırılmış sahte veri kullanılmaz.

Çizim

  • Düz renk, yuvarlatılmış kutular, degrade ve 3B yok. Üçüncü paket limon bantla işaretlenir; logodaki fazladan kutunun karşılığıdır.
  • Arayüz parçaları çizimin yerine geçebilir: gerçek bar, gerçek şerit.

Boşluk ve ızgara

8 px tabanlı ölçek. Grup içi boşluk dar (8–16), gruplar arası geniş (48–128). Başlığın üstündeki boşluk altındakinden fazladır.

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96
  • 128

İçerik genişliği en çok 1160 px, 12 sütun, 24 px yan boşluk (640 px altında 16 px). Okuma metni 62–72 karakter. Gölge yalnız yükselmiş yüzeylerde: ofsetli ve yumuşak, renkli hale yok.