SubBrand

Dasar

Pakai ini, jangan menyusun Logo dan sebuah label sendiri. Hubungan antara mark dan nama produk — jaraknya, perbandingan ukurannya, cara ia dibacakan — milik komponen ini, supaya setiap permukaan menyatakannya dengan cara yang sama.

Ukuran

size menskalakan mark dan namanya bersama-sama — 22, 26, dan 30 piksel — jadi tidak ada cara memperbesar salah satu saja dan merusak perbandingannya.

Nama yang panjang

Nama produk yang panjang membungkus ke baris berikutnya, dan marknya tetap seukuran semula — ia shrink-0, jadi tidak ikut gepeng ketika ruangnya habis.

Di dalam tautan

Lockup ini tidak membawa tujuannya sendiri: bungkus dengan tautan milik aplikasimu, dan beri label="" supaya namanya tidak dibacakan dua kali — tautannya yang menyediakan nama.

Yang sudah diurus sendiri

• Satu tanda, satu nama. Seluruh lockup adalah role="img" dengan satu nama ("Waste4Change UI"); mark dan teksnya sendiri aria-hidden. Tanpa itu pembaca layar mengumumkan logo dan nama produknya sebagai dua hal terpisah.
• Di dalam tautan, beri label="". Tautannya sudah membawa nama; gambar bernama di dalam tautan bernama dibacakan dua kali. Header situs ini melakukannya.
• Ukurannya satu keputusan.size menskalakan mark dan namanya bersama, jadi tidak ada cara memperbesar salah satu saja dan merusak perbandingannya.
• Warna mark tidak bisa diubah — ia diteruskan ke color="auto" pada Logo, yang mengikuti mode terang atau gelap. Panduan merek tidak mengizinkan warna lain, dan Logo menjelaskan alasannya.

gradient atau solid

gradient adalah bawaannya, karena lockup ini adalah identitas dan identitas sebaiknya tampil sama di mana pun. Pakai solid ketika lockup itu disebut di antara isi lain — kop dokumen, daftar produk, satu baris di dalam paragraf — tempat gradient akan menarik perhatian lebih dari yang seharusnya.

Gradientnya memakai dua nilai merek itu sendiri — #1c9dbd (teal mark) menuju #84c15d (hijau wordmark) — jadi nama produknya sewarna persis dengan logo di sebelahnya.

Itu keputusan logotype, dan ongkosnya perlu disebut terang-terangan. Di latar gelap kedua ujungnya kuat: 6,00:1 dan 8,87:1. Di latar terang tidak: tealnya 3,04:1 — pengecualian yang sudah tercatat di DECISIONS #008 — dan hijaunya 2,05:1, di bawah setiap ambang.

WCAG 1.4.3 mengecualikan teks yang merupakan bagian dari logo atau nama merek, dan itulah yang komponen ini render, jadi aturannya tidak dilanggar. Tetapi ujung hijau pada latar terang memang lebih sulit dibaca — kalau keterbacaan harus menang di suatu tempat, pakai color="solid" di situ.

API