NgideIn Design System

Klik salah satu untuk lihat detail komponen

Colors

Typography

Buttons

Cards

Forms

Badges

Chips

Alerts

Steps

Dropzone

Highlight

Layout

Colors

Warna saturated dan bold. Teal, coral, yellow — the Neubrutalism palette.

Primary

Accent

Yellow

White

Dark

Success

Warning

Danger

Info

Typography

Plus Jakarta Sans — geometric, rounded, friendly. Perfect fourth scale (1.333).

OVERLINE

Display

Heading XL

Heading

Subheading

Body — Aplikasi keuangan sederhana untuk UMKM Indonesia.

Body Small — Data kamu tidak pernah meninggalkan perangkat ini.

Caption — JPG, PNG, WebP — Maks 10MB

Rp 1.250.000

Buttons

Chunky, bordered, hard shadow. Hover: shadow membesar. Click: shadow mengecil.

Cards

Thick border + hard shadow. The Neubrutalism core.

Default

Primary

Accent

Yellow

PENDAPATAN

Rp 12.500.000

PENGELUARAN

Rp 3.200.000

Form Elements

Thick borders, no soft shadows. Bold and direct.

Teks Watermark

Posisi

Catatan

Opacity

Tambah tanggal hari ini

Badges

Bordered pill, bold colors. Untuk status, label, dan notifikasi.

Baru Promo Hot Aktif Pending Error Draft

Chips

Filter tag yang bisa diklik. Active state pakai warna primary.

Alerts

Thick border, hard shadow, bold color. Untuk feedback ke user.

Berhasil — File telah diunduh ke perangkat kamu.

Info — Proses dilakukan 100% di browser.

Tips — Gunakan teks spesifik agar watermark tidak disalahgunakan.

Error — Format file tidak didukung.

Step Indicators

Untuk flow multi-langkah. Done, active, dan default state.

✓ 2 3 4

Dropzone

Area upload file. Tiga state: idle, hover, dan done.

Idle

Tap untuk pilih file

Hover

Lepas file di sini

✓ Done

foto-ktp.jpg

Highlight & Links

Penekanan teks dan navigasi.

Kamu bisa pakai highlight kuning untuk penekanan, atau link dengan underline tebal untuk navigasi.

Page Layout

Struktur halaman standar NgideIn app. Dot grid background, floating shapes, navbar fixed top.

App Name

Judul Halaman

Deskripsi singkat

Card content

NgideIn