Kit UI · Fondasi
Fondasi desain, diukur satu per satu.
Setiap token dibaca langsung dari theme.css saat halaman ini dibangun, termasuk rasio kontrasnya terhadap kertas. Tidak ada angka yang diketik tangan.
01
Warna
Teks butuh rasio 4,5:1 atau lebih, teks besar dan ikon 3:1 (WCAG 2.2 AA). Diukur terhadap paper dan paper-raised.
Teks, ikon, dan status
ink
#14201a
- Di atas paper
- 15,83:1
- Di atas paper-raised
- 16,51:1
Lulus AA: teks
ink-muted
#56645b
- Di atas paper
- 5,87:1
- Di atas paper-raised
- 6,13:1
Lulus AA: teks
sage-400
#a7b5a0
- Di atas paper
- 2,02:1
- Di atas paper-raised
- 2,11:1
Di bawah AA: hanya dekorasi
firdaus-500
#2d7656
- Di atas paper
- 5,16:1
- Di atas paper-raised
- 5,38:1
Lulus AA: teks
firdaus-700
#1b4d39
- Di atas paper
- 9,14:1
- Di atas paper-raised
- 9,53:1
Lulus AA: teks
firdaus-900
#0e2c20
- Di atas paper
- 14,15:1
- Di atas paper-raised
- 14,76:1
Lulus AA: teks
gold-500
#b68a3e
- Di atas paper
- 2,95:1
- Di atas paper-raised
- 3,08:1
Di bawah AA: hanya dekorasi
danger-500
#b3402e
- Di atas paper
- 5,36:1
- Di atas paper-raised
- 5,60:1
Lulus AA: teks
danger-700
#8f2a1c
- Di atas paper
- 7,87:1
- Di atas paper-raised
- 8,21:1
Lulus AA: teks
warning-500
#946506
- Di atas paper
- 4,80:1
- Di atas paper-raised
- 5,01:1
Lulus AA: teks
warning-700
#6b4604
- Di atas paper
- 7,91:1
- Di atas paper-raised
- 8,25:1
Lulus AA: teks
success-500
#2a7a4f
- Di atas paper
- 4,95:1
- Di atas paper-raised
- 5,17:1
Lulus AA: teks
success-700
#17503a
- Di atas paper
- 8,82:1
- Di atas paper-raised
- 9,20:1
Lulus AA: teks
info-500
#3a6f80
- Di atas paper
- 5,26:1
- Di atas paper-raised
- 5,48:1
Lulus AA: teks
info-700
#274c59
- Di atas paper
- 8,74:1
- Di atas paper-raised
- 9,12:1
Lulus AA: teks
Permukaan
paper
#fbf8f2
- Teks ink di atasnya
- 15,83:1
paper-raised
#fffdf9
- Teks ink di atasnya
- 16,51:1
sage-100
#eef1ea
- Teks ink di atasnya
- 14,70:1
sage-200
#dfe5d9
- Teks ink di atasnya
- 13,06:1
danger-100
#f7e4df
- Teks ink di atasnya
- 13,68:1
warning-100
#f6ecd2
- Teks ink di atasnya
- 14,26:1
success-100
#e3f0e8
- Teks ink di atasnya
- 14,30:1
info-100
#e3edf0
- Teks ink di atasnya
- 14,09:1
02
Skala huruf
Enam langkah bernama, masing-masing dengan ukuran, tinggi baris, dan jarak huruf.
display
4.5rem
tinggi baris 1
jarak huruf -0.04em
Sekolah yang tertata.
title
2.5rem
tinggi baris 1.1
jarak huruf -0.03em
Sekolah yang tertata.
heading
1.5rem
tinggi baris 1.25
jarak huruf -0.02em
Sekolah yang tertata.
body
1rem
tinggi baris 1.6
Sekolah yang tertata.
small
0.875rem
tinggi baris 1.5
Sekolah yang tertata.
caption
0.75rem
tinggi baris 1.4
jarak huruf 0.02em
Sekolah yang tertata.
03
Bentuk, bayangan, dan jarak
Sudut ganda untuk wadah, bayangan lembut yang menyebar, dan irama padat untuk layar kerja.
Sudut
-
shell
2rem
-
core
calc(2rem - 0.375rem)
Bayangan
-
ambient
-
inset-highlight
Jarak layar kerja
-
work-sm 0.5rem
-
work 0.75rem
-
work-lg 1.25rem
Angka tabular
- 1.250.000
- 87.500
- 4.300
- 12
Angka sejajar dalam kolom.
04
Gerak
Pegas untuk benda yang bergerak, expo untuk yang muncul. Bila pengguna memilih gerak dikurangi, semua langsung diam di tempatnya.
spring
cubic-bezier(0.32, 0.72, 0, 1)
out-expo
cubic-bezier(0.16, 1, 0.3, 1)
05
Ikon
Phosphor Light, garis tipis, digambar sebaris dengan currentColor. Tersembunyi bagi pembaca layar kecuali diberi label.
- search
- plus
- x
- check
- caret-down
- caret-right
- arrow-left
- arrow-right
- arrow-up-right
- pencil-simple
- trash
- calendar-blank
- clock
- user
- users
- student
- buildings
- gear
- sign-out
- sign-in
- info
- warning
- warning-circle
- check-circle
- download-simple
- upload-simple
- funnel
- list
- dots-three
06
Cincin fokus
Satu cincin untuk setiap elemen yang bisa difokuskan: firdaus-500, 2 px, jarak 2 px. Tekan Tab untuk melihatnya.