Hierarki visual: ukuran huruf dan aksi utama

Hierarki visual adalah urutan perhatian di layar: bagian yang paling penting tampil paling menonjol, sehingga pembaca tahu harus mulai dari mana. Sistem desain tidak menentukan ukuran itu ulang di setiap halaman. USWDS menyediakan sembilan token ukuran huruf tema, dari 3xs (13px) sampai 3xl (48px), yang diambil dari 21 token sistem. Tim memilih dari daftar itu, bukan mengetik angka bebas. GOV.UK menandai judul dengan tag h1, h2, h3, lalu memberi kelas gaya yang ikut turun bersama tingkatnya: heading-l untuk h1, heading-m untuk h2, heading-s untuk h3. Panduannya meminta gaya heading dipakai konsisten di seluruh layanan supaya struktur isinya terbaca.

Tag dan tampilan punya tugas berbeda. Tag heading menyatakan struktur dokumen; kelas atau aturan CSS menyatakan ukurannya. Untuk halaman berisi panjang, GOV.UK menggeser seluruh tangga satu tingkat ke atas (h1 memakai heading-xl, h2 memakai heading-l), tetapi urutannya tetap: tingkat yang lebih tinggi tidak pernah tampil lebih kecil daripada tingkat di bawahnya.

Hierarki juga berlaku untuk tombol. GOV.UK memakai tombol default untuk ajakan utama di sebuah halaman dan meminta agar tidak ada beberapa tombol default di satu halaman, karena lebih dari satu ajakan utama melemahkan dampaknya dan membuat pengguna sulit tahu langkah berikutnya. Aksi pendamping memakai tombol sekunder. Tombol peringatan (merah) hanya untuk tindakan destruktif serius yang tidak mudah dibatalkan, misalnya menghapus akun secara permanen, dan maknanya tidak boleh bergantung pada warna merah saja. USWDS menulis hal serupa: aksi yang dipilih sebagian besar pengguna diberi gaya yang membedakannya dari tombol lain, dan jumlah tombol di satu halaman dijaga sedikit.

<style>
  h1 { font-size: 40px; }   /* token 2xl */
  h2 { font-size: 32px; }   /* token xl */
</style>
<h1>Jadwal vaksin hewan</h1>
<h2>Kucing</h2>
<button class="tombol">Daftar vaksin</button>
<button class="tombol tombol-sekunder">Unduh jadwal</button>