Renk

Marka rengi ve iki temanın renk tokenları.

Marka rengi

Temalar

İki tema vardır: Beyaz (varsayılan) ve Antrasit (koyu). Aynı token adı iki temada farklı değer alır; bileşen yalnız token adını okur.

Beyaz

• Sayfa zemini--theme-bg #f5f5f7
• Kart yüzeyi--theme-surface #ffffff
• Kart içi yüzey--theme-surface-2 #f5f5f7
• Ana metin--theme-ink #1d1d1f
• İkincil gövde--theme-ink-2 #56565a
• Altyazı--theme-ink-3 #7a7a7a
• Soluk / pasif--theme-ink-4 #a3a3a8
• Ayraç çizgisi--theme-separator #e0e0e0
• Form alanı kenarı--theme-field #e0e0e0
• Aksan--theme-accent #4f63e0
• Aksan basılı--theme-accent-press #3f52d6
• Aksan metni--theme-accent-text #4f63e0
• Aksan zemini--theme-accent-soft #eff1fd
• Aksan çizgisi--theme-accent-line #c4cbf5
• Aksan üstü metin--theme-on-accent #ffffff
• Hata metni--theme-danger-ink #c9241a
• Hata zemini--theme-danger-soft #fff2f1
• Hata çizgisi--theme-danger-line #ffd1cc
• Başarı metni--theme-success-ink #1f7a35
• Başarı zemini--theme-success-soft #eaf9ef
• Başarı çizgisi--theme-success-line #b0e8c2
• Uyarı metni--theme-warning-ink #8a5000
• Uyarı zemini--theme-warning-soft #fff6e9
• Uyarı çizgisi--theme-warning-line #ffe0ad
• Üzerine gelme--theme-hover #eeeef2
• Tablo şeridi--theme-zebra #f5f5f7
• Yükleniyor iskeleti--theme-skeleton #e9e9ed
• Örtü--theme-scrim rgba(0, 0, 0, 0.3)
• İpucu zemini--theme-tooltip-bg #1d1d1f
• İpucu metni--theme-tooltip-ink #ffffff

Antrasit

• Sayfa zemini--theme-bg #1c1c1e
• Kart yüzeyi--theme-surface #2c2c2e
• Kart içi yüzey--theme-surface-2 #3a3a3c
• Ana metin--theme-ink #f5f5f7
• İkincil gövde--theme-ink-2 #d1d1d6
• Altyazı--theme-ink-3 #aeaeb2
• Soluk / pasif--theme-ink-4 #8e8e93
• Ayraç çizgisi--theme-separator #48484a
• Form alanı kenarı--theme-field #7c7c80
• Aksan--theme-accent #4f63e0
• Aksan basılı--theme-accent-press #6274e6
• Aksan metni--theme-accent-text #8b98f0
• Aksan zemini--theme-accent-soft #33385a
• Aksan çizgisi--theme-accent-line #4d5594
• Aksan üstü metin--theme-on-accent #ffffff
• Hata metni--theme-danger-ink #ff6961
• Hata zemini--theme-danger-soft #45282a
• Hata çizgisi--theme-danger-line #7a3a37
• Başarı metni--theme-success-ink #30d158
• Başarı zemini--theme-success-soft #213a28
• Başarı çizgisi--theme-success-line #2f6b3e
• Uyarı metni--theme-warning-ink #ffb340
• Uyarı zemini--theme-warning-soft #43341c
• Uyarı çizgisi--theme-warning-line #7a5a26
• Üzerine gelme--theme-hover #3a3a3c
• Tablo şeridi--theme-zebra #313133
• Yükleniyor iskeleti--theme-skeleton #3a3a3c
• Örtü--theme-scrim rgba(0, 0, 0, 0.5)
• İpucu zemini--theme-tooltip-bg #48484a
• İpucu metni--theme-tooltip-ink #f5f5f7

Kontrast

Oranlar bu sayfa üretilirken token değerlerinden hesaplanır (WCAG 2 bağıl parlaklık formülü).