Zenko
Zenko
Design System Zenko

Satu sistem, dua platform — web dan mobile

Token, komponen, dan pedoman brand Zenko, didokumentasikan satu kali dan konsisten di Web maupun Aplikasi Mobile.

Mulai (Getting Started)FoundationsLihat Komponen
48+
Core Tokens
Warna, radius, spasi, bayangan
35+
UI Components
Form, navigasi, overlay, messaging
5 Khusus
CAT Domain Modules
Timer, bubble 1-110, analytics BKN
100%
Platform Parity
Tersedia untuk Web & Mobile

Mulai dari sini

Tiga pilar dokumentasi, satu cara membacanya.

Foundations

Token warna, tipografi, spasi, radius, dan bayangan yang dijamin satu sumber kebenaran lewat pipeline ekspor otomatis.

  • Warna, tipografi & spasi
  • Ekspor token Web + React Native
  • Kebijakan aksesibilitas
Buka Foundations

Components

Pustaka komponen produksi — dari Button sampai Modal Dialog — didokumentasikan untuk Web dan Mobile sekaligus.

  • 35+ komponen siap pakai
  • Kode Vue & React Native
  • Panduan aksesibilitas per komponen
Buka Components

Brand

Identitas Zenko Fox, nilai merek, dan pedoman nada bicara — apa yang membuat Zenko terasa seperti Zenko.

  • Filosofi maskot & logo
  • Nada bicara & copywriting
  • Aset lockup resmi
Buka Brand

Butuh kode? Setiap halaman komponen punya mode developer — aktifkan lewat saklar Devmode di kanan atas untuk melihat kode dan props.

Komponen Zenko, bukan komponen generik

Komponen nyata yang digunakan langsung pada aplikasi try out Zenko.

Exam Countdown TimerLive State
01:29:00

Dilengkapi peringatan warna merah dan indikator berkedip saat sisa waktu di bawah 5 menit.

Question Bubble Nav (1-110)Soal No. 3
Terjawab Ragu-ragu Belum
Evaluasi Passing Grade BKNLulus PG
TWK (Tes Wawasan Kebangsaan)85 / 65
TIU (Tes Inteligensi Umum)120 / 80
TKP (Tes Karakteristik Pribadi)185 / 166
Total Skor Kumulatif:390 Poin

Dukungan Multi-Platform (Web & Mobile Parity)

Satu sistem desain yang diadaptasi sempurna untuk karakteristik masing-masing platform.

Web Platform (Nuxt 4 / Vue 3)

Nuxt 4 · Tailwind CSS v4 · TypeScript · Vue 3

Dioptimalkan untuk portal marketplace ujian, rendering server-side kilat (Nitro SSR), styling deklaratif Tailwind CSS v4, dan aksesibilitas keyboard WCAG 2.1 AA.

  • 12-Column Responsive Grid
  • Keyboard Accessibility & Focus Rings
  • SEO & SSR Nitro Optimization
  • Interactive Popovers & Tooltips

Mobile Platform (React Native)

React Native · StyleSheet / NativeWind · Expo · TS

Dirancang khusus untuk pengalaman simulasi try out di smartphone (iOS & Android) dengan area sentuh 44pt+, safe area insets, dan haptic feedback saat memilih jawaban.

  • Minimum Touch Targets 44pt+
  • Safe Area & Dynamic Island Insets
  • Haptic Touch & Instant Feedback
  • Offline-First Exam State Machine

Mulai jelajahi sistem desain

Masuk ke Foundations