TOKENAI Design Kit

Clay

Claymorphism: kartu dan objek terlihat seperti tanah liat atau plastik lembut yang bisa dipencet — gembur, bulat, 3D, dan playful. Satu resep relief dipakai di mana-mana: bayangan luar berwarna, bibir atas menangkap cahaya, perut bawah menggelap. Palet permen lavender-pink-kuning di atas lila pucat, tipografi bulat Baloo 2 + Quicksand. Kit satu-tema — terang secara bawaan, tanpa mode gelap. Lihat juga contoh halaman nyata lewat bilah navigasi di atas.

01. Typography

Baloo 2 (heading bulat gembur) · Quicksand (body membulat) · Red Hat Mono (kode & kbd) · skala di bawah adalah seluruh tingkat yang tersedia

Display · 52px

Aa — Lembut seperti clay

Heading 1 · 38px

Aa — Lembut seperti clay

Heading 2 · 29px

Aa — Lembut seperti clay

Heading 3 · 22px

Aa — Lembut seperti clay

Heading 4 · 18px

Aa — Lembut seperti clay

Title · 15px

Aa — Lembut seperti clay

Body · 16px

Aa — Lembut seperti clay

Body Small · 14px

Aa — Lembut seperti clay

Caption · 12px

Aa — Lembut seperti clay

02. Color Palette

primary#6C5CE7
primary-hover#5A4BD1
secondary#F97AA6
accent#FFC75F
background#F2EFFB
surface-2#E9E4F6
text#3A3555
text-muted#7A7593
border#E2DCF2
success#3FB77E
warning#E8A13C
danger#F06A5D
info#5AA7E8

03. Spacing System

--tk-space-xs
--tk-space-sm
--tk-space-md
--tk-space-lg
--tk-space-xl
--tk-space-2xl
--tk-space-3xl

04. Border Radius

--tk-radius-sm
--tk-radius
--tk-radius-lg
--tk-radius-full

Radius minimum 16px — tidak ada satu pun sudut tajam; clay tidak pernah bersudut.

05. Shadow System

--tk-shadow-sm
--tk-shadow
--tk-shadow-lg

Relief clay tiga-lapis: bayangan luar lavender + inset terang di bibir atas + inset gelap di perut bawah.

06. Iconography

Iconify, set uil (Unicons) — tulis <iconify-icon icon="uil:nama">; ratusan ribu ikon lain tersedia dengan set berbeda bila perlu.

07. Design Language

.tk-clay (pop)
.tk-clay-pressed

Semuanya terbuat dari clay yang sama: tombol menonjol lalu penyok saat ditekan, input dipencet ke dalam permukaan, checkbox dan radio adalah bola clay mini yang mengembang saat terisi, bola clay permen melayang pelan di hero (animasi tk-bob), dan ikon fitur bergiliran warna lavender → pink → kuning otomatis. Utilitas .tk-clay / .tk-clay-pressed menerapkan relief itu ke elemen apa pun, dan .tk-clay-ball (varian -pink / -yellow) adalah bola dekoratifnya. Tidak ada mode gelap — clay dipajang di rak yang terang.

08. Buttons

09. Input & Form

Teks bantuan di bawah field.
Alamat email tidak valid.

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)

Aksi baris

Semua kontrol digambar sendiri — select, checkbox bola clay, radio, dan toggle tidak memakai tampilan bawaan browser.

10. Login & Register

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.

Logo

Masuk ke akun Anda

Selamat datang kembali! Silakan masuk untuk melanjutkan.

atau dengan email
Lupa kata sandi?

Belum punya akun? Daftar gratis

Logo

Buat akun baru

Gratis 14 hari — tanpa kartu kredit.

atau dengan email
Minimal 8 karakter dengan satu angka.

Sudah punya akun? Masuk

11. Card Components

Judul Kartu

Deskripsi singkat isi kartu ini.

Total Pengguna

12.540

+12,5% dari bulan lalu

Jane Doe

UI/UX Designer

12. Navigation

13. Tabs & Segmented

14. Badges & Chips

Default Aktif Menunggu Gagal Baru Design

15. Feedback & Alerts

Berhasil! Perubahan Anda sudah tersimpan.
Perhatian. Periksa kembali informasi Anda.
Gagal. Terjadi kesalahan, coba lagi.
Info. Ada pembaruan penting untuk Anda.

16. Layout Options

Grid 12 / 3 / 2 kolom pada lebar konten --tk-container

17. Content Blocks

Bangun lebih cepat

Satu kalimat pendukung yang menjelaskan nilai produk ini bagi penggunanya.

Fitur Utama

Penjelasan singkat manfaat fitur ini.

Siap memulai?

Bergabung dengan ribuan pengguna lain.

18. Data Display

Advanced filter — pencarian, dua select custom, tombol filter berpenanda jumlah, chip filter aktif

Filter aktif: Status: Aktif Peran: Designer
NamaEmailPeranStatusAksi
Jane Smith[email protected]DesignerAktif
John Doe[email protected]DeveloperNonaktif

Kolom Aksi rata kanan: ikon langsung (lihat · edit · hapus) untuk aksi sedikit, atau menu … (klik untuk membuka) bila aksinya banyak.

19. Charts

Chart.js — pustaka chart tunggal untuk semua kit. Warna dibaca dari token kit saat digambar; bar dan donat memakai sudut membulat supaya ikut terasa clay.

Pengunjung

Pendapatan

Sumber Trafik

20. Modal & Overlay

Judul Modal

Ini modal dialog. Konfirmasi tindakan atau tampilkan informasi di sini.

21. Loading States

22. Empty States

Belum ada data

Data yang Anda cari belum tersedia di sini.