Warna
Warna menentukan palet utama, bahaya, kejayaan, amaran, dan kelabu, dengan panduan penggunaannya pada latar belakang, butang, dan teks untuk memastikan kontras, keterbacaan, dan konsistensi.
MYDS membahagikan palet warna kepada dua (2) kategori:
- Warna primitif: Warna asas yang kekal konsisten dalam kedua-dua mod cerah dan gelap.
- Token warna: Warna dinamik yang menyesuaikan mengikut mod (cerah atau gelap).
Warna Primitif
Warna primitif adalah warna asas yang digunakan di seluruh sistem reka bentuk tetapi tidak mempunyai varian khusus untuk mod gelap. Untuk penggunaan warna yang menyesuaikan dengan mod gelap, sila rujuk set "Token Warna".
- Pratonton Warna Primitif
- Nama Warna Primitif
- Nilai HEX Warna Primitif
- Token Warna
Putih
Sesuai untuk latar belakang yang memberikan kejelasan.
Kelabu
Warna asas untuk kelabu. Biasanya digunakan untuk tajuk, teks, dan latar belakang. Untuk kesan halus, ia sesuai digunakan dalam teks pemegang tempat, penerangan, pemisah, garis besar, dan latar belakang.
Utama
Warna ini digunakan pada pautan terpilih, tab, butang utama, dan mana-mana elemen yang memerlukan penonjolan.
Nota
Jika produk tidak menggunakan biru utama ini sebagai warna utama, pertimbangkan untuk mencipta palet warna yang berasingan.
Bahaya
Menunjukkan isu atau ralat kritikal. Sesuai untuk mesej ralat, butang padam, dan kotak amaran yang mendesak.
Berjaya
Menandakan tindakan atau hasil yang berjaya. Sesuai untuk mesej kejayaan, pop-up pengesahan, dan penunjuk kemajuan.
Amaran
Digunakan untuk mesej dan amaran berhati-hati. Sesuai untuk sepanduk amaran, lencana pemberitahuan, dan ikon amaran.
Token Warna
Mod Cerah
Token warna adalah set gaya yang direka khas untuk antara muka gelap. Ia memastikan kontras yang tinggi untuk keterbacaan dan mematuhi garis panduan nisbah kontras WCAG 2.1, menyokong aksesibiliti untuk semua pengguna. Pembangun boleh menggunakan token ini untuk mengintegrasikan warna yang boleh diakses dengan lancar dalam reka bentuk cerah dan gelap.
- Pratonton Token Warna (Latar Belakang, Teks, Garis Luar, Cincin Fokus)
- Nama Token Warna
- Rujukan Token Warna daripada Warna Primitif
- Token Warna: “bg-” = Latar Belakang “txt-” = Teks “otl-” = Garis Luar “fr-” = Cincin Fokus
Latar Belakang
Token latar belakang mentakrifkan warna asas untuk permukaan dan bekas. Ia memastikan kontras yang betul dan hierarki visual di seluruh komponen yang berbeza.
Teks
Token teks digunakan untuk semua jenis elemen teks, memastikan keterbacaan dan aksesibiliti. Ia dioptimumkan untuk keterbacaan dalam pelbagai keadaan dan mod.
Garis Luar
Token garis luar mentakrifkan warna untuk sempadan dan garis luar, mencipta pemisahan yang jelas dan penekanan untuk komponen UI.
Cincin Fokus
Token cincin fokus memberikan penekanan yang diperlukan pada elemen interaktif apabila mereka menerima fokus papan kekunci.
Mod Gelap
Token warna adalah set gaya yang direka khas untuk antara muka gelap. Ia memastikan kontras yang tinggi untuk keterbacaan dan mematuhi garis panduan nisbah kontras WCAG 2.1, menyokong aksesibiliti untuk semua pengguna. Pembangun boleh menggunakan token ini untuk mengintegrasikan warna yang boleh diakses dengan lancar dalam reka bentuk cerah dan gelap.
- Pratonton Token Warna (Latar Belakang, Teks, Garis Luar, Cincin Fokus)
- Nama Token Warna
- Rujukan Token Warna daripada Warna Primitif
- Token Warna: “bg-” = Latar Belakang “txt-” = Teks “otl-” = Garis Luar “fr-” = Cincin Fokus
Latar Belakang
Token latar belakang mentakrifkan warna asas untuk permukaan dan bekas. Ia memastikan kontras yang betul dan hierarki visual di seluruh komponen yang berbeza.
Teks
Token teks digunakan untuk semua jenis elemen teks, memastikan keterbacaan dan aksesibiliti. Ia dioptimumkan untuk keterbacaan dalam pelbagai keadaan dan mod.
Garis Luar
Token garis luar mentakrifkan warna untuk sempadan dan garis luar, mencipta pemisahan yang jelas dan penekanan untuk komponen UI.
Cincin Fokus
Token cincin fokus memberikan penekanan yang diperlukan pada elemen interaktif apabila mereka menerima fokus papan kekunci.
