Default Card
Subtitle opsional
Konten card standar dengan border dan shadow ringan.
🎨 Brand Colors
Primary — Navy
50
100
200
300
500
700
900
Secondary — Gold
50
100
300
500
700
900
Accent — Teal
50
100
300
500
700
900
Semantic
Success
Warning
Danger
Info
Extra Colors (Amber, Purple, Coral)
Amber (var(--rdp-amber))
Purple (var(--rdp-purple))
Coral (var(--rdp-coral))
✍️ Typography
RDP Serif — Playfair Display
Display Heading
Heading 1 — Radian Data Platform
Heading 2 — Design System
Heading 3 — UI Framework
Heading 4 — Components
RDP Sans — Plus Jakarta Sans
Body Large — Digunakan untuk lead paragraph dan konten yang membutuhkan penekanan.
Body — Teks utama untuk konten. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body Small — Teks sekunder, keterangan tambahan, dan informasi pendukung.
Caption — Teks kecil untuk metadata, timestamp, dan keterangan gambar.
LABEL — Untuk form label dan section header kecil
Special Styles
"Menjadi fondasi UI tunggal yang digunakan seluruh produk Radian."
Kode inline: var(--rdp-primary-900)
1,234,567.89
🔘 Buttons
Variants
Outline & Ghost
Sizes
States
Button Group
🏷️ Badges
Soft Variants
Default
Primary
Secondary
Accent
Success
Warning
Danger
Info
Solid Variants
Primary
Secondary
Success
Danger
Sizes & Outline
Small
Medium
Large
Outline
Outline Primary
Dot Indicators
Online
Offline
Away
⚠️ Alerts
Informasi
Sistem akan melakukan pemeliharaan pada 20 Juni 2026 pukul 02:00 WIB.
Berhasil! Data telah disimpan ke database.
Peringatan: Kuota penyimpanan tersisa 15%.
Error: Gagal menghubungi server. Silakan coba lagi.
👤 Avatars
Sizes & Initials
XS
SM
MD
LG
XL
2X
Colors & Status
RD
AB
CD
EF
Avatar Group
+3
A
B
C
Square Shape
SQ
SQ
⏳ AI Loader & Spinners
Taliti Processing Loader (Organic AI Loader)
Mengambil data marketplace...
Organic Ray-Tracing Indicator
🃏 Cards
Elevated Card
Card dengan shadow yang lebih kuat dan tanpa border visible.
Flat Card
Card tanpa border/shadow, dengan tinted background.
Brand Card
Card dengan aksen primary di border atas.
Clickable Card
Card ini bisa diklik. Hover untuk melihat efek elevasi.
12,847
Total Users
↑ 12.5%
🔧 Utilities Preview
Spacing & Background
Primary
Secondary
Accent
Cream
Shadows
XS
SM
MD
LG
XL
Responsive Grid
Col 1
Col 2
Col 3