Ikon

Ikon Patepang adalah satu keluarga 580 ikon, digambar dari nol untuk Patepang. Setiap ikon adalah satu kerangka pada kisi 24, dan keempat bobotnya dibaca dari kerangka itu, jadi satu ikon tidak bisa berbeda bentuk dari satu bobot ke bobot lain.

Ujung dan sudutnya membulat, seperti wordmark: satu goresan, berujung bulat. Caret-nya adalah pamepet wordmark.

Bila set ikon lain punya ikon untuk hal yang sama, ikon kami memakai nama yang sudah dikenal orang dari Phosphor, jadi mengganti yang satu dengan yang lain hanya mengubah baris impor. Ikon untuk gagasan milik Patepang sendiri bernama Indonesia.

Setiap bobot punya satu tugas. Goresan tipis dan ringan tidak disediakan: di ukuran kecil ia jatuh di bawah kontras yang dibutuhkan sebuah tanda.

Regular dan fill berbagi satu siluet, jadi ikon tidak bergeser saat menjadi aktif. Ikon yang hanya garis, seperti panah atau centang, tidak punya badan untuk diisi: fill-nya adalah gambar bold-nya.

Lima ukuran, masing-masing dengan bobot gambarnya.

Ikon hidup di 20 × 20 dari 24 × 24-nya, dengan tepi 2 di setiap sisi, dan sisi luar goresan regular jatuh tepat di tepi itu. Empat garis kunci menjaga keluarga ini sama besar di mata: lingkaran 20, persegi 18, bentuk tegak 16 × 20, dan bentuk mendatar 20 × 16.

Goresannya diturunkan dari batang huruf Patepang Sans. Ikon regular 20 di samping teks 16 px menggores 1,25 px, batang hurufnya 1,28 px; ikon bold 1,875 px, batang SemiBold 1,82 px.

Sudut wadah punya tiga radius, 2, 3, dan 4 di sisi luar: sudut antarmuka 8, 12, dan 16 dibagi empat. Titiknya bulat dan sedikit lebih lebar dari goresan di sampingnya, seperti di hurufnya.

Di samping kata, ikon duduk di tengah huruf kapital. Di web itu dua baris CSS; di aplikasi, barisnya menengahkan isinya.

.ic       { width: 1.25em; height: 1.25em; vertical-align: -0.26em; }  /* 20 in 16 px text */
.ic--teks { width: 1em;    height: 1em;    vertical-align: -0.135em; } /* as tall as the text */

Delapan belas ikon tidak ada di set mana pun: semuanya menggambar gagasan milik Patepang, dan dinamai seperti aplikasi menamai gagasan itu. Tempel adalah dua HP yang condong sampai bersentuhan.

• tempelTempel
• penjagaPenjaga
• tempel-ulangTempel ulang
• goyangGoyang bersama
• sekali-lihatSekali lihat
• titik-lahirTitik lahir
• kunci-daruratKunci darurat
• kunci-matiKunci mati
• pertanyaanPertanyaan ke lingkaran
• lingkaran-dekatLingkaran dekat
• lokasi-sementaraLokasi sementara
• tempel-tertundaTempel tertunda
• tempel-bantuTempel bantu
• pesan-menghilangPesan menghilang
• percakapan-terkunciPercakapan terkunci
• papanPapan
• pemulihanPemulihan
• frasa-sandiFrasa sandi

Lakukan

• Satu ikon, satu makna. Ikon mengatakan apa itu sebuah baris; ia tidak menghiasnya.
• Gambar ikon dengan warna kata-kata di sampingnya.
• Beri ikon yang berdiri sendiri label yang bisa diucapkan pembaca layar; sembunyikan yang hanya mengulang kata di sampingnya.
• Pakai fill untuk keadaan aktif bersama isyarat lain: kata, posisi, bentuk.
• Simpan gembok untuk privasi.

Jangan

• Menaruh ikon di atas ubin berwarna, atau mewarnainya untuk menghias.
• Memakai emoji di tempat ikon.
• Memberi satu ikon dua makna, atau satu makna dua ikon.
• Mencampur ikon dari set lain, atau menggambar ulang salah satunya dengan tangan.
• Memakai bobot sebagai satu-satunya pembawa arti.

Beberapa hal sengaja tidak digambar: tempat ibadah, karena menggambar sebagian berarti memilih; minuman beralkohol; logo merek lain; dan bendera negara.

Semua 580, per kategori. Ikon yang namanya biru adalah milik Patepang sendiri.

Di kode, satu ikon adalah satu impor, lewat namanya. Tidak ada bagian lain dari keluarga ini yang ikut ke aplikasi atau halaman.

// patepang.com
import { HouseIcon } from '@patepang/icons/react/House';

// the app
import { HouseIcon } from '@patepang/icons/native/House';

<HouseIcon size={24} weight="fill" />

Masing-masing menerima ukuran, bobot, dan warna, dan digambar dengan warna teks di sekitarnya kecuali diminta lain. Paketnya untuk produk Patepang sendiri; berkasnya tidak ditawarkan di sini.

Versi 0.4 sedang diuji. Sebelum final:

• Dipasang di aplikasi dan di patepang.com, yang keduanya hari ini masih menggambar Phosphor.
• Setiap ikon dilihat di HP sungguhan, pada ukuran pemakaiannya.
• 136 ikon yang digambar sebelum ada layarnya dicoba pada 16 dan 20 px.
• Lisensinya, yang masih draf, ditinjau ahli hukum.