Relasi

01 / Fondasi

Biru tinta, kertas pucat, satu penanda gandum.

Biru tinta, kertas biru pucat, dan penanda gandum untuk hari acuan. Rail tinta ringkas 88px dan map bertepi lidah berjenjang membedakannya dari indeks buku bata Saku Dapur. Kartu bersudut lidah indeks 14px dan 3px di sisi lain; tanpa avatar foto, tumpukan kartu statistik, atau gradien.

• Kertas biru pucat#eef2f6
• Biru tinta#203b61
• Label biru#ccdef3
• Lembar map#ffffff
• Penanda gandum#f0ddb5

Figtree 600 menulis wordmark, judul, nomor lajur, dan hitungan; Figtree 400 membawa kartu, tabel, label, dan teks baca. Keduanya WOFF2 Latin statis, satu bobot per berkas, dengan angka tabular tanpa bold atau italic tiruan. Commissioner 600 tetap cadangan tercatat yang tidak dipakai.

02 / Memindah kartu

Satu perpindahan, tiga jalan masuk.

Hubungan disimpan dalam map, bukan dashboard. Artefak Relasi adalah map klien: lembar kontak, kartu peluang berlidah indeks, tulang punggung riwayat, dan lembar tindak lanjut. Pembukanya langsung pipeline — Kenalan, Pemetaan, Proposal, Sepakat — sehingga tugas pertama adalah memutuskan percakapan mana yang bergerak berikutnya.

Rail tinta, header putih dengan nama meja, baris studi fiktif, lalu tugasnya. Pipeline dibuka dengan strip ringkasan bergaris dan empat lajur bernomor; pada 701–1100px papan menjadi dua kali dua, dan di ponsel pemilih tahap berlabel menampilkan satu lajur dengan navigasi bawah empat tujuan. Kontak terbuka sebagai map klien penuh dengan margin tindak lanjut 310px.

1. Pointer: tekan pegangan dan geser 8px (sentuh: tahan 200ms). Kartu mengikuti pointer dan slot bernama menunjukkan tempat jatuhnya; Escape, meninggalkan jendela, atau melepas di luar lajur membatalkan.
2. Papan ketik: fokus “Pindahkan …”, tekan Spasi atau Enter, pilih tahap dengan ←/→ dan posisi dengan ↑/↓, Home atau End; Enter menaruh, Escape mengembalikan kartu dan fokus.
3. Pindahkan ke…: formulir berlabel dengan tahap, posisi, dan pratinjau, selalu tersedia — di ponsel, saat diurutkan atau disaring, dan untuk pembaca layar.

Ketiganya menjalankan satu reducer domain murni. Satu perpindahan adalah satu revisi, diumumkan sebagai “tahap, posisi n dari m”, dengan satu Urungkan untuk sesi. Sepakat dengan tugas terbuka menanyakan apakah tugas dipertahankan atau ditandai selesai; tidak ada yang membuat kontrak. Perilaku seret adalah kode aplikasi bersama tanpa gaya Relasi.

Lajur adalah section berjudul dengan daftar kartu berurutan. Kartu diangkat dari pegangan berlabel dengan Spasi atau Enter, panah memilih tahap dan posisi, Home/End melompat, Enter menaruh, dan Escape mengembalikannya; setiap langkah diumumkan dengan kata. Pindahkan ke… selalu tersedia sebagai formulir. Dialog memerangkap dan memulihkan fokus, formulir memfokuskan kolom salah pertama, tabel mempertahankan caption dan status urut, dan kedua mode warna menjaga teks minimal 4,5:1.

Kartu yang diangkat mengikuti pointer tanpa pegas atau miring; kartu yang ditaruh mengendap dalam 160ms dan laci detail bergeser dalam 180ms. Keduanya hilang pada reduced motion yang dibaca langsung. Tanpa confetti, bunyi, atau skeleton berkilau.

Brand Anda mengganti nama, logo, tinta, dan warna label lewat panel Sesuaikan yang ada; teks label diukur terhadap warna brand itu sendiri. Latar rail, penanda gandum beserta tintanya, struktur, dan batas fiktif tetap asli, pada kedua mode dan di setiap portal.

03 / Batas & provenans

Meja klien fiktif.

Halaman App Router statis dwibahasa. Satu record berversi, collection-relasi-crm-v1, divalidasi zod/mini pada setiap baca dan sebelum setiap tulis: 64 KiB sebelum parse, 20 kontak, 20 peluang, 60 entri riwayat, dan 20 tugas, objek ketat, tanggal kalender, dan pemeriksaan relasi. Seret, papan ketik, dan formulir Pindahkan ke… memakai satu reducer domain murni; perubahan tab lain ditawarkan, tidak diterapkan diam-diam.

Studi desain fiktif, bukan CRM operasional. Tanpa klien, harga, nilai deal, kontrak, email, kalender, atau pengingat nyata. Penyimpanan lokal tidak dibagi lintas perangkat, tanpa transaksi lintas tab, dan tidak terenkripsi; jangan memasukkan data klien sungguhan.

Map, lambang dua lembar, lajur, tulang punggung riwayat, dan grafik dibuat untuk studi ini dari pekerjaan agensi jasa, bukan dari CRM referensi. Kedelapan orang, perusahaan, peluang, riwayat, dan tanggal adalah data latihan karangan; alamat berakhiran example.invalid dan tidak menaut ke mana pun. Ikon dari Lucide yang terpasang di proyek.

Figtree 400/600 adalah WOFF2 Latin statis yang dihosting sendiri dari Fontsource 5.3.0 di bawah OFL 1.1, tanpa Reserved Font Name yang ditetapkan; SHA-256-nya dicocokkan dengan usulan yang disetujui. Commissioner 600 tetap cadangan yang tidak dipakai. Baca lisensi Figtree

04 / Tangkapan asli

Pipeline yang diimplementasikan.