Fondasi

Angka-angka yang tidak boleh ditulis ulang di mana pun. Semuanya dibaca langsung dari berkas tokennya saat halaman ini dibangun — jadi kalau ada yang berubah di sana, ia berubah di sini juga, tanpa ada yang perlu menyunting halaman ini.

Tiap spesimen dirender pada ukuran sebenarnya. Kolom terakhir menghitung berapa kali token itu benar-benar dipakai di /projects. Saat ini 1 token tidak pernah dipakai sama sekali — ditandai, bukan disembunyikan, supaya kamu bisa memutuskan mencabutnya.

Bagian 1 dari 5

Bidang & warna

Warna di ruang kerja ini tidak pernah ditulis sebagai warna. Yang ditulis adalah perannya — bidang, garis, tinta — dan tiap peran punya dua nilai: satu untuk terang, satu untuk gelap.

Dijaga DSN-03 DSN-11

Yang mana yang kupakai

Latar biasa memakai bidang utama. Tiap satu langkah lebih ke dalam berarti satu langkah lebih menuntut perhatian — dan lebih dari dua langkah hampir selalu berarti susunannya yang salah, bukan warnanya.
Garis rambut memisahkan hal yang sederajat; garis yang menuntut dipakai kalau pemisahannya memang berarti.
Tinta redup untuk teks pendukung, tinta paling redup untuk keterangan yang boleh dilewati. Kalau sebuah kalimat penting, ia tidak boleh redup.

Token	Terang	Gelap	Dipakai
latar paling luar, di belakang segalanya	#fafafa	#000000	3
bidang utama tempat isi duduk	#ffffff	#0a0a0a	41
satu langkah ke dalam — panel, kartu	#f5f5f5	#171717	38
dua langkah ke dalam — kode, isian	#efefef	#232323	23
garis rambut antar hal yang sederajat	#ebebeb	#262626	65
garis yang memang memisahkan	#e0e0e0	#404040	28
teks utama, dan hanya teks utama	#171717	#f5f5f5	116
teks pendukung	#6b6b6b	#a3a3a3	66
keterangan yang boleh dilewati	#a0a0a0	#6b6b6b	76
teks di atas bidang pekat	#ffffff	#0a0a0a	23
saat kursor mampir	#f5f5f5	#1f1f1f	16
saat sesuatu sedang dibuka	#ededed	#2a2a2a	5
Status
sedang berjalan	#a8482a	#d98f6d	5
menunggu sesuatu di luar kendali	#87651c	#ceac5b	9
berpindah, sudah lepas dari tangan	#2f5a80	#86b0d6	5
selesai dan benar	#1f6b45	#6ebe96	19
gagal atau dibatalkan	#8c2f2f	#d67a7a	24

Bagian 2 dari 5

Huruf

Sepuluh ukuran, yang terkecil 12px dan tak ada yang lebih kecil. Tiap baris di bawah dirender pada ukuran sebenarnya, supaya memilih tidak perlu membayangkan.

Dijaga DSN-10 DSN-14

Yang mana yang kupakai

Hampir semua teks antarmuka memakai ukuran terkecil atau satu di atasnya. Kalau kamu ragu, ambil yang terkecil — ia menanggung sebagian besar ruang kerja ini.
Ukuran besar hanya untuk judul halaman dan bilangan yang memang jadi subjek. Judul bagian cukup dua langkah di atas teks biasa.
Kolom paling kanan menunjukkan berapa kali tiap ukuran benar-benar dipakai. Yang bernilai nol bukan cadangan — ia anak tangga yang belum terbukti perlu ada.

Sebelum lantai dipasang

Konstitusi repo — pasal yang mengikat

11px

Sesudah

Konstitusi repo — pasal yang mengikat

12px

Anak tangga terkecil dulunya 11px dan dipakai 76 kali. Selisihnya satu piksel, dan itu cukup untuk membuat seluruh halaman Docs terasa sesak dibaca.

Token	Nilai	Ukuran sebenarnya	Dipakai
label, keterangan, hampir semuanya	12px	Konstitusi repo	176
teks daftar dan baris	13px	Konstitusi repo	22
paragraf yang dibaca sungguhan	14px	Konstitusi repo	15
paragraf pembuka	15px	Konstitusi repo	5
judul kecil	18px	Konstitusi repo	2
judul bagian	21px	Konstitusi repo	4
judul bagian besar	24px	Konstitusi repo	tak pernah
bilangan yang jadi subjek	28px	Konstitusi repo	2
judul halaman	34px	Konstitusi repo	6
judul sampul	40px	Konstitusi repo	4

Bagian 3 dari 5

Jarak

Sembilan langkah, semuanya kelipatan empat, ditulis sebagai piksel kaku. Bilah di bawah digambar setinggi angka aslinya.

Dijaga DSN-02 DSN-10

Yang mana yang kupakai

Tiga langkah pertama menanggung hampir semua jarak di dalam satu benda: antar baris, antar label dan isinya.
Langkah menengah untuk jarak antar benda yang berbeda. Langkah besar untuk jarak antar bagian halaman.
Kalau sebuah jarak butuh berbeda antar ukuran layar, sebut titik hentinya — jangan pakai rumus yang melar sendiri.

Token	Nilai	Dipakai
nyaris menempel	4px	8
antar benda kecil dalam satu baris	8px	62
jarak baku di dalam satu benda	12px	106
antar benda yang berbeda	16px	73
pengisi tepi panel	20px	53
antar kelompok	24px	13
antar bagian	32px	9
antar bagian besar	40px	7
jeda yang disengaja	56px	2

Bagian 4 dari 5

Radius

Enam sudut. Radius bukan selera — ia ukuran: kotak besar bersudut kecil terlihat kaku, kotak kecil bersudut besar terlihat menggelembung.

Dijaga DSN-10

Yang mana yang kupakai

Apa pun yang berbentuk pil — tombol, keping, baris navigasi — memakai sudut penuh. Ini yang paling sering dipakai di seluruh ruang kerja.
Kartu dan panel memakai sudut sedang. Kalau kamu ragu antara dua nilai berdekatan, pilih yang lebih sering dipakai; selisihnya tak pernah sepenting keseragamannya.
Sudut terkecil untuk benda kecil yang menempel di dalam benda lain, seperti keping kode di tengah kalimat.

Tanpa tangga

Dengan tangga

Empat nilai untuk satu pekerjaan yang sama. Tak satu pun pernah benar-benar diputuskan — masing-masing hanya “kelihatan pas” pada satu sore tertentu. Dulu ada sembilan belas.

Token	Nilai	Dipakai
keping kode, petak mungil	8px	5
isian dan kotak kecil	12px	10
kartu dan panel — yang paling sering	16px	34
panel besar	22px	8
bidang selebar halaman	28px	1
apa pun yang berbentuk pil	999px	45

Bagian 5 dari 5

Tinggi & kerapatan

Tiga tinggi untuk benda yang bisa ditekan, tiga kerapatan untuk baris di dalam daftar. Semuanya dikunci, bukan diberi batas bawah.

Dijaga DSN-05

Yang mana yang kupakai

Tinggi sedang untuk hampir semua tombol. Yang kecil kalau ia duduk di dalam bilah alat; yang besar kalau ia satu-satunya tindakan di layar.
Baris rapat untuk daftar panjang yang dipindai, baris longgar untuk daftar pendek yang dibaca.
Tinggi dikunci berarti baris tertinggi tidak menentukan tinggi semuanya — daftar tidak bergelombang mengikuti isi yang kebetulan panjang.

Token	Nilai	Ukuran sebenarnya	Dipakai
di dalam bilah alat	32px	32px	10
tinggi baku tombol	36px	36px	7
tindakan tunggal di layar	44px	44px	8
Kerapatan baris
daftar panjang yang dipindai	40px	40px	1
kerapatan baku	48px	48px	1
daftar pendek yang dibaca	56px	56px	2

Tombol salin di kolom pertama mengambil var(--nama), bukan nilainya. Menyalin nilai adalah cara halaman fondasi ikut melahirkan pelanggaran yang seharusnya ia cegah.