Brand
Design System
Rentstra — Living Library v1.0. Design token dan komponen yang menjadi fondasi seluruh antarmuka.
Palet Warna
Brand & Aksen
Primary
Inti, CTA, tautan, mark
Deep
Hover, latar gelap, headline
Bright
Aksen, gradien
Accent
Yield / aksi positif, chevron
Accent Deep
Teks/ikon hijau di atas putih
Netral & Permukaan
Soft
Surface biru lembut
Tint
Surface biru muda
Ink
Teks utama
Slate
Teks sekunder
Muted
Teks redup / placeholder
Line
Border / garis
BG
Latar halaman
Paper
Permukaan kartu
Warna Semantik
- Active / Go: Hijau (#10B981)
- Warning / Perhatian: Amber / Oranye
- Info: Biru (#3B82F6)
- Nonaktif: Abu-abu (#94A3B8)
- Danger / Bahaya: Merah
Tipografi
Font family: Inter (sans-serif).
| Gaya | Ukuran | Bobot | Letter-spacing | Line-height |
|---|---|---|---|---|
| Display | 48px | 800 | -0.03em | 1.05 |
| Heading 1 | 36px | 800 | -0.025em | — |
| Heading 2 | 28px | 700 | — | — |
| Heading 3 | 22px | 700 | — | — |
| Subtitle | 18px | 600 | — | — |
| Body | 16px | 400 | — | 1.6 |
| Small | 14px | 400 | — | — |
| Caption/Label | 12px | 500 | 0.08em | — |
Bobot: Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800).
Spacing
Skala spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px (notasi utilitas: gap-4, p-6).
| Token | Nilai |
|---|---|
| 1 | 4px |
| 2 | 8px |
| 3 | 12px |
| 4 | 16px |
| 6 | 24px |
| 8 | 32px |
| 12 | 48px |
| 16 | 64px |
Border Radius
| Token | Nilai | Pratinjau |
|---|---|---|
| sm | 0.375rem (~6px) | |
| md | 0.6rem (~9.6px) | |
| lg | 0.9rem (~14.4px) | |
| xl | 1.1rem (~17.6px) | |
| pill | 9999px (penuh) |
Shadow
| Token | Kegunaan |
|---|---|
| sm | Bayangan halus (subtle) |
| md | Bayangan sedang (medium) |
| lg | Bayangan menonjol (prominent) |
Breakpoints
| Breakpoint | Min-width |
|---|---|
| sm | ≥ 640px |
| md | ≥ 768px |
| lg | ≥ 1024px |
| xl | ≥ 1280px |
| 2xl | ≥ 1536px |
Komponen
Tombol (Buttons)
- Varian: Primary (biru), Secondary, Ghost, Accent (hijau), Danger
- Ukuran: Small, Medium, Large
- State: Default, Hover (warna lebih pekat), Disabled (abu-abu)
- Markup:
<button class="btn btn-primary btn-md">
Form Controls
- Kelas input:
fld - Focus ring:
rgba(59,130,246,.18)(tint biru) - Elemen: text input, select dropdown, checkbox, radio, toggle (biru saat aktif)
Badge & Pill
- Status semantik: Aktif (hijau), Perhatian (warning), Info, Nonaktif (inactive)
- Markup:
<span class="badge b-green"><span class="badge-dot"></span>Aktif</span>
Kartu (Cards)
Tipe: KPI card, feature card, property card. Konten: judul, metrik, deskripsi, badge, dan tombol CTA.
Tabel
Kelas dt (data table). Fitur: header ber-ink, zebra striping, dan hover highlight (biru).
Callout
Tipe: Info, Success (Berhasil), Warning (Perhatian), Danger (Bahaya).
Navigasi
Elemen: sidebar nav item, tab, dan breadcrumb.
Ikon
- Gaya: line icon (Lucide/Dobeon), stroke-width 2, tanpa fill
- Ukuran: 24×24px
- Warna:
currentColor(mewarisi warna teks)
Seluruh angka bersifat ilustratif berdasarkan asumsi yang dinyatakan. Dokumen ini bukan penawaran efek. © 2026 Rentstra.