UI Kit

Bu sayfa sitenin yaşayan stil rehberidir (UI Kit). Her bileşen kullanıldığı yere göre canlı önizleme + kanonik token tablosu ile gösterilir. Renkler, tipografi, ölçüler ve ikonlar buradan referans alınır; yeni tasarımlarda bu setin dışında değer üretilmez. Tüm ikonlar inline-SVG (fill:currentColor), FontAwesome/icon-font kullanılmaz.

D = Masaüstü M = Mobil (≤767px)

Breadcrumb (Yol Takibi)Ürünün/sayfanın site içindeki konumu. Masaüstü panel, mobil tek satır otomatik-sağa kaydırma. D + M.

Breadcrumb (yol) — D

Breadcrumb (canlı tasarım): açık gri panel (#F5F5F5 + 1px #DDD border, radius 4) içinde — ev ikonu › kategori › alt kategori › ürün. Linkler pembe #D74DA8 (hover #B83D8F+altçizili), son segment #666 (aktif, link değil). 12px, ayraç "›".

Breadcrumb — Mobil (M): tek satır + yatay scroll

Mobil farkı: uzun yollar alt satıra sarmaz → tek satır yatay kaydırılır. Kaydırma çubuğu gizli (temiz görünüm); başlangıçta otomatik EN SAĞA kaydırılmış → mevcut ürün/sayfa hemen görünür, geçmiş yol sola gizli. Sol+sağ kenar gölgeleri = kaydırılabilir ipucu. Sola sürükleyerek üst kategorilere dön.

Kategori MenüsüTek bileşen — sol "KATEGORİLER" sidebar paneli (D + M aynı). İkonlu ana kategoriler + ürün adedi + alt kategoriler (2. seviye) aç/kapa accordion. Aktif = pembe + sol dikey çizgi. Canlıyla birebir.

D + M — Kategori Sidebar (accordion)

KATEGORİLER

Ağda ve Epilasyon Ürünleri119
- Ağda Isıtıcıları 25
- Boncuk Ağdalar 6
- Kalıp Ağdalar 13
- Kartuş Ağdalar 23
Cilt Bakım Ürünleri140
- Cilt Bakım Kremleri ve Losyonları 30
- Cilt Bakım Maskeleri 20
- Doğal Ürünler 49
- Parafin Ürünleri 3
- Peeling & Scrub ve Tonik 17
Demirbaş Ürünler28
El ve Ayak Bakım Ürünleri203
- Manikür ve Pedikür Ürünleri 88
- Manikür Pedikür Makas ve Törpü 41
- Tırnak Bakım Oje 62
Eldivenler31
Elektronik Kuaför Ürünleri181
- Saç Kesme Makineleri 54
- Sakal Tıraş Makineleri 38
- Fön Makineleri 29
Kuaför Malzemeleri604
- Makaslar 120
- Fırça ve Taraklar 95
- Önlük ve Pelerinler 48
Makyaj Malzemeleri56
Parfümeri-Kolonya73
Saç Bakım Ürünleri88
- Şampuanlar 34
- Saç Kremleri 28
- Saç Maskeleri 26
Renklendirme Ürünleri95
Saç Şekillendirici Ürünler42
MARKALAR

Tek kategori menüsü (masaüstü sol sidebar + mobil hamburger paneli AYNI yapı): "KATEGORİLER" başlığı + her satır ikon + ad + ürün adedi + ▾/› ok. Tıkla → alt kategoriler (2. seviye) açılır accordion (girintili, kendi adetleri). Aktif kategori = pembe metin + sol pembe dikey çizgi. Alt kategorisi olmayan (Makyaj/Eldiven vb.) ok'suz, direkt gider. MARKALAR en sonda. Canlıyla birebir.

Açık satır: › ok 90° döner (▾), başlık pembe + zemin #FBEAF4. Dokunma hedefi ≥44px. Adetler ürün sayfasındaki gerçek değerlerden (status=1, store, date_available).

1 · Renk PaletiToken + hex + kullanım. Etkileşimli ögelerde hover/active = ilgili koyu token. AA notları beyaz zemin içindir.

Marka & Etkileşim

color-primary#D74DA8Birincil CTA, aktif/seçili, favori kalp, link hover, h1 vurgu, kart hover çerçeve.UI 3:1 ✓ · metin AA ✗

color-primary-hover#B83D8FTüm pembe ögelerin hover+active. Outline buton metni/çerçevesi (AA için).AA ✓ 5.12:1

color-primary-soft#FBEAF4Hover zemini (outline/nötr/daire), seçili rozet bg, focus-visible yumuşak ton.yalnız zemin

color-primary-surface#FAF5F9Markalı yüzey: panel/bölüm bg, sidebar filtre zemini, indirim rozeti zemini.yalnız zemin

color-primary-border#F1E1ECYumuşak pembe çizgi: chip durağan çerçeve, pembe yüzey ayraçları.hover→primary

color-secondary#E673B8İkincil aksiyon dolusu: mobil alt bar "Hemen Al" (Sepete Ekle koyu pembe > bu açık pembe = hiyerarşi).UI 3:1 sınırda

Metin

color-text-dark#3F3F46Başlıklar h1-h4, fiyat, strong, sepet ikonu.AAA 10.44:1

color-text-body#555555Gövde (p, li), açıklama, ikincil buton metni.AAA 7.46:1

color-text-mute#9A9AA3Meta: stok kodu, placeholder, breadcrumb. Gövde metni için KULLANMA.2.79:1 yardımcı

Yüzey & Çizgi

color-surface#FFFFFFAna yüzey: sayfa, kart, dropdown, input, modal.zemin

color-border#ECECF0Nötr çizgi: kart/panel/input çerçeve, ayraçlar.focus→primary

Durum (Olumlu / Pasif)

color-success#25D366WhatsApp / Stok Sor, stokta rozeti. Erişim aria-label + ikon ile.marka istisnası

color-success-hover#1EB558Yeşil butonun hover+active.2.69:1

color-disabled-bg#ECECEFPasif "Tükendi" dolgusu. Metin #555'e yükseltilir.#555 → 6.32:1

disabled input#F4F4F6Pasif input zemini + mute metin.zemin

Uyarı & Bildirim

color-danger#C8102EForm hata metni + hata çerçevesi. (Eski #FF6B78 token değildi, AA ✗.)AA ✓ 5.88:1

color-toast-surface#2E2E35Toast/bildirim koyu zemini. Üzerine beyaz metin.AAA 13.6:1

Önemli düzeltme: #FBEAF4 (soft), #1EB558 (success-hover), #B83D8F (primary-hover) artık gerçek token'lardır ve doğrudan referans edilir ("token değil" çelişkisi giderildi).

2 · Tipografi ÖlçeğiGerçek render edilmiş h1–h4 / p / ul / ol / small + token, boyut, ağırlık, satır-yüksekliği.

Canlı önizleme

Kuaför ve Kozmetik Ürünleri

text-h124/20px · 800 · lh1.2

Öne Çıkan Ürünler

text-h219/17px · 700 · lh1.3

Ürün Özellikleri

text-h315/14px · 700 · lh1.35

Kategori

text-eyebrow13px · 700 · UPPER .4px · mute

Maybelline Lash Sensational Maskara

text-h413.5px sabit · 700 · lh1.35

189,90 TL249,90 TL

text-price19px · 700 · dark

Gövde metni ve ürün açıklaması bu tonda okunur. Uzun paragraflar 1.55 satır yüksekliğiyle rahat akar.

text-body14px · 400 · lh1.55 · #555

Cilt tipine uygun formül
Dermatolojik test edilmiştir

ul → text-bodypembe disk · madde arası 4px

Yüzü temizleyin
Ürünü ince tabaka uygulayın

ol → text-bodysayı dark/600

Stok Kodu: MYB-2210 · KDV dahil · 11.5px alt sınır

text-meta11.5px · 400 · lh1.5 · mute

Token tablosu

Token	D	M	W
`text-h1`	24	20	800
`text-h2`	19	17	700
`text-h3`	15	14	700
`text-eyebrow`	13	13	700
`text-h4`	13.5	13.5	700
`text-price`	19	19	700
`text-body`	14	14	400
`text-meta`	11.5	11.5	400

Tek H1/sayfa, vurgu kelimesi pembe + 800. h2 ortalı kullanımda altında 48×3px pembe çizgi. Düzeltme: eski h3 (13/mute/uppercase) → text-eyebrow'a taşındı; h3 artık semantik başlık 15/700/koyu. Global OCMOD iç sayfa tabanını da bu ölçeğe çeker.

3 · Spacing Ölçeği4px tabanlı ritim. Kanonik dikey ritim space-5 (20px). Mobil grid'de gap değil margin kullanılır.

Görsel ölçek

4space-1mikro: ikon-etiket içi, li arası, rozet dikey padding

8space-2ikon-metin gap, başlık-fiyat-buton arası (kart)

12space-3kart iç padding (M); mobil grid gutter (2×6px margin)

16space-4kart padding (D), h1 alt marjı, input yatay padding

20space-5KANONİK dikey ritim · grid satır arası (D)

24space-6bölümler arası, panel iç nefes, h2 alt mesafe

30space-7masaüstü grid yatay gutter, sidebar–içerik

40space-8büyük bölüm/şerit dikey boşluğu (footer üstü)

İlkeler

Token	px
`space-1`	4px
`space-2`	8px
`space-3`	12px
`space-4`	16px
`space-5`	20px
`space-6`	24px
`space-7`	30px
`space-8`	40px

space-3 çift anlam: kart iç padding (M) = 12px net; mobil grid gutter = kartlar arası 12px ama mekanizma her kart yanında 6px margin (6+6). Mobilde flex gap render edilmez → margin/padding kullan.

4 · İkon SistemiTek sistem: inline-SVG, 24×24 viewBox. Gezinme/aksiyon = FILL (dolu) · kategori/navigasyon = STROKE 1.7 (outline). FA/icon-font yasak.

Boyut token'ları (sabit kutuda optik hizalama)

icon-sm16px

icon-md18px

icon-lg20px

icon-xl26px

icon-sm meta/breadcrumb/kart yıldız · icon-md buton içi, footer, mobil bar (varsayılan) · icon-lg vitrin kutusu/bölüm yanı · icon-xl header üst-bar (30px sabit kutu).

Düzeltme: footer ikonu artık icon-md 18px (eski 20px/icon-lg değil). Her ikon sabit kutuda inline-flex + center → eşit optik ağırlık. Stroke kalınlığı 1.7 ölçekli (16px'te bilinçli biraz kalın).

Headericon-xl @30 / arama icon-md

icon-search

icon-cart

icon-heart

icon-user

icon-menumobil

icon-instagram

icon-whatsapp

icon-mail

trendyol Favorilerim (3) 99+ Sepetim ₺39.144,09

Üst-bar gerçek bileşenleri: Trendyol (turuncu #F27A00 metin link) · sosyal ikonlar (IG pembe · WA yeşil · mail gri) · Favorilerim (kalp + adet) · Sepetim (sepet ikonu + adet rozeti "99+" + tutar). Mobil (M): tutar metni gizli, sadece ikon + rozet; sosyal/favori hamburger menüye taşınabilir.

Hover: link/ikon → pembe #D74DA8. Üst-bar favori/sepet icon-xl 26 @30px kutu.

Kart & Detay & Carousel (FILL)

icon-cart

icon-bolt

icon-warning

icon-truck

icon-shield

icon-lock

icon-headset

icon-share

icon-minus

icon-plus

chevron-left

chevron-right

Buton içi icon-md (18), mobil alt bar 18. Hepsi sabit kutuda. Carousel okları bilinçli daire (r50).

Rating (FILL)

icon-star

star-half

star-o

Dolu/yarım color-primary, boş color-border. icon-sm 16 kart · icon-md 18 detay.

Footer (icon-md 18, color-primary)

shield-check

icon-grid

icon-truck

icon-lock

icon-headset

Düzeltme: ~21 karışık FA ikon ve 13–23px boyutlar → bu sade set, tek color-primary + icon-md(18).

Kategori / Sol Menü (STROKE 1.7 — outline)

makyaj

cilt-bakım

saç-bakım

saç-şekillendirici

parfümeri

ağda

İkili kural (korunur): kategori/sol menü = stroke 1.7 outline; gezinme/aksiyon = fill dolu. Renk currentColor (menü metniyle aynı, hover'da pembe). Kaynak: _duzeltmeler/kategori-ikonlari/*.svg (13 SVG: viewBox 0 0 24 24, fill:none, stroke-width 1.7, linecap/linejoin round).

5 · Ürün Grid'iGerçek mini ürün-kart grid'i. Masaüstü (D) 4 sütun · Mobil (M) 2 sütun. Bu kutuyu daraltarak kırılımı canlı gör.

D: sidebarsız 4 sütun · gutter space-7 (30px) · satır space-5 (20px)

%24 İndirim

Maybelline Lash Sensational Sky High Maskara Siyah

(42)

189,90 TL249,90 TL

L'Oréal Paris Revitalift Hyaluronik Asit Nemlendirici Serum

(118)

329,00 TL

Garnier Bitki Bazlı Micellar Makyaj Temizleme Suyu 400ml

(7)

94,50 TL

NYX Professional Makeup Matte Likit Ruj Set

(3)

159,90 TL

Aritmetik (sidebarlı referans): içerik kolonu 846px = 3×262 (kart) + 2×30 (gutter). Kart 262px, iç padding 16×2 → görsel alanı ~230px (aspect-ratio 1/1). XL ≥1200px: konteyner 1200px'te sabit, sütun sayısı artmaz. Satır yüksekliği align-items:stretch + başlık 2 satır clamp ile butonlar hizalı.

M: 2 sütun · gutter space-3 (12px = 2×6px margin) · ≤360px 8px

Maybelline Lash Sensational Maskara

189,90 TL

L'Oréal Revitalift Serum

329,00 TL

Mobil favori dairesi ≥44×44px (dokunma hedefi, WCAG 2.5.5). Kart akışkan; ≤360px gutter 8px → kart ≥150px. Kart <140px'e düşerse tek sütuna geç.

6 · Kart AnatomisiEtiketli gerçek kart: görsel / marka / başlık / rating / fiyat / buton + ölçüler.

D + M

1 2

%24 İndirim

Maybelline Lash Sensational Sky High Maskara Siyah

(42)

189,90 TL249,90 TL

Görsel 1:1 — aspect-ratio:1/1, object-fit:contain (sise/kutu kırpılmaz). Sol-üst indirim rozeti (surface zemin + #B83D8F, radius-pill), sağ-üst favori dairesi (D 42px / M ≥44px).
Marka — text-eyebrow 13/700 UPPERCASE mute, 1 satır ellipsis. Başlık — text-h4 13.5/700 koyu, 2 satır clamp (min-h 36px → butonlar hizalı). Rating — icon-star ×5 icon-sm 16 pembe + (N) text-meta. Fiyat — güncel text-price 19/700 koyu + eski üstü çizili text-meta. Buton — b-primary b-sm h36 r4 tam genişlik (yoksa b-disabled "Tükendi").

Kart kabı	surface · 1px border · radius-lg 12 · padding 16 (M:12)
Görsel→metin	space-3 (12) · başlık→fiyat→buton space-2 (8)
Hover	çerçeve pembe + gölge 0 6px 18px rgba(215,77,168,.16)

7 · Ürün Detay ŞemasıGerçek site düzeni: favori + indirim görselin köşesinde · fiyat "Özel Fiyat" kutusunda · aksiyonlar tek satır (Sepete Ekle · Hemen Al · WhatsApp ikon). Mobilde alt sabit barda fiyat + aksiyonlar (Sepete Ekle büyük/koyu, Hemen Al & WhatsApp etiketli/küçük). Tükenmiş için ayrı gösterim.

Masaüstü (D) — stokta

%24 İndirim

Anasayfa›Makyaj›Maskara

Lash Sensational Maskara Siyah

Marka: Maybelline

Ürün Kodu: 8680531234567

Stok Durumu: Stokta var

0 yorum · Yorum Yap

Kuaförlere Özel Fiyat249,90 TL189,90 TL

Adet

Hızlı Kargo Orijinal Ürün Güvenli Ödeme

Bilgi kolonu sırası: H1 → Marka (link) → Ürün Kodu (barkod) → Stok Durumu → Fiyat kutusu ("Kuaförlere/Size/Toptancılara Özel Fiyat"; indirimde eski fiyat üstü çizili) → Adet → aksiyonlar TEK satır (Sepete Ekle · Hemen Al · WhatsApp çıplak ikon = "Sipariş Ver") → rating. Favori + "%24 İndirim" rozeti görselin köşesinde.

Sekmeler: Açıklama · Yorumlar (Ürün Özellikleri sekmesi kaldırıldı — kimlik bilgisi zaten H1 altında; ürünün ayrı niteliği yok). WhatsApp: yeşil çıplak ikon (daire/kutu yok), hover #1EB558.

Mobil (M) — stokta

Lash Sensational Maskara Siyah

%24 İndirim

Kuaförlere Özel Fiyat189,90 TL

Özel Fiyat189,90₺

Alt sabit bar (canlı kanon — kullanıcı onaylı): sol fiyat (₺ pembe) · Sepete Ekle BÜYÜK koyu #D74DA8 (yatay ikon+yazı) · Hemen Al bir tık küçük açık #e673b8 (ikon üst/yazı alt) · WhatsApp yeşil #25D366 (ikon üst/yazı alt). Hepsi tek satır; hiyerarşi renk+boyutla. Bu mobil bar donduruldu (whatsapp.ocmod), UI Kit onu yansıtır.

Masaüstü (D) — TÜKENMİŞ ürün

Black-Red Kil Maske Aloevera 400 Gr

Marka: Black and Red

Ürün Kodu: 8680999111222

Stok Durumu: Tükendi

Fiyat149,90 TL

Tükenmiş (D): Sepete Ekle / Hemen Al yerine → Tükendi (gri, pasif, ikonsuz — durum, alarm değil) + WhatsApp'tan Stok Sor (yeşil, WhatsApp ikonu). Fiyat yine görünür (tükenmiş ürünün de fiyatı var). Stok Durumu kırmızı "Tükendi". İndirim rozeti yok.

Mobil (M) — TÜKENMİŞ

Black-Red Kil Maske Aloevera 400 Gr

Kuaförlere Özel Fiyat149,90 TL

Stok Durumu: Tükendi

Özel Fiyat149,90₺

Tükenmiş (M): alt bar = fiyat (görünür) + Tükendi (gri, ikonsuz) + Stok Sor (yeşil, WhatsApp ikon). Stoktaki Sepete Ekle / Hemen Al gizli.

8 · ButonlarGerçek butonlar + durum/hover notları. Tüm etkileşimli ögede focus-visible ring (hover'dan ayrı, zorunlu — WCAG 2.4.7).

Birincil & Yüksek-vurgu

`btn-primary`	bg primary · beyaz · h46/36 · r4 · 15/600. Hover #B83D8F · active +1px.
`btn-outline`	beyaz + #B83D8F çerçeve/yazı. Hover dolu #D74DA8 + beyaz.
`btn-success`	bg #25D366 · beyaz. Hover #1EB558. Dar mobilde ikon-only + aria.

focus-visible (klavye): outline 2px (primary/outline→#D74DA8, success→#1EB558) + offset 2px; transition'a outline eklenmez (anında görünür). Arka plan değişimi tek başına WCAG 2.4.7 karşılamaz.

Nötr · Chip · Pasif · Daire

`btn-default`	beyaz + #ECECF0 border · metin #555 · h46 (b-sm h36). Vazgeç = Güncelle: aynı stil (nötr ikincil); aralarında RENK farkı yok. Hover #FBEAF4 + pembe.
`btn-chip`	h34 r8 · #B83D8F + #F1E1EC. Seçili = dolu pembe.
`btn-disabled`	DURUM "Tükendi" · #ECECEF + #555 (AA 6.32:1). Hover yok · not-allowed. Alarm değil (kırmızı değil).
`btn-circle`	r50 · M ≥44px · daima aria-label. .on dolu pembe · .green WhatsApp · .nav nötr.

Jenerik disabled (her btn-* / b-circle) = opacity .5 + cursor:not-allowed + pointer-events:none. btn-disabled ise yalnız "Tükendi" semantik durumu (etkileşimsiz, focus gerekmez).

9 · Formlarinput / select / textarea + miktar stepper + sayfalama. Ortak h44, r4. Odakta görünür ring zorunlu.

D + M

Girdi & Seçim

Arama

Sıralama

Mesaj

Arama: sol içte arama ikonu + sağ içte X temizleme (input doluyken görünür, tıkla→boşalt). Kontroller: h44, r4, #ECECF0 çerçeve, metin 14px, placeholder mute. Select native ok yerine inline-SVG chevron. Label 13/600.

Odak (focus-visible): çerçeve pembe + box-shadow:0 0 0 3px #FBEAF4 (görünür ring, klavye için zorunlu).

D + M

Miktar & Hata Durumu

Adet (stepper)

E-posta (hata örneği)

Geçerli bir e-posta adresi girin.

Pasif input

Miktar: input ~70px ortalı + iki yanda stepper; minus min=1'de disabled. Hata: çerçeve color-danger #C8102E + altında 11.5px+ hata metni.

Pasif: bg #F4F4F6 + mute metin + not-allowed. Mobilde input %100, dikey istif margin ile.

D + M — Sayfalama (pagination)

Sayfa geçiş bloğu: İlk «« · Önceki ‹ · sayfa numaraları (mevcut = dolu pembe) · "…" atlama · Sonraki › · Son »». Mevcut sayfa aria-current="page".

Hover: #FBEAF4 zemin + pembe metin. Aktif: dolu #D74DA8 beyaz. Uç oklar tek/son sayfada disabled (opacity .5).

10 · Bildirim (Toast)Koyu zemin + beyaz metin + durum ikonu. Sepete ekleme & favori onayı. Alt-orta, ~3.5sn.

Sepete Eklendi (D + M)

Ürün sepete eklendi.Sepete git

Sepet toast'ı: başarı ikonu color-success yeşil + "Sepete git" eylem linki.

Favorilere Eklendi (D + M)

Favorilere eklendi.Favorilerim

Favori toast'ı: kalp ikonu color-primary pembe + "Favorilerim" linki. Favoriden çıkarınca: "Favorilerden çıkarıldı."

Token: zemin color-toast-surface #2E2E35, metin beyaz (AAA 13.6:1), eylem linki koyu zeminde açık pembe (#FBEAF4). Hover (link): alt çizgi + tam beyaz. Aşağıdaki butonun üzerine gelerek hover'ı dene:

Üzerime gelin →linkin hover'ı

Ölçü & İlke ÖzetiTek kanonik kaynak bu sayfadır (bilgi sayfası id=8 / .hkkit).

Radius

`radius-control`	4 — buton / input / select
`radius-chip`	8 — chip (8px pill değil)
`radius-lg`	12 — kart / panel
`radius-pill`	999 — rozet / sayı badge
`radius-circle`	50% — daire ikon-buton

Yükseklik & İkon

Buton	36 kart · 46 detay/input · 54 mobil bar · 34 chip
Daire	42 (D) · ≥44 (M, dokunma)
İkon	sm16 · md18 (varsayılan) · lg20 · xl26
İkon kuralı	inline-SVG · gezinme=fill · kategori=stroke 1.7

Etkileşim İlkeleri

Geçiş	0.15s ease · pembe → #B83D8F · active +1px
focus-visible	outline 2px (input 3px soft) · hover'dan AYRI · zorunlu
disabled	opacity .5 + not-allowed + pointer-events:none
Mobil boşluk	margin/padding (flex gap render edilmez)

Yeni serbest değer üretme — bu setten seç. Token adları İngilizce kebab-case; içerik Türkçe. preview/ui-kit.html eski/arşiv, referans alınmaz.