TOKENAI Design Kit
Dark mode yang bersih dan tenang untuk produk AI, SaaS, crypto, dan teknologi. Tipografi geometris rapi (Sora + Inter Tight) di atas latar hitam kebiruan, grid teknis tipis yang menyelimuti seluruh halaman, garis batas setipis rambut, dan cahaya gradient biru elektrik ke violet yang mengambang jauh di kejauhan. Elemen sci-fi-nya sengaja sedikit dan disiplin: kurung sudut HUD di panel, titik status berdenyut, berkas cahaya pemisah seksi, dan satu-dua kata bergradasi di judul — tanpa glitch atau neon berlebihan, karena keterbacaan tetap nomor satu. Kit satu-tema — gelap secara bawaan. Lihat juga contoh halaman nyata lewat bilah navigasi di atas.
Sora (heading geometris) · Inter Tight (body rapat & bersih) · IBM Plex Mono (label, kode & kbd) · skala di bawah adalah seluruh tingkat yang tersedia
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
Aa — Sinyal dari masa depan
#4D7CFE#6B93FF#A78BFA#22D3EE#07080D#0E1018#161A25#E8EBF2#8A91A6#232838#34D399#FBBF24#FB7185#22D3EEDasarnya hitam kebiruan berlapis tiga (background → surface → surface-2); warna hanya muncul sebagai cahaya: biru elektrik, cyan, dan violet.
--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-fullRadius sedang dan konsisten — cukup lembut untuk terasa modern, cukup tegas untuk terasa teknis.
--tk-shadow-sm--tk-shadow--tk-shadow-lgDi ruang gelap bayangan bekerja sebagai kedalaman, bukan kontras; cahaya biru dipakai terpisah untuk menandai elemen aktif.
Iconify, set hugeicons — tulis <iconify-icon icon="hugeicons:nama">; ratusan ribu ikon lain tersedia dengan set berbeda bila perlu.
.tk-hud — sudut instrumen.tk-gradient-text — untuk satu-dua kata kunciSistem aktif
$ logo deploy --env production
✓ membangun 128 modul dalam 4,2 detik
→ live di contoh.id
Perkakas khas kit: .tk-kicker (label mono dengan .tk-dot berdenyut), .tk-hud (kurung sudut sci-fi di panel mana pun), .tk-beam (pemisah seksi setipis rambut yang menyala di tengah), .tk-panel (kaca gelap berpalang rambut), .tk-term (baris keluaran terminal), dan .tk-gradient-text. Semuanya ditahan agar teks tetap jadi yang paling terbaca.
Tombol primer memakai gradient tanda tangan yang bergeser saat disorot; sisanya sunyi dengan garis rambut yang menyala biru.
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)
Semua kontrol digambar sendiri — field nyaris menyatu dengan latar dan baru menyala biru saat fokus.
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
Tiap kartu punya sorot cahaya setipis rambut di tepi atasnya dan menyala biru saat disorot.
Badge memakai huruf mono kapital kecil — membacanya seperti membaca status pada panel instrumen.
Grid 12 / 3 / 2 kolom pada lebar konten --tk-container
Sistem aktif
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 |
|
Kolom Aksi rata kanan: ikon langsung (lihat · edit · hapus) untuk aksi sedikit, atau menu … (klik untuk membuka) bila aksinya banyak.
Chart.js — pustaka chart tunggal untuk semua kit. Warna dibaca dari token kit saat digambar; garis biru-cyan-violet yang menyala di atas latar gelap.
Pengunjung
Pendapatan
Sumber Trafik
Progress bar memakai gradient tanda tangan yang menyala di dalam rel gelap.
Belum ada data
Data yang Anda cari belum tersedia di sini.