Lewati ke konten

Brand

Design System

Rentstra — Living Library v1.0. Design token dan komponen yang menjadi fondasi seluruh antarmuka.

Palet Warna

Brand & Aksen

#1E40AF

Primary

Inti, CTA, tautan, mark

#1E3A8A

Deep

Hover, latar gelap, headline

#3B82F6

Bright

Aksen, gradien

#10B981

Accent

Yield / aksi positif, chevron

#0E9B6E

Accent Deep

Teks/ikon hijau di atas putih

Netral & Permukaan

#EFF4FF

Soft

Surface biru lembut

#DCE6FB

Tint

Surface biru muda

#0F172A

Ink

Teks utama

#475569

Slate

Teks sekunder

#94A3B8

Muted

Teks redup / placeholder

#E5E7EB

Line

Border / garis

#F3F4F6

BG

Latar halaman

#FFFFFF

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).

GayaUkuranBobotLetter-spacingLine-height
Display48px800-0.03em1.05
Heading 136px800-0.025em
Heading 228px700
Heading 322px700
Subtitle18px600
Body16px4001.6
Small14px400
Caption/Label12px5000.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).

TokenNilai
14px
28px
312px
416px
624px
832px
1248px
1664px

Border Radius

TokenNilaiPratinjau
sm0.375rem (~6px)
md0.6rem (~9.6px)
lg0.9rem (~14.4px)
xl1.1rem (~17.6px)
pill9999px (penuh)

Shadow

TokenKegunaan
smBayangan halus (subtle)
mdBayangan sedang (medium)
lgBayangan menonjol (prominent)

Breakpoints

BreakpointMin-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.