Renk

Merid'in paleti tek bir soğuk mavi ve mürekkep tonlu nötrlerden oluşur. Accent etkileşimi ve seçimi işaret eder, geri kalan her şeyi nötrler taşır. Durum renkleri hiçbir zaman büyük, doygun dolgular olarak görünmez; güçlü metinli yumuşak tonlar olarak görünür.

Kurallar

Accent'i kullanıcının etkileşime girebileceği şeyler ve mevcut seçim için kullan. Süsleme ya da vurgu için kullanma.
Kenarlığa başvurmadan önce bölgeleri --mrd-tray ile ayır. Kenarlık gerekiyorsa 1px --mrd-line olur.
Hiyerarşiyi renkle değil, üç metin tonu (ink, body, muted) ve font ağırlığıyla kur.
Bir sayfada en fazla bir dolgu renkli blok olur.

Token'lar

Accent

Token	Açık	Koyu	Rol
`--mrd-accent`	`#3f63f5`	`#6b8aff`	Etkileşimli elemanlar, seçim, focus
`--mrd-accent-hover`	`#3355e6`	`#8aa2ff`	Accent ve linklerin hover state'i
`--mrd-accent-soft`	`#eef1ff`	`rgba(107,138,255,.14)`	Seçili satır, ikon kutusu, bilgi tonu
`--mrd-accent-strong`	`#2c46b8`	`#a9bbff`	accent-soft üzerindeki metin
`--mrd-on-accent`	`#ffffff`	`#ffffff`	Accent dolgu üzerindeki metin

Yüzeyler

Token	Açık	Koyu	Rol
`--mrd-bg`	`#ffffff`	`#0b0d12`	Sayfa arka planı
`--mrd-surface`	`#ffffff`	`#12151c`	Gri yüzey üzerindeki kartlar, dialog'lar, input'lar, menüler
`--mrd-tray`	`#f5f6f8`	`#161a22`	İçe gömük bölümler, sayfadaki kartlar, hover
`--mrd-tray-2`	`#eceef2`	`#1d222c`	Gri yüzey üzerindeki ray, shimmer
`--mrd-subtle`	`#fbfbfc`	`#10131a`	Tablo başlığı, pencere çubuğu, detay paneli

Çizgiler

Token	Açık	Koyu	Rol
`--mrd-line`	`#e6e8ec`	`#262b35`	Tüm ince çizgiler
`--mrd-line-strong`	`#cfd4dc`	`#3a404c`	Kesikli dropzone, kapalı switch kenarlığı

Metin

Token	Açık	Koyu	Rol
`--mrd-ink`	`#0f1219`	`#eef0f4`	Başlıklar, vurgulu metin
`--mrd-body`	`#535a67`	`#a3a9b5`	Gövde metni
`--mrd-muted`	`#646b78`	`#858c98`	Meta, ikonlar
`--mrd-placeholder`	`#6e7581`	`#7c8390`	Input placeholder'ı

Durum

Token	Açık	Koyu	Rol
`--mrd-danger`	`#e5484d`	`#ff6369`	Geçersiz kenarlık, durum noktası
`--mrd-danger-solid`	`#c92a30`	`#c92a30`	Tehlikeli buton dolgusu (beyaz metin, AA)
`--mrd-danger-solid-hover`	`#b42318`	`#b42318`	Tehlikeli buton hover'ı
`--mrd-danger-soft`	`#fff0f0`	`rgba(229,72,77,.12)`	Hata bildirimi arka planı
`--mrd-danger-strong`	`#b42318`	`#ff8a8e`	Hata bildirimi metni
`--mrd-warning-soft`	`#fff8eb`	`rgba(245,166,35,.12)`	Uyarı bildirimi arka planı
`--mrd-warning-strong`	`#93580a`	`#f5c46b`	Uyarı bildirimi metni
`--mrd-success`	`#1f9d63`	`#3ecf8e`	Yalnızca başarı ikonu veya noktası
`--mrd-success-soft`	`#ecf8f1`	`rgba(62,207,142,.12)`	Başarı bildirimi arka planı
`--mrd-success-strong`	`#17744a`	`#7ee2b0`	Başarı bildirimi metni
`--mrd-control-off`	`#d7dbe2`	`#343a46`	Kapalı switch rayı
`--mrd-tooltip-bg`	`#0f1219`	`#eef0f4`	Tooltip arka planı
`--mrd-tooltip-fg`	`#ffffff`	`#0f1219`	Tooltip metni

Kontrast

Aşağıdaki oranlar, aksi belirtilmedikçe sayfa arka planına (--mrd-bg) göre ölçülmüştür. AA eşikleri normal metin için 4.5:1, büyük metin ve arayüz component'leri için 3:1'dir.

Çift	Açık	Koyu	Kullanım
ink, bg üzerinde	18.74	17.03	Başlıklar, vurgulu metin
body, bg üzerinde	6.94	8.24	Gövde metni
body, tray üzerinde	6.42	7.39	İçe gömük bölümlerdeki metin
accent-strong, accent-soft üzerinde	6.98	—	Seçili öğeler, bilgi tonları
danger / warning / success strong, soft üzerinde	5.94 / 5.46 / 5.30	—	Bildirimler
muted, bg üzerinde	3.21	4.25	Yalnızca meta metin
accent, bg üzerinde	4.32	6.20	Linkler, focus halkası, kontroller
on-accent, accent üzerinde	4.32	3.13	Birincil buton etiketi

Kendi component'lerinde renk kullanma

css

.notice {
  background: var(--mrd-warning-soft);
  color: var(--mrd-warning-strong);
  border-radius: var(--mrd-radius-lg);
}