A
Primary
--color-primary
Aksi dan identitas utama
Foundation Design System
Token dan primitive visual reusable untuk seluruh produk PA DEV.
Theme Demo · Foundation
Satu bahasa visual untuk ekosistem PA DEV
Foundation ini mendefinisikan warna, tipografi, ritme, bentuk, elevation, ikon, motion, dan surface. Seluruh preview memakai token aktif yang sama dengan theme, tanpa mengubah Application Shell.
Color System
Palet semantik untuk identitas, status, surface, teks, dan interaction state.
Primary Light
--color-primary-light
Highlight dan supporting accent
Primary Dark
--color-primary-dark
Kontras brand dan state kuat
Success
--color-success
Status berhasil
Warning
--color-warning
Status perhatian
Danger
--color-danger
Status kritis
Info
--color-info
Informasi kontekstual
Canvas
--color-canvas
Latar aplikasi
Surface
--color-surface
Panel dan kartu
Border
--color-border
Pemisah dan outline
Text Primary
--color-text-primary
Heading dan informasi utama
Text Secondary
--color-text-secondary
Body dan label
Text Muted
--color-text-muted
Caption dan metadata
Hover
--color-hover
State hover lembut
Active
--color-active
State aktif lembut
Disabled
--color-disabled
State nonaktif
Penggunaan: gunakan token semantik sesuai tujuan; jangan memilih warna hanya berdasarkan tampilan visualnya.
Typography
Josefin Sans membentuk identitas shell; Outfit menjaga keterbacaan UI content.
Display
text-foundation-display
PA DEV Digital Experience
40 / 48 · 600 · -0.015em
H1
text-display-h1
Foundation Design System
30 / 38 · 600 · -0.005em
H2
text-display-h2
Application Foundation
24 / 32 · 600 · 0
H3
text-foundation-h3
Section Heading
20 / 28 · 600 · -0.005em
H4
text-foundation-h4
Subsection Heading
18 / 26 · 600 · -0.0025em
H5
text-foundation-h5
Compact Heading
16 / 24 · 600 · 0
Body Large
text-body-lg
Outfit menjaga paragraf panjang tetap nyaman dibaca.
16 / 26 · 400 · 0
Body
text-body
Teks antarmuka utama menggunakan ritme yang tenang dan konsisten.
14 / 22 · 400 · 0
Small
text-small
Metadata ringkas dan supporting information.
13 / 20 · 400 · 0
Caption
text-caption
DIPERBARUI 15 JULI 2026
12 / 18 · 500 · +0.025em
Helper
text-helper
Gunakan untuk petunjuk singkat yang tidak kritis.
12 / 18 · 400 · 0
Penggunaan: heading aplikasi memakai Josefin Sans; paragraph, metadata, form, dan feedback memakai Outfit.
Spacing
Ritme berbasis 4px untuk jarak internal, antar-elemen, dan antar-section.
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
Penggunaan: pilih nilai terdekat dari skala; hindari jarak arbitrer yang memutus ritme 4px.
Border Radius
Bentuk bertingkat dari detail kecil hingga pill penuh.
xs
2px
--radius-xs
sm
4px
--radius-sm
md
8px
--radius-md
lg
12px
--radius-lg
xl
16px
--radius-xl
2xl
24px
--radius-2xl
full
9999px
--radius-full
Penggunaan: radius meningkat mengikuti skala dan prominence; full hanya untuk bentuk pill atau lingkaran.
Shadow & Elevation
Elevation lembut untuk membedakan hierarchy tanpa membuat UI terasa berat.
xs
--shadow-xs
sm
--shadow-sm
md
--shadow-md
lg
--shadow-lg
xl
--shadow-xl
premium
--shadow-premium
Penggunaan: elevation mengikuti kedekatan visual; premium dicadangkan untuk surface berprioritas tinggi.
Icon System
Grid 24px, outline stroke 2px, filled untuk emphasis terkontrol, dan empat ukuran baku.
Style
Size
Token: ukuran 16/20/24/32px; gunakan outline sebagai default dan filled hanya untuk state aktif atau emphasis.
Animation
Motion memberi continuity dan feedback; bukan dekorasi yang menghambat.
Fade
Fade
Perubahan opacity untuk feedback ringan.
Slide
Perpindahan pendek untuk elemen kontekstual.
Scale
Scale
Skala halus untuk entrance atau emphasis.
Collapse
Collapse
Perubahan tinggi terkontrol untuk region.
Drawer
Drawer
Translasi horizontal untuk panel tepi.
Tooltip
Tooltip
Opacity dan translasi mikro untuk hint.
Dropdown
Dropdown
Entrance dari titik asal panel.
--duration-fast
--duration-base
--duration-slow
--ease-standard
--ease-entrance
Penggunaan: fast untuk micro-feedback, base untuk state umum, slow untuk entrance; seluruh preview menghormati prefers-reduced-motion.
Surface Language
Bahasa material khas PA DEV dari canvas datar hingga premium layered surface.
Canvas
Base color
--color-canvas
Surface
Background · border · shadow
--color-surface · --shadow-sm
Glass Surface
Translucency · blur · shadow
--surface-glass-background · --shadow-md
--surface-sidebar-*
Information Card Surface
Gradient · translucent border · inner highlight · shadow
--surface-info-*
Modal Surface
Surface · border · elevated shadow
--surface-modal-background · --shadow-xl
Penggunaan: pilih surface berdasarkan hierarchy; gradient, ambient light, noise, border, dan shadow harus tetap halus dan fungsional.
Design Token
Runtime alias yang menghubungkan Tailwind token dengan primitive CSS reusable.
Color
--color-primary
--color-primary-light
--color-primary-dark
--color-success
--color-warning
--color-danger
--color-info
--color-canvas
--color-surface
--color-border
--color-text-primary
--color-text-secondary
--color-text-muted
--color-hover
--color-active
--color-disabled
Typography
--font-heading
--font-body
Spacing
--space-4
--space-8
--space-12
--space-16
--space-20
--space-24
--space-32
--space-40
--space-48
--space-64
Radius
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-2xl
--radius-full
Shadow
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-premium
Motion
--duration-fast
--duration-base
--duration-slow
--ease-standard
--ease-entrance
Surface
--surface-sidebar-gradient
--surface-sidebar-ambient-primary
--surface-sidebar-noise
--surface-info-background
--surface-glass-background
--surface-modal-background
Kontrak: token didefinisikan di konfigurasi/CSS source of truth; view dan komponen hanya mengonsumsi alias, bukan menyalin nilai visual.