Marka Kimliği
Bu sayfa geliştiriciler için bir referanstır: renk, tipografi ve HTML öğe stilleri tek bir kaynaktan (SSOT) okunur: src/lib/design-system/tokens.config.ts ve src/app/globals.css. Değerler koda gömülü olarak tekrar yazılmaz, buradan okunur.
01 · Renkler
Kaynak: tokens.color: 10renk. Her kare, tokens.config.ts’deki hex değeriyle doğrudan render edilir.
paper
#ffffff
cream
#fbf6eb
crust
#ebd9bf
ink
#1a0f0a
inkSoft
#6b5440
ember
#c8341f
emberDeep
#8b1e0a
brass
#e8a82c
brassDeep
#b07818
gold
#f2d770
02 · Tipografi
Kaynak: tokens.font, tokens.leading, tokens.tracking ve globals.css @theme bloğu.
Display
Fraunces
Aa Bb Çç
Sans
IBM Plex Sans
Aa Bb Çç
Mono
IBM Plex Mono
Aa Bb Çç
| Token | Yazı Tipi | Kalınlık | Boyut (clamp) | Satır Yük. | Örnek |
|---|---|---|---|---|---|
| text-display | Fraunces | 500 | clamp(1.75rem, 2.6vw + 1.3rem, 3.25rem) | 1.02 | Seyithan İşkembe |
| text-h1 | Fraunces | 500 | clamp(1.75rem, 0.87vw + 1.6rem, 2.25rem) | 1.1 | Seyithan İşkembe |
| text-h2 | Fraunces | 500 | clamp(1.5rem, 0.65vw + 1.39rem, 1.875rem) | 1.15 | Seyithan İşkembe |
| text-h3 | Fraunces | 500 | 1.5rem | 1.2 | Seyithan İşkembe |
| text-h4 | Fraunces | 500 | 1.375rem | 1.25 | Seyithan İşkembe |
| text-h5 | IBM Plex Sans | 400 | 1.25rem | 1.3 | Seyithan İşkembe |
| text-h6 | IBM Plex Sans | 400 | clamp(1rem, 0.22vw + 0.96rem, 1.125rem) | 1.4 | Seyithan İşkembe |
| text-p1 | IBM Plex Sans | 400 | 1.125rem | 1.8 | Seyithan İşkembe |
| text-p2 | IBM Plex Sans | 400 | 1rem | 1.7 | Seyithan İşkembe |
| text-p3 | IBM Plex Sans | 400 | 0.875rem | 1.6 | Seyithan İşkembe |
Not: tokens.config.ts içindeki text.h1–h3 alanlarında farklı bir clamp() değeri belgelenmiş (ör. h1 için clamp(2.25rem, 5vw + 1rem, 5rem)), ancak Tailwind v4 fiilen globals.css içindeki @theme bloğunu okur. Sitede kullanılan ve yukarıda canlı örneklenen değerler bu yüzden globals.css kaynaklıdır; iki dosya arasındaki bu sapma şeffaflık için burada belirtilir.
Satır Yüksekliği Token’ları
Harf Aralığı Token’ları
03 · HTML Öğeleri
Sitenin gerçek stilleriyle render edilen tüm standart HTML öğeleri: kopyala/yapıştır referansı.
Başlıklar
h1
h2
h3
h4
h5
h6
Satır İçi Metin
p, a
Seyithan İşkembe, Kadıköy Kozyatağı’nda 7 gün 24 saat açıktır. Detaylar için iletişim sayfamıza göz atabilirsiniz.
strong, em
Ocak hiç sönmez: gece de, gündüz de aynı lezzet.
small, mark
Seyithan İşkembe 7 gün 24 saat hizmet verir. (fiyatlara KDV dahildir; örnek metin)
del, ins
Örnek ürün: 19.90 ₺ 14.90 ₺
sub, sup
Genel kullanım örneği: 42 m2 alan, H2O referansı.
abbr
KVKK kapsamında verileriniz korunur.
kbd, code, pre
Sayfada hızlı arama için Ctrl + F kullanılabilir. Kod içi referans: tokens.color.ember
--color-ember: #c8341f;
--font-display: var(--font-fraunces);Alıntı
blockquote, cite
“İstanbul'un en iyi beyran yapan 7 mekanından biri.”Salih Seçkin Sevinç, Odatv
Listeler
ul
ol
dl, dt, dd
Tablo
table, caption, thead, tbody, tfoot
| Ürün | Fiyat |
|---|---|
| İşkembe Çorbası | 450 ₺ |
| Beyran | 480 ₺ |
| Kelle Paça Çorbası | 480 ₺ |
| Toplam (3 ürün) | 1410 ₺ |
Ayraç & Görsel
hr
figure, figcaption, img
Açılır Panel
details, summary
Telefonla arayarak siparişinizi iletebilirsiniz; Kadıköy ve Kozyatağı çevresine paket servis veriyoruz.
Form Öğeleri
form, fieldset, legend, label, input, textarea, select, button
Adres & Zaman
address, time
Kozyatağı O2 Bağlantısı No:80Son güncelleme: