Pemodelan Token Primitif
Design tokens menjembatani bahasa desain dari Figma ke kode produksi. Token dibagi menjadi tiga tingkatan:
- Global Palette (Nilai Baku):
colors.slate.900 = #0f172a - Konteks Semantik:
color.surface.default,color.text.muted - Skup Komponen:
button.primary.hover.bg
Menghindari Penumpukan Boolean Props
Hindari membuat komponen monster dengan puluhan flag isHighlighted, isCompact, hasBorder. Gunakan pola komposisi gabungan (compound components):
components/TelemetryCard.tsx
<Card variant="bordered">
<Card.Header actions={<Badge>Baru</Badge>}>
<Card.Title>Pusat Telemetri</Card.Title>
</Card.Header>
<Card.Body>Konten analitik</Card.Body>
</Card>Catatan rekayasa pribadi dari pengoperasian sistem produksi. Pola dan tolok ukur diperbarui seiring perkembangan runtime.