/design-systems/github/DESIGN-id.md

# Sistem Desain Terinspirasi dari GitHub

> Category: Alat Pengembang
> Platform berorientasi kode. Kepadatan fungsional, presisi biru-di-atas-putih, fondasi Primer.

## 1. Tema Visual & Atmosfer

Tampilan GitHub dirancang secara teknis, bukan sekadar dekoratif. Setiap piksel menegaskan sebuah sikap: ini adalah alat bagi orang-orang yang peduli pada diff, build, dan pull request. Latar belakang halaman adalah `#ffffff` yang bersih (mode terang) atau `#0d1117` (mode gelap), dengan konten yang tersusun pada panel persegi padat yang dipisahkan oleh garis batas tipis alih-alih ruang kosong. Kepadatan informasi adalah mereknya — baris daftar, baris kode, header repositori, dan kartu notifikasi semuanya tersusun rapat sehingga pengguna mahir dapat memindai ratusan item tanpa menggulir.

Aksen khas adalah **biru Primer** (`#0969da`) untuk tautan dan aksi utama, serta **hijau GitHub** (`#1a7f37`) untuk status merged, keberhasilan, dan tombol merge itu sendiri. Keduanya terasa sedikit redup dibandingkan biru dan hijau produk konsumen — cukup jenuh untuk terbaca di atas teks abu-abu yang padat, namun cukup tenang untuk menyatu dengan latar belakang ketika beberapa warna muncul dalam satu viewport.

Tipografi menggunakan tumpukan **system-ui** di seluruh produk sehingga teks dirender dengan tajam di setiap sistem operasi, dipasangkan dengan **SFMono / Menlo / Consolas** untuk kode. Tidak ada font display editorial; suara GitHub adalah suara sistem yang sudah Anda gunakan.

**Karakteristik Utama:**
- Kanvas putih murni (`#ffffff`) atau hitam biru tua (`#0d1117`) — tanpa kehangatan, tanpa warna tint
- Garis batas abu-abu tipis (`#d0d7de`) mendefinisikan setiap panel dan bagian
- Biru Primer (`#0969da`) untuk tautan/aksi utama; hijau GitHub (`#1a7f37`) untuk keberhasilan/merge
- system-ui untuk prosa; SFMono untuk kode — tanpa typeface kustom
- Baris daftar padat dengan padding minimal; ruang putih jarang digunakan
- Ikonografi Octicon pada 16px / 24px — goresan tunggal, geometris, konsisten
- Lencana status berbentuk pil dengan semantik warna yang kuat

## 2. Palet Warna & Perannya

### Utama
- **Canvas Default** (`#ffffff`): Latar belakang halaman utama, tema terang.
- **Canvas Subtle** (`#f6f8fa`): Permukaan sekunder, sidebar, latar belakang input, strip header.
- **Canvas Inset** (`#eaeef2`): Latar belakang blok kode, permukaan terbenam.
- **Fg Default** (`#1f2328`): Teks utama, judul, tinta.
- **Fg Muted** (`#656d76`): Teks sekunder, keterangan, jalur file.

### Aksen Merek
- **Primer Blue** (`#0969da`): Tautan, CTA utama, dasar cincin fokus — warna interaktif universal.
- **Primer Blue Hover** (`#0550ae`): Hover/ditekan untuk biru utama.
- **Accent Subtle** (`#ddf4ff`): Permukaan biru lembut untuk callout, spanduk info.

### Semantik
- **Success / Merge Green** (`#1a7f37`): PR yang di-merge, lencana keberhasilan, tombol merge.
- **Success Subtle** (`#dafbe1`): Tint permukaan keberhasilan.
- **Open Green** (`#1a7f37`): Status issue/PR "Terbuka".
- **Closed / Danger Red** (`#cf222e`): PR tertutup, aksi destruktif, kesalahan validasi.
- **Danger Subtle** (`#ffebe9`): Permukaan spanduk kesalahan.
- **Attention / Warning Yellow** (`#9a6700`): Teks peringatan di atas permukaan amber.
- **Attention Subtle** (`#fff8c5`): Permukaan spanduk peringatan.
- **Done Purple** (`#8250df`): Merged-dan-diarsipkan, status "selesai", lencana premium.
- **Sponsor Pink** (`#bf3989`): Ikon hati sponsor, merek GitHub Sponsors.

### Border & Pemisah
- **Border Default** (`#d0d7de`): Garis batas tipis standar, garis luar panel.
- **Border Muted** (`#d8dee4`): Pemisah dalam di dalam panel.
- **Border Subtle** (`#eaeef2`): Pemisah baris tabel yang samar.

### Tema Gelap
- **Dark Canvas** (`#0d1117`): Latar belakang halaman gelap.
- **Dark Surface** (`#161b22`): Sidebar, header, permukaan sekunder.
- **Dark Border** (`#30363d`): Garis batas mode gelap standar.
- **Dark Fg** (`#e6edf3`): Teks utama di atas latar gelap.

## 3. Aturan Tipografi

### Keluarga Font
- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`

### Hierarki

| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Spasi Huruf | Catatan |
|------|------|------|--------|-------------|----------------|-------|
| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Header repo, hero pemasaran |
| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Judul halaman |
| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Judul bagian |
| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-bagian, header panel |
| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Ukuran teks default — bukan 16px |
| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Keterangan, metadata file |
| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Blok kode, diff |
| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Span `code` inline |

### Prinsip
- **Body 14px, bukan 16px**: Kepadatan prosa GitHub adalah identitasnya. Produk dibaca pada 14px untuk muat lebih banyak baris dalam satu viewport.
- **Ketebalan biner**: 400 untuk segalanya secara default; 600 untuk judul dan penekanan. Tidak ada 500, tidak ada 700.
- **Font sistem selalu**: jangan muat webfont untuk antarmuka — teks harus dirender seketika pada koneksi lambat.

## 4. Gaya Komponen

### Tombol

**Utama (Hijau)**
- Background: `#1f883d`
- Teks: `#ffffff`
- Border: 1px solid `rgba(31, 35, 40, 0.15)`
- Padding: 5px 16px
- Radius: 6px
- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
- Hover: background `#1a7f37`
- Penggunaan: "Buat repositori", "Merge pull request"

**Default**
- Background: `#f6f8fa`
- Teks: `#1f2328`
- Border: 1px solid `#d0d7de`
- Padding: 5px 16px
- Radius: 6px
- Hover: background `#f3f4f6`, border `#d0d7de`

**Outline (Gaya Tautan Biru)**
- Background: `#ffffff`
- Teks: `#0969da`
- Border: 1px solid `#d0d7de`
- Hover: background `#0969da`, teks `#ffffff`

**Bahaya**
- Background: `#ffffff`
- Teks: `#cf222e`
- Border: 1px solid `#d0d7de`
- Hover: background `#a40e26`, teks `#ffffff`, border `#a40e26`

### Kartu / Kotak
- Background: `#ffffff`
- Border: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 16px (header) + 16px (body)
- Header memiliki strip `#f6f8fa` dengan border bawah.

### Input
- Background: `#ffffff`
- Border: 1px solid `#d0d7de`
- Radius: 6px
- Padding: 5px 12px
- Fokus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`

### Pil Status (Issue / PR)
- **Terbuka**: background `#1a7f37`, teks putih, padding 4px 10px, radius 9999px.
- **Tertutup**: background `#cf222e`, teks putih.
- **Merged**: background `#8250df`, teks putih.
- **Draf**: background `#6e7781`, teks putih.

### Label (Tag pada Issue/PR)
- Padding: 0 7px
- Radius: 9999px
- Font: 12px / 500
- Background dan teks bersifat programatik (warna label → teks dihitung untuk kontras).

## 5. Spasi & Tata Letak

- **Unit dasar**: 4px. Skala spasi: 4, 8, 12, 16, 24, 32, 40, 48.
- **Lebar maksimum halaman**: 1280px (`Container-xl`).
- **Sidebar**: 296px di desktop, mengecil di bawah 1012px.
- **Padding baris**: 16px horizontal, 12px vertikal (daftar padat berdasarkan desain).

## 6. Gerakan

- **Durasi**: 80ms untuk hover; 200ms untuk membuka menu/popover.
- **Easing**: `ease-out` untuk membuka, `ease-in` untuk menutup.
- **Dihindari**: animasi saat halaman dimuat, parallax, micro-interaksi persisten. Elemen muncul; tidak tampil berlebihan.

## 7. Batasan Penggunaan

- Pertahankan daftar padat, kotak berbatas, dan tipografi sistem secara bersamaan; tombol hijau yang berdiri sendiri tidak cukup untuk menciptakan tampilan produk seperti GitHub.
- Gunakan hijau untuk aksi repositori yang konstruktif, biru untuk tautan dan fokus, serta merah/ungu/abu-abu hanya untuk status issue, PR, dan workflow.
- Utamakan antarmuka yang tenang, border yang eksplisit, dan spasi yang kompak dibandingkan bayangan dekoratif atau kartu bergaya pemasaran yang besar.