TOKENAI Design Kit
Typography-First: hampir seluruh identitas visual dibangun dari huruf — pilihan font, skala ukuran, spacing, dan komposisi; imagery hanya pendukung (grayscale, baru berwarna saat disorot). Pasangan serif Fraunces (display berkarakter dengan sumbu optical size) dan Source Serif 4 (body yang nyaman dibaca panjang), ditemani DM Mono untuk label dan kicker. Ornamennya perangkat tipografi klasik: drop cap, pull quote, angka seksi raksasa yang pudar, fleuron (❦), hairline rules, small caps, dan angka oldstyle di teks berjalan. Kanvas kertas hangat, tinta hampir hitam, aksen oxblood dan ochre. Kit satu-tema — terang secara bawaan, karena huruf paling nyaman dibaca di atas kertas. Lihat juga contoh halaman nyata lewat bilah navigasi di atas.
Fraunces (display & heading serif berkarakter, optical size otomatis) · Source Serif 4 (body) · DM Mono (label, kicker & kbd) · angka oldstyle di teks, lining di tabel & statistik
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
Aa — Huruf memikul segalanya
#8C2F39#71222B#1A1815#B08D3E#FAF9F6#FFFFFF#F2EFE9#1A1815#6E6A61#E3DFD6#2E7D4F#A16E14#B3362C#33597FKertas hangat + tinta hampir hitam; oxblood untuk aksi dan aksen, ochre untuk sorotan sekunder.
--tk-space-xs--tk-space-sm--tk-space-md--tk-space-lg--tk-space-xl--tk-space-2xl--tk-space-3xl--tk-radius-sm--tk-radius--tk-radius-lg--tk-radius-fullSudut hampir siku — kolom cetak tidak pernah membulat.
--tk-shadow-sm--tk-shadow--tk-shadow-lgBayangan setipis kertas — komposisi memisahkan konten, bukan bayangan.
Iconify, set teenyicons — garis ultra-tipis 1px yang tunduk pada huruf; tulis <iconify-icon icon="teenyicons:nama-outline">. Ratusan ribu ikon lain tersedia dengan set berbeda bila perlu.
Bab — Design Language
Fraunces · Source Serif 4 · DM Mono — tanpa gambar satu pun
Kit ini percaya bahwa halaman yang baik dimulai dari huruf yang baik. Drop cap di awal paragraf ini, angka oldstyle seperti 1234567890 di teks berjalan, dan small caps seperti ini adalah perangkat yang sudah teruji lima abad penataan huruf — bukan tren tahun ini.
Perhatikan hurufnya, maka halamannya akan mengurus dirinya sendiri.Pepatah juru cetak
Kosakata tipografis: kicker small caps bergaris (.tk-kicker), kata beritalik oxblood di heading (.tk-ital), drop cap (.tk-dropcap), pull quote dengan tanda kutip raksasa (.tk-pullquote), angka seksi pudar (.tk-num), fleuron pemisah (.tk-fleuron), dan label small caps (.tk-smallcaps). Foto otomatis grayscale dan baru berwarna saat disorot — imagery hanya pendukung.
Tombol adalah label huruf: DM Mono uppercase berjarak renggang — sunyi, biarkan hurufnya yang bicara.
Search bar — ikon dan pintasan menyatu di dalam field
Select custom (ditampilkan terbuka) — satu pilihan · dengan pencarian · multi dengan checkbox & aksi. Listbox digambar kit, bukan popup bawaan browser.
Dropdown aksi (ditampilkan terbuka; aslinya terbuka saat trigger diklik)
Placeholder beritalik seperti anotasi naskah; fokus disorot cincin oxblood tipis.
Kartu auth dirakit murni dari komponen form kit — bagian dari paket Komponen. Halaman penuhnya (web & ponsel lewat saklar perangkat) ada di examples/login.html dan examples/register.html.
Selamat datang kembali! Silakan masuk untuk melanjutkan.
Belum punya akun? Daftar gratis
Gratis 14 hari — tanpa kartu kredit.
Sudah punya akun? Masuk
Total Pengguna
12.540
+12,5% dari bulan laluJane Doe
UI/UX Designer
Statistik memakai angka lining Fraunces — angka teks dan angka data dibedakan seperti di buku.
Tautan navbar mono uppercase; yang aktif digarisbawahi — konvensi tertua di web.
Badge mono uppercase seperti anotasi margin naskah.
Grid 12 / 3 / 2 kolom pada lebar konten --tk-container
Bab 01 — Hero
Satu kalimat pendukung yang menjelaskan nilai produk ini bagi penggunanya.
Penjelasan singkat manfaat fitur ini.
Bergabung dengan ribuan pengguna lain.
Advanced filter — pencarian, dua select custom, tombol filter berpenanda jumlah, chip filter aktif
| Nama | Peran | Status | Aksi | |
|---|---|---|---|---|
| Jane Smith | [email protected] | Designer | Aktif | |
| John Doe | [email protected] | Developer | Nonaktif |
|
Tabel buku klasik: kepala bergaris tebal-tipis, isi ber-hairline, angka lining tabular lurus per kolom. Kolom Aksi rata kanan: ikon langsung untuk aksi sedikit, menu … bila banyak.
Chart.js — pustaka chart tunggal untuk semua kit. Warna dibaca dari token kit saat digambar; oxblood, tinta, dan ochre di atas kertas.
Pengunjung
Pendapatan
Sumber Trafik
Belum ada data
Data yang Anda cari belum tersedia di sini.