Temeller

Marka rengi

Marka paleti, yedi basamaklı ham mor merdiven ve ondan türeyen rol rampası.

--c-*--pl-*--brand-*

Marka paletiham değerler · yalnızca dolgu, zemin ve gradyan

--c-purple—brand purple · the spine of every gradient—

--c-coral—warm accent · error fill, gradient end—

--c-black—brand black · ink and the solid contrast surface—

--c-amber—gold accent · quota, warning, gradient end—

--c-cream—warm paper · band, note, brand-moment ground—

Sağdaki oran yüzey (--n-0) üstünde ölçüldü ve tam da kuralın gerekçesi: bu renkler yazıya dönüştüğü yerde ham hâlleriyle değil, aynı tondan koyulaştırılmış türevleriyle (aşağıdaki mor rampa ve aksan aileleri) kullanılıyor.

Mor merdivenyedi basamak · temadan bağımsız

--pl-1—edge · hover—

--pl-2—ham marka moru · kenar—

--pl-3—purple text · the fill's light end—

--pl-4—dark edge · the fill's light end ◑—

--pl-5—dolgunun koyu ucu—

--pl-6—the fill's dark end ◑ · derived—

--pl-7—the deepest ◑ · derived—

Merdiven ham: iki tema aynı basamakların farklı penceresine bakıyor. Birincil düğmenin dolgusu açık temada 3 → 5, koyu temada 5 → 7 arasında yürüyor; kenarı her iki temada da dolgunun başlangıcından bir basamak açık. Oranlar beyaz metnin o dolgu üstündeki kontrastı — en dip basamakta bile 15,6:1.

Mor ramparol adları · merdivene bağlı

--brand-lift—the gradient's light end—

--brand—fill · selected border · switch—

--brand-deep—the gradient's dark end—

--brand-ink—purple text · a separate step for long copy—

--brand-bg—washed ground · badge fill—

--brand-wash—the lightest wash · brand-moment ground—

--brand-line—the border on top of a wash—

--btn-edge—the primary button's edge · flat, one value—