asepharyana
d59b59a7a7
Frontend: - migrate from Vite to Astro (astro.config.mjs, pages/, layouts/) - add admin panel, settings page, command palette, error boundary - refactor App.tsx, MascotChatbot, Sidebar, Header, DashboardLayout - update API client, WebSocket, auth, dashboard features Backend: - add admin module and config routes - refactor middlewares, Redis connection, WebSocket server/bridge - add runtime config loader Discord Gateway: - refactor AI moderation: circuit breaker, concurrency limiter, fallback processor - add media analysis client, Seaxng search, user profile learner - add new drizzle migration Shared: - extend database schema, add new config fields
162 lines
8.3 KiB
Markdown
162 lines
8.3 KiB
Markdown
# BETE Design System — Master Index
|
|
|
|
> *"A design system is not a collection of components. It's a collection of decisions."*
|
|
> — Menenun takdir visual untuk IMPHNEN, di atas kanvas Amphoreus.
|
|
|
|
---
|
|
|
|
## 🌌 Filosofi: The Three Pillars
|
|
|
|
### 1. **Glass & Light** — Estetika Transparan
|
|
Kita membangun bukan dengan tembok beton visual, tapi dengan **lapisan kaca yang meneruskan cahaya**. Setiap komponen adalah panele kaca buram (frosted glass) yang:
|
|
- Menampilkan depth melalui **backdrop blur** dan **layering opacity**
|
|
- Menggunakan **light sebagai material** — glow, shadow, highlight sebagai indikator state
|
|
- Memberi kesan **ruang tiga dimensi** di antarmuka dua dimensi
|
|
|
|
### 2. **Fluid Motion** — Gerak yang Bermakna
|
|
Animasi bukan hiasan — ia adalah **bahasa spasial** yang memberitahu pengguna:
|
|
- *"Dari mana elemen ini datang?"* → Transisi masuk
|
|
- *"Ke mana ia pergi?"* → Transisi keluar
|
|
- *"Apa yang terjadi?"* → Feedback mikro (hover, klik, state change)
|
|
- Semua gerak mengikuti **easing curve** yang konsisten (lihat `core/04-motion-system.md`)
|
|
|
|
### 3. **Spatial Memory** — Ingatan Visual
|
|
Seperti ingatan Amphoreus yang abadi, antarmuka kita harus:
|
|
- **Konsisten** — warna, spacing, tipografi yang sama di setiap sudut
|
|
- **Prediktif** — pengguna tahu di mana mencari sesuatu
|
|
- **Responsif** — beradaptasi tanpa kehilangan identitas
|
|
|
|
---
|
|
|
|
## 📂 Struktur Documentasi
|
|
|
|
```
|
|
design/
|
|
├── _index.md ← Kamu di sini
|
|
│
|
|
├── core/ ← Fondasi design token
|
|
│ ├── 01-color-system.md ← Sistem warna (OKLCH + HCT + semantic tokens)
|
|
│ ├── 02-typography.md ← Tipografi (type scale + font system + rhythm)
|
|
│ ├── 03-spatial-system.md ← Grid, spacing, layout tokens
|
|
│ ├── 04-motion-system.md ← Animasi physics & choreography
|
|
│ └── 05-component-architecture.md ← Arsitektur komponen
|
|
│
|
|
├── patterns/ ← Pola desain reusable
|
|
│ ├── 06-interaction-patterns.md ← Micro-interactions
|
|
│ ├── 07-data-visualization.md ← Charts & metrics
|
|
│ ├── 08-moderation-ui.md ← Moderation UI patterns
|
|
│ ├── 09-state-machines.md ← Loading/empty/error states
|
|
│ └── 10-responsive-system.md ← Breakpoints & layout system
|
|
│
|
|
├── services/ ← Per-service design guidelines
|
|
│ ├── 11-frontend-ui.md ← Web frontend (React/Tailwind)
|
|
│ ├── 12-backend-api-guidelines.md ← REST/WS API design
|
|
│ └── 13-gateway-event-design.md ← Discord Gateway event schemas
|
|
│
|
|
├── system/ ← Sistem lintas service
|
|
│ ├── 14-accessibility.md ← Aksesibilitas (a11y)
|
|
│ ├── 15-theme-architecture.md ← Theme engine & CSS custom properties
|
|
│ └── 16-sound-design.md ← Audio feedback system
|
|
│
|
|
└── assets/ ← Diagram, ilustrasi, referensi visual
|
|
└── (future: SVG assets, figma exports, reference images)
|
|
```
|
|
|
|
---
|
|
|
|
## 🔗 Dependency Graph (Wajib Dibaca Berurutan)
|
|
|
|
```
|
|
01-color-system ──────────────────────────────────────────┐
|
|
│ │
|
|
├──→ 02-typography ──────────────────────────────┐ │
|
|
│ │ │ │
|
|
│ └──→ 03-spatial-system ──────────────┐ │ │
|
|
│ │ │ │ │
|
|
│ └──→ 04-motion-system ──┐ │ │ │
|
|
│ │ │ │ │ │
|
|
│ └──→ 05-component-architecture
|
|
│ │
|
|
└────────────────────────────────────────┴──→ 06-interaction-patterns
|
|
│
|
|
├──→ 07-data-visualization
|
|
├──→ 08-moderation-ui
|
|
├──→ 09-state-machines
|
|
└──→ 10-responsive-system
|
|
│
|
|
┌─────────────────────────────────────┴──┐
|
|
↓ ↓
|
|
11-frontend-ui 12-backend-api-guidelines
|
|
│
|
|
13-gateway-event-design
|
|
│
|
|
┌─────────────────────────────────────┘
|
|
↓
|
|
14-accessibility ──→ 15-theme-architecture ──→ 16-sound-design
|
|
```
|
|
|
|
**Bacaan yang disarankan:**
|
|
1. Mulai dengan `core/01-color-system.md` — karena warna adalah keputusan desain paling fundamental.
|
|
2. Lanjut ke `core/02-typography.md` dan `core/03-spatial-system.md` untuk fondasi layout.
|
|
3. `core/04-motion-system.md` dan `core/05-component-architecture.md` sebagai jembatan ke pola.
|
|
4. Pola-pola di `patterns/` bisa dibaca sesuai kebutuhan fitur.
|
|
5. `services/` dan `system/` dibaca terakhir, bergantung pada layer yang sedang dikerjakan.
|
|
|
|
---
|
|
|
|
## 📐 Prinsip Desain Utama
|
|
|
|
| Prinsip | Deskripsi | Contoh Penerapan |
|
|
|---------|-----------|------------------|
|
|
| **Glassmorphism** | Latar belakang transparan dengan efek blur untuk hierarki visual | Card, Sidebar, Modal |
|
|
| **Monochromatic Depth** | Satu rona warna dengan variasi lightness untuk depth | Sistem warna OKLCH |
|
|
| **Kinetic Language** | Gerakan sebagai komunikasi spasial | Transisi tab, notifikasi |
|
|
| **Gaussian Memory** | Elemen yang "diingat" posisinya antar navigasi | Sidebar state, scroll position |
|
|
| **Sound as Feedback** | Audio sebagai layer konfirmasi non-visual | Moderasi alert, koneksi voice |
|
|
| **Progressive Disclosure** | Informasi kompleks diungkap bertahap | Detail panel, analytics drill-down |
|
|
| **Forgiving Layout** | Layout yang toleran terhadap konten kosong/error | Empty states, error boundaries |
|
|
|
|
---
|
|
|
|
## 🚀 Quick Reference: Token Categories
|
|
|
|
| Kategori | Prefix CSS | Contoh |
|
|
|----------|-----------|--------|
|
|
| Warna | `--clr-*` | `--clr-primary`, `--clr-surface` |
|
|
| Spacing | `--sp-*` | `--sp-xs`, `--sp-md`, `--sp-xl` |
|
|
| Typography | `--fs-*`, `--fw-*`, `--lh-*` | `--fs-body`, `--fw-semibold` |
|
|
| Radius | `--rd-*` | `--rd-sm`, `--rd-full` |
|
|
| Shadow | `--sh-*` | `--sh-card`, `--sh-modal` |
|
|
| Z-index | `--z-*` | `--z-header`, `--z-modal` |
|
|
| Timing | `--dur-*` | `--dur-fast`, `--dur-slow` |
|
|
| Easing | `--ease-*` | `--ease-out`, `--ease-spring` |
|
|
|
|
---
|
|
|
|
## 🧭 Status Documentasi
|
|
|
|
| Dokumen | Status | Prioritas |
|
|
|---------|--------|-----------|
|
|
| `core/01-color-system.md` | ✅ Selesai | P0 |
|
|
| `core/02-typography.md` | ✅ Selesai | P0 |
|
|
| `core/03-spatial-system.md` | ✅ Selesai | P0 |
|
|
| `core/04-motion-system.md` | ✅ Selesai | P0 |
|
|
| `core/05-component-architecture.md` | ✅ Selesai | P0 |
|
|
| `patterns/06-interaction-patterns.md` | ✅ Selesai | P0 |
|
|
| `patterns/07-data-visualization.md` | ✅ Selesai | P1 |
|
|
| `patterns/08-moderation-ui.md` | ✅ Selesai | P1 |
|
|
| `patterns/09-state-machines.md` | ✅ Selesai | P0 |
|
|
| `patterns/10-responsive-system.md` | ✅ Selesai | P0 |
|
|
| `services/11-frontend-ui.md` | ✅ Selesai | P0 |
|
|
| `services/12-backend-api-guidelines.md` | ✅ Selesai | P1 |
|
|
| `services/13-gateway-event-design.md` | ✅ Selesai | P1 |
|
|
| `system/14-accessibility.md` | ✅ Selesai | P0 |
|
|
| `system/15-theme-architecture.md` | ✅ Selesai | P1 |
|
|
| `system/16-sound-design.md` | ✅ Selesai | P1 |
|
|
|
|
---
|
|
|
|
*"Ingatan kita akan tetap abadi, takkan pernah mencair..."* ❄️🩵
|
|
|
|
© 2026 IMPHNEN — BETE Design System v2.0
|