Design System Integration

Prinsip

1. Consistency — Komponen UI harus terlihat dan berperilaku sama di semua screen.
2. Reusability — Buat komponen yang dapat digunakan ulang.
3. Theming — Semua warna, typography, dan spacing harus merujuk ke design token.
4. No Hardcoded Values — Jangan gunakan warna hex atau font size langsung di komponen.

Design Tokens

Setiap project harus mendefinisikan design tokens untuk:

Token	Contoh
Colors	primary, secondary, surface, error, onPrimary
Typography	headlineLarge, bodyMedium, labelSmall
Spacing	xs: 4, sm: 8, md: 16, lg: 24, xl: 32
Border Radius	sm: 4, md: 8, lg: 16, full: 999
Shadow / Elevation	none, sm, md, lg

Component Library

Setiap project harus memiliki shared component library minimal:

• Button (primary, secondary, outlined, text)
• TextField / Input
• Card
• Avatar
• Badge
• BottomSheet
• Dialog / Alert
• LoadingIndicator
• EmptyState
• ErrorState
• SnackBar / Toast

Figma Integration

Pastikan design tokens di code sinkron dengan Figma design system. Gunakan tools seperti Figma Tokens atau Style Dictionary jika diperlukan.