Tasarım sistemi
Saatli Fırın’ın mevcut kimliğinden (logo, #195458 teal paleti, Playfair Display + Inter) türetilen ürün sayfası standartları. Renkler saatlifirin.com tema dosyasıyla birebir aynı; yardımcı tonlar ürün fotoğraflarının önüne geçmeyecek şekilde sade tutuldu.
Renk tokenları
Kaynak: /areas/menu-v2/css/themes/3595.css (“brand-50 … brand-900”, taupe, accent). Kural: büyük renk alanı yalnızca marka bandı ve ana butonda; ürün kartları beyaz.
brand-50
#f0f5f5
brand-100
#dce9ea
brand-200
#b9d3d4
brand-300
#95bcbf
brand-400
#6ea5a9
brand-500
#478e94
brand-600
#2e7378
brand-700
#195458
brand-800
#144548
brand-900
#0e3537
Kontrast (hesaplandı): beyaz metin brand-700 üzerinde 8,6:1 · ink-mute (#5f6a6c) beyazda 5,6:1, krem zeminde 5,2:1 · taupe metin için koyu ton taupe-ink (#7d5f57) 5,8:1. Açık taupe (#a3837b, 3,5:1) yalnız dekoratif kullanılır.
Tipografi
Ürün başlığı (H1)
Playfair Display 700 · 32/36 px mobil–masaüstü
Siyez Unlu Poğaça
Bölüm başlığı (H2)
Playfair Display 700 · 24–30 px
Kahvaltını tamamla
Fiyat
Playfair Display 700 · rakamlar eşit genişlik
1.800,00 TL
Gövde
Inter 400 · 16/26 px · en az 16 px (mobil yakınlaştırmayı önler)
Siyez unuyla hazırlanan, içi beyaz peynirli poğaça.
Etiket
Inter 600 · 14 px
Teslimat günü
Üst etiket
Inter 600 · 12 px · harf aralığı
Unlu Mamuller
Fontlar projeye gömülü (latin + latin-ext: ç, ğ, ı, İ, ö, ş, ü). Harici yazı tipi sunucusuna bağımlılık yok.
Boşluk, köşe, gölge, dokunma alanı
Boşluk ölçeği (4 px tabanı)
Köşe yarıçapı
sm
md
lg
xl
pill
Buton ve alanlar: 12 px · kartlar: 16 px · etiket/sayaç: pill
Dokunma alanı ve gölge
- Birincil buton: 56 px yükseklik
- Form alanı, adet, ikon buton: 44–48 px
- Kart gölgesi: yalnız ayırmak için (shadow-card)
- Sabit çubuk: üst gölge (shadow-bar), güvenli alan boşluğu
Bileşenler
Butonlar
Kural: bir ekranda tek birincil buton. Sandviçte “Hemen sipariş ver”, poğaça ve pastada “Sepete ekle” birincildir. Odak: 3 px brand-500 halka (klavyede görünür).
Adet seçimi
1–99 aralığı; alan klavyeyle de yazılabilir; azaltma 1’de pasifleşir.
Varyant seçimi (radyo kartı)
Her zaman bir seçenek ön seçili; mutlak fiyat (“+” yok); seçili durum hem renk hem çerçeve kalınlığıyla anlatılır.
Form alanı ve hata durumu
Etiket her zaman görünür (yalnız yer tutucu yok); hata metni alanın altında, ne yapılacağını söyler.
Bildirimler
Modal / alt panel (drawer)
Mobilde alttan açılır (en fazla ekranın %88’i), masaüstünde ortada. Esc ile kapanır, odak panelde kalır, arka plan kaymaz, kapanınca odak düğmeye döner.
Mobil sabit satın alma çubuğu
Satın alma alanı ekrandan çıkınca alttan kayarak gelir; sayfanın altına eşit boşluk bırakılır, içerik kapanmaz; iPhone güvenli alanı hesaba katılır; 1024 px üstünde gizlidir.
Duyarlı (responsive) kurallar
- 360–430 px: tek sütun; galeri tam genişlik 4:3; satın alma alanı galerinin hemen altında; sabit satın alma çubuğu alan ekrandan çıkınca görünür.
- 768 px: tek sütun, daha geniş kenar boşluğu; öneri şeritleri 3 sütunlu ızgaraya döner.
- 1024 px +: iki sütun; galeri solda yapışkan, satın alma alanı sağda; sabit mobil çubuk gizlenir.
- 1440 px +: içerik en fazla 1200 px; satır uzunluğu ~70 karakter.