Tata letak

Presisi adalah salah satu prinsip Patepang: kisi empat, tinggi baris kelipatan empat, sudut bertingkat, satu keluarga huruf. Setiap nilai di halaman ini adalah token di aplikasi dan dijaga pemeriksaan di situs, jadi tidak ada yang diukur dengan kira-kira.

Setiap jarak adalah satu langkah dari satu skala. Skala aplikasi berjalan dari 4 sampai 64; situs memakai delapan langkahnya dan menambah dua untuk jarak antarbagian halaman.

Di bawah 4 hanya untuk sentuhan optis: garis 1, geser 2.

Sudut mengatakan tingkat sebuah benda. Makin besar bendanya dan makin tinggi ia mengambang, makin bulat; yang ditekan berbentuk kapsul.

Situs menggambar dengan empat: 4, 8, 12, 24, dengan pil untuk tombol dan lingkaran untuk yang bundar. 4 untuk sorotan di teks, 8 untuk kontrol kecil dan lencana, 12 untuk kotak catatan dan bidang isian, 24 untuk panel, kartu besar, dan tangkapan layar.

Pemisahan datang dari rona dan garis tipis lebih dulu. Bayangan disimpan untuk yang sungguh mengambang di atas halaman: dialog, lembar, toast, menu.

Aplikasi punya tiga tingkat: datar, dengan garis tipis; terangkat, dengan bayangan yang sangat lembut; dan overlay. Di latar gelap bayangan nyaris tidak terlihat, jadi permukaan terangkat memakai rona yang lebih terang dan hanya overlay yang berbayang.

Di situs, kartu dan kolom pencarian datar dan dibatasi garis tipis. Satu-satunya pengecualian adalah tombol toko yang terangkat di patepang.com.

Semuanya dibaca dalam satu kolom. Di aplikasi kolom itu selebar 680 di setiap layar, jadi judul dan isi menjaga tepi kirinya dari layar ke layar. Di situs kolom bacanya 660, kira-kira 70 karakter per baris.

Setiap aksi di aplikasi bisa dikenai di area paling kecil 48, juga bila yang digambar lebih kecil: tombol bundar di header tampak 40 dan terasa 48, dan kontrol kecil setinggi 36 tetap punya area 48.

Di situs yang paling kecil 44, dan kontrol utama 48.

Lakukan

• Mengambil setiap jarak, sudut, dan ukuran dari skalanya. Nilai yang berulang menjadi token.
• Menjaga satu kolom, dengan satu lebar, di setiap layar.
• Menaruh aksi utama di tempat yang terjangkau jempol: di kaki layar atau lembar.
• Membagi daftar dengan garis tipis, bukan menyusunnya dari kartu bertumpuk.

Tidak pernah

• Jarak, radius, atau ukuran huruf yang ditulis tangan.
• Bayangan di bawah sesuatu yang tidak mengambang.
• Kolom selebar jendela, atau lebar yang berbeda di setiap layar.
• Kontrol yang bagi jari lebih kecil dari 48 di aplikasi atau 44 di situs.

Di luar layar, yang sudah pasti adalah logonya: tidak pernah lebih sempit dari 20 mm, menjaga ruang kosong selebar panyecek-nya di setiap sisi, dan dengan satu tinta dicetak biru dalam.

Nilai untuk tinta cetak (CMYK, warna khusus) dan templat untuk materi cetak belum ditetapkan. Sampai itu ada, materi cetak dibuat dari berkas logo dan nilai hex warnanya, lalu dicocokkan dengan situs ini.

Lihat ukuran logo dan warna.

Di aplikasi setiap nilai punya nama. Di situs, sebuah pemeriksaan menolak jarak, sudut, atau ukuran huruf di luar skala.

/* patepang.com: values from the scale, kept by pnpm check:design */
padding: 16px var(--gutter);
border-radius: 12px;

// the app
padding: space[4],          // 16
borderRadius: shape.card,   // 20
minHeight: touchTarget,     // 48