Karya Design System
Karya adalah design system yang tegas, berani, dan modern — dirancang untuk produk digital yang ingin tampil dengan kepercayaan diri tinggi. Fondasi warna merah menyala, hitam pekat, dan putih bersih menciptakan kontras dramatis yang membangkitkan energi dan aksi. Cocok untuk platform produktivitas, aplikasi enterprise, dan produk yang menargetkan audiens profesional Indonesia.
Color Palette
Primary Palette
Neutral Palette
Semantic Colors
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxKarya adalah design system yang tegas, berani, dan modern — dirancang untuk produk digital yang ingin tampil dengan kepercayaan diri tinggi. Fondasi warna merah menyala, hitam pekat, dan putih bersih menciptakan kontras dramatis yang membangkitkan energi dan aksi. Cocok untuk platform produktivitas, aplikasi enterprise, dan produk yang menargetkan audiens profesional Indonesia.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List
List Row
Unchecked
Checked
Indeterminate
Disabled
Default
Elevation & Depth
Do's & Don'ts
Do
Don't
Dark Mode
Karya mendukung dark mode penuh dengan inversi yang elegan:
| Token | Light | Dark |
|-------|-------|------|
| Background | #F9F9F9 | #0A0A0A |
| Surface | #FFFFFF | #1A1A1A |
| Surface Raised | #F0F0F0 | #2D2D2D |
| Border | #E0E0E0 | #3A3A3A |
| Text Primary | #0A0A0A | #F9F9F9 |
| Text Secondary | #4D4D4D | #8C8C8C |
| Primary Crimson | #CC0000 | #FF2222 (sedikit lebih terang) |
---
Design Principles
> "Tegas. Jelas. Bergerak."
Karya dibangun di atas tiga prinsip inti:
1. Kontras sebagai Komunikasi
Merah, hitam, dan putih bukan sekadar estetika — mereka adalah sistem sinyal. Merah = aksi. Hitam = struktur. Putih = ruang napas.
2. Tipografi sebagai Karakter
Syne membawa kekuatan dan identitas pada setiap heading. Plus Jakarta Sans memastikan keterbacaan optimal di semua ukuran layar.
3. Keberanian Tanpa Kekacauan
Desain yang berani bukan berarti penuh ornamen. Karya mengandalkan proporsi, jarak, dan kontras untuk membuat setiap elemen berbicara.
---
Karya Design System — v1.0
Dibuat untuk produk digital Indonesia yang ingin tampil dengan kepercayaan diri.
Use with MCP
Don't have the MCP? Install it here