admin
5afeb6b78a
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
· 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
· 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
· 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
横向流程图每步写清页面／功能／操作／完成判据。
· 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
· 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
· 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。
二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。
三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
270 lines
15 KiB
Markdown
270 lines
15 KiB
Markdown
# Sistem Desain Terinspirasi dari Cohere
|
||
|
||
> Kategori: AI & LLM
|
||
> Platform AI enterprise. Gradien vibran, estetika dasbor kaya data.
|
||
|
||
## 1. Tema Visual & Atmosfer
|
||
|
||
Antarmuka Cohere adalah dasbor perintah enterprise yang disempurnakan — percaya diri, bersih, dan dirancang untuk membuat AI terasa seperti infrastruktur serius, bukan mainan konsumen. Pengalamannya bertumpu pada kanvas putih cerah di mana konten diatur dalam kartu-kartu bertepi melengkung (radius 22px) yang menciptakan bahasa wadah organik menyerupai awan. Ini adalah situs yang berbicara kepada CTO dan arsitek enterprise: profesional tanpa terasa dingin, canggih tanpa terasa mengintimidasi.
|
||
|
||
Bahasa desainnya menjembatani dua dunia dengan sistem dua jenis huruf: CohereText, serif display kustom dengan tracking ketat, memberikan judul bobot sebuah manifesto teknologi, sementara Unica77 Cohere Web menangani semua teks isi dan UI dengan presisi Swiss geometrik. Pasangan serif/sans ini menciptakan kepribadian "otoritas percaya diri bertemu kejelasan rekayasa" yang sempurna mencerminkan platform AI enterprise.
|
||
|
||
Warna digunakan dengan sangat hemat — antarmukanya hampir seluruhnya hitam-putih dengan border abu-abu sejuk (`#d9d9dd`, `#e5e7eb`). Ungu-violet hanya muncul di band hero fotografi, seksi gradien, dan biru interaktif (`#1863dc`) yang menandai status hover dan fokus. Penghematan kromatik ini berarti ketika warna MEMANG muncul — dalam tangkapan layar produk, fotografi enterprise, dan seksi ungu gelap — warna tersebut membawa bobot visual maksimal.
|
||
|
||
**Karakteristik Utama:**
|
||
- Kanvas putih cerah dengan border penahanan abu-abu sejuk
|
||
- Radius border 22px khas — kekhasan "kartu Cohere" yang membulat
|
||
- Dua jenis huruf kustom: CohereText (serif display) + Unica77 (sans isi)
|
||
- Penghematan kromatik berkelas enterprise: hitam, putih, abu-abu sejuk, aksen ungu-biru minimal
|
||
- Seksi hero ungu/violet gelap yang memberikan kontras dramatis
|
||
- Tombol ghost/transparan yang berubah ke biru saat hover
|
||
- Fotografi enterprise menampilkan beragam aplikasi dunia nyata
|
||
- CohereMono untuk kode dan label teknis dengan transformasi huruf kapital
|
||
|
||
## 2. Palet Warna & Peran
|
||
|
||
### Primer
|
||
- **Cohere Black** (`#000000`): Teks judul primer dan elemen penekanan maksimal.
|
||
- **Near Black** (`#212121`): Warna tautan isi standar — sedikit lebih lembut dari hitam murni.
|
||
- **Deep Dark** (`#17171c`): Hampir-hitam bernuansa biru untuk navigasi dan teks seksi gelap.
|
||
|
||
### Sekunder & Aksen
|
||
- **Interaction Blue** (`#1863dc`): Aksen interaktif primer — muncul pada hover tombol, status fokus, dan tautan aktif. Satu-satunya warna aksi kromatik.
|
||
- **Ring Blue** (`#4c6ee6` pada 50%): Warna ring Tailwind untuk indikator fokus keyboard.
|
||
- **Focus Purple** (`#9b60aa`): Warna border fokus input — violet yang diredam.
|
||
|
||
### Permukaan & Latar Belakang
|
||
- **Pure White** (`#ffffff`): Latar belakang halaman primer dan permukaan kartu.
|
||
- **Snow** (`#fafafa`): Permukaan yang sedikit lebih tinggi dan latar belakang seksi terang.
|
||
- **Lightest Gray** (`#f2f2f2`): Border kartu dan garis penahanan paling lembut.
|
||
|
||
### Netral & Teks
|
||
- **Muted Slate** (`#93939f`): Tautan footer yang dilemahkan dan teks tersier — abu-abu bernada sejuk dengan sedikit rona biru-violet.
|
||
- **Border Cool** (`#d9d9dd`): Border seksi dan item daftar standar — abu-abu sejuk, sedikit bernuansa ungu.
|
||
- **Border Light** (`#e5e7eb`): Varian border lebih terang — gray-200 standar Tailwind.
|
||
|
||
### Sistem Gradien
|
||
- **Band Hero Ungu-Violet**: Seksi gradien ungu gelap yang menciptakan kontras dramatis terhadap kanvas putih. Muncul sebagai band lebar penuh yang menampung tangkapan layar produk dan pesan utama.
|
||
- **Gradien Footer Gelap**: Halaman beralih melalui ungu gelap/arang menuju footer hitam, menciptakan efek "senja".
|
||
|
||
## 3. Aturan Tipografi
|
||
|
||
### Keluarga Font
|
||
- **Display**: `CohereText`, dengan fallback: `Space Grotesk, Inter, ui-sans-serif, system-ui`
|
||
- **Isi / UI**: `Unica77 Cohere Web`, dengan fallback: `Inter, Arial, ui-sans-serif, system-ui`
|
||
- **Kode**: `CohereMono`, dengan fallback: `Arial, ui-sans-serif, system-ui`
|
||
- **Ikon**: `CohereIconDefault` (font ikon kustom)
|
||
|
||
### Hierarki
|
||
|
||
| Peran | Font | Ukuran | Ketebalan | Tinggi Baris | Spasi Huruf | Catatan |
|
||
|------|------|------|--------|-------------|----------------|-------|
|
||
| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (ketat) | -1.44px | Dampak maksimal, otoritas serif |
|
||
| Display Sekunder | CohereText | 60px (3.75rem) | 400 | 1.00 (ketat) | -1.2px | Judul seksi besar |
|
||
| Judul Seksi | Unica77 | 48px (3rem) | 400 | 1.20 (ketat) | -0.48px | Judul seksi fitur |
|
||
| Sub-judul | Unica77 | 32px (2rem) | 400 | 1.20 (ketat) | -0.32px | Judul kartu, nama fitur |
|
||
| Judul Fitur | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Judul seksi lebih kecil |
|
||
| Isi Besar | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Paragraf pengantar |
|
||
| Isi / Tombol | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Isi standar, teks tombol |
|
||
| Tombol Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (longgar) | normal | Tombol lebih kecil, label ditekankan |
|
||
| Keterangan | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, deskripsi |
|
||
| Label Kapital | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Label seksi huruf kapital |
|
||
| Kecil | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Teks terkecil, tautan footer |
|
||
| Kode Mikro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Label kode kapital sangat kecil |
|
||
|
||
### Prinsip
|
||
- **Serif untuk deklarasi, sans untuk utilitas**: CohereText membawa suara merek di skala display — terminal serifnya memberikan judul otoritas publikasi penelitian. Unica77 menangani semua yang fungsional dengan netralitas Swiss-geometrik.
|
||
- **Tracking negatif pada skala besar**: CohereText menggunakan spasi huruf -1.2px hingga -1.44px pada 60–72px, menciptakan blok teks yang padat dan berdampak.
|
||
- **Satu ketebalan isi**: Hampir semua penggunaan Unica77 berada pada ketebalan 400. Ketebalan 500 hanya muncul untuk penekanan tombol kecil. Sistem mengandalkan ukuran dan spasi, bukan kontras ketebalan.
|
||
- **Label kode huruf kapital**: CohereMono menggunakan huruf kapital dengan spasi huruf positif (0.16–0.28px) untuk tag teknis dan penanda seksi.
|
||
|
||
## 4. Gaya Komponen
|
||
|
||
### Tombol
|
||
|
||
**Ghost / Transparan**
|
||
- Latar belakang: transparan (`rgba(255, 255, 255, 0)`)
|
||
- Teks: Cohere Black (`#000000`)
|
||
- Tidak ada border yang terlihat
|
||
- Hover: teks bergeser ke Interaction Blue (`#1863dc`), opacity 0.8
|
||
- Fokus: outline solid 2px dalam Interaction Blue
|
||
- Gaya tombol primer — tidak terlihat hingga diinteraksikan
|
||
|
||
**Dark Solid**
|
||
- Latar belakang: gelap/hitam
|
||
- Teks: Pure White
|
||
- Untuk CTA pada permukaan terang
|
||
- Berbentuk pil atau radius standar
|
||
|
||
**Outlined**
|
||
- Penahanan berbasis border
|
||
- Digunakan dalam aksi sekunder
|
||
|
||
### Kartu & Kontainer
|
||
- Latar belakang: Pure White (`#ffffff`)
|
||
- Border: solid tipis Lightest Gray (`1px solid #f2f2f2`) untuk kartu halus; Cool Border (`#d9d9dd`) untuk yang ditekankan
|
||
- Radius: **22px** — radius khas Cohere untuk kartu primer, gambar, dan kontainer dialog. Juga 4px, 8px, 16px, 20px untuk elemen lebih kecil
|
||
- Bayangan: minimal — Cohere mengandalkan warna latar belakang dan border daripada bayangan
|
||
- Khusus: radius `0px 0px 22px 22px` (pembulatan hanya bawah) untuk kontainer seksi
|
||
- Dialog: radius 8px untuk kotak modal/dialog
|
||
|
||
### Input & Formulir
|
||
- Teks: putih pada input gelap, hitam pada terang
|
||
- Border fokus: Focus Purple (`#9b60aa`) dengan `1px solid`
|
||
- Bayangan fokus: ring merah (`rgb(179, 0, 0) 0px 0px 0px 2px`) — kemungkinan untuk indikasi status error
|
||
- Outline fokus: Interaction Blue solid 2px
|
||
|
||
### Navigasi
|
||
- Nav horizontal bersih pada latar belakang putih atau gelap
|
||
- Logo: wordmark Cohere (SVG kustom)
|
||
- Tautan: teks gelap pada 16px Unica77
|
||
- CTA: tombol solid gelap
|
||
- Mobile: collapse hamburger
|
||
|
||
### Perlakuan Gambar
|
||
- Fotografi enterprise dengan subjek dan lingkungan yang beragam
|
||
- Fotografi hero bernuansa ungu untuk seksi dramatis
|
||
- Tangkapan layar UI produk pada permukaan gelap
|
||
- Gambar dengan radius 22px mengikuti sistem kartu
|
||
- Seksi gradien ungu lebar penuh
|
||
|
||
### Komponen Khas
|
||
|
||
**Sistem Kartu 22px**
|
||
- Radius border 22px adalah tanda tangan visual Cohere
|
||
- Semua kartu primer, gambar, dan kontainer menggunakan radius ini
|
||
- Menciptakan kelembutan organik menyerupai awan yang khas dibanding tipikal 8–12px
|
||
|
||
**Bilah Kepercayaan Enterprise**
|
||
- Logo perusahaan ditampilkan dalam strip horizontal
|
||
- Menunjukkan adopsi enterprise
|
||
- Perlakuan logo bersih dan monokrom
|
||
|
||
**Band Hero Ungu**
|
||
- Seksi ungu gelap lebar penuh yang menampung showcase produk
|
||
- Menciptakan jeda visual dramatis dalam aliran halaman putih
|
||
- Tangkapan layar produk mengapung dalam lingkungan ungu
|
||
|
||
**Tag Kode Huruf Kapital**
|
||
- CohereMono dalam huruf kapital dengan spasi huruf
|
||
- Digunakan sebagai penanda seksi dan label kategorisasi
|
||
- Menciptakan hierarki informasi teknis yang terstruktur
|
||
|
||
## 5. Prinsip Tata Letak
|
||
|
||
### Sistem Spasi
|
||
- Unit dasar: 8px
|
||
- Skala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
|
||
- Padding tombol bervariasi per varian
|
||
- Padding internal kartu: sekitar 24–32px
|
||
- Spasi vertikal seksi: luas (56–60px antar seksi)
|
||
|
||
### Grid & Kontainer
|
||
- Lebar kontainer maksimal: hingga 2560px (sangat lebar) dengan skala responsif
|
||
- Hero: terpusat dengan tipografi dramatis
|
||
- Seksi fitur: grid kartu multi-kolom
|
||
- Seksi enterprise: band ungu lebar penuh
|
||
- 26 breakpoint terdeteksi — sistem responsif yang sangat granular
|
||
|
||
### Filosofi Whitespace
|
||
- **Kejelasan enterprise**: Setiap seksi menyajikan satu proposisi yang jelas dengan ruang napas di antara seksi.
|
||
- **Fotografi sebagai hero**: Seksi fotografi besar memberikan daya tarik visual tanpa memerlukan elemen desain dekoratif.
|
||
- **Pengelompokan kartu**: Konten terkait dikelompokkan dalam kartu bertepi melengkung 22px, menciptakan kluster informasi yang alami.
|
||
|
||
### Skala Radius Border
|
||
- Tajam (4px): Elemen navigasi, tag kecil, paginasi
|
||
- Nyaman (8px): Kotak dialog, kontainer sekunder, kartu kecil
|
||
- Luas (16px): Kontainer unggulan, kartu medium
|
||
- Besar (20px): Kartu fitur besar
|
||
- Khas (22px): Kartu primer, gambar hero, kontainer utama — radius Cohere yang SESUNGGUHNYA
|
||
- Pil (9999px): Tombol, tag, indikator status
|
||
|
||
## 6. Kedalaman & Elevasi
|
||
|
||
| Tingkat | Perlakuan | Penggunaan |
|
||
|-------|-----------|-----|
|
||
| Datar (Level 0) | Tanpa bayangan, tanpa border | Latar belakang halaman, blok teks |
|
||
| Berborder (Level 1) | `1px solid #f2f2f2` atau `#d9d9dd` | Kartu standar, pemisah daftar |
|
||
| Band Ungu (Level 2) | Latar belakang ungu gelap lebar penuh | Seksi hero, showcase fitur |
|
||
|
||
**Filosofi Bayangan**: Cohere hampir bebas bayangan. Kedalaman dikomunikasikan melalui **kontras warna latar belakang** (kartu putih di atas band ungu, permukaan putih di atas snow), **penahanan border** (border abu-abu sejuk), dan **pergantian seksi terang-ke-gelap** yang dramatis. Ketika elemen memerlukan elevasi, hal tersebut dicapai dengan menempatkannya putih-di-atas-gelap daripada melalui proyeksi bayangan.
|
||
|
||
## 7. Yang Boleh dan Tidak Boleh
|
||
|
||
### Yang Boleh
|
||
- Gunakan radius border 22px pada semua kartu dan kontainer primer — itulah tanda tangan visual
|
||
- Gunakan CohereText untuk judul display (72px, 60px) dengan spasi huruf negatif
|
||
- Gunakan Unica77 untuk semua teks isi dan UI pada ketebalan 400
|
||
- Pertahankan palet hitam-putih dengan border abu-abu sejuk
|
||
- Gunakan Interaction Blue (#1863dc) hanya untuk status interaktif hover/fokus
|
||
- Gunakan seksi ungu gelap untuk jeda visual dramatis dan showcase produk
|
||
- Terapkan huruf kapital + spasi huruf pada CohereMono untuk label seksi
|
||
- Pertahankan fotografi berkelas enterprise dengan subjek yang beragam
|
||
|
||
### Yang Tidak Boleh
|
||
- Jangan gunakan radius border selain 22px pada kartu primer — radius khas ini penting
|
||
- Jangan perkenalkan warna hangat — palet secara ketat bernada sejuk
|
||
- Jangan gunakan bayangan berat — kedalaman berasal dari kontras warna dan border
|
||
- Jangan gunakan ketebalan tebal (700+) pada teks isi — rentang yang benar adalah 400–500
|
||
- Jangan lewatkan hierarki serif/sans — CohereText untuk judul, Unica77 untuk isi
|
||
- Jangan gunakan ungu sebagai warna permukaan kartu — ungu dikhususkan untuk seksi lebar penuh
|
||
- Jangan kurangi spasi seksi di bawah 40px — tata letak enterprise membutuhkan ruang napas
|
||
- Jangan tambahkan dekorasi pada tombol secara default — ghost/transparan adalah keadaan dasar
|
||
|
||
## 8. Perilaku Responsif
|
||
|
||
### Breakpoint
|
||
| Nama | Lebar | Perubahan Utama |
|
||
|------|-------|-------------|
|
||
| Mobile Kecil | <425px | Tata letak kompak, spasi minimal |
|
||
| Mobile | 425–640px | Satu kolom, kartu bertumpuk |
|
||
| Mobile Besar | 640–768px | Penyesuaian spasi minor |
|
||
| Tablet | 768–1024px | Grid 2 kolom mulai |
|
||
| Desktop | 1024–1440px | Tata letak multi-kolom penuh |
|
||
| Desktop Besar | 1440–2560px | Lebar kontainer maksimal |
|
||
|
||
*26 breakpoint terdeteksi — salah satu situs paling granular responsifnya dalam dataset.*
|
||
|
||
### Target Sentuh
|
||
- Tombol berukuran cukup untuk interaksi sentuh
|
||
- Tautan navigasi dengan spasi yang nyaman
|
||
- Permukaan kartu sebagai target sentuh
|
||
|
||
### Strategi Pengecilan
|
||
- **Navigasi**: Nav penuh mengecil menjadi hamburger
|
||
- **Grid fitur**: Multi-kolom → 2 kolom → satu kolom
|
||
- **Teks hero**: 72px → 48px → 32px skala progresif
|
||
- **Seksi ungu**: Pertahankan lebar penuh, konten bertumpuk
|
||
- **Grid kartu**: 3 → 2 → 1 kolom
|
||
|
||
### Perilaku Gambar
|
||
- Fotografi diskalakan proporsional dalam kontainer berradius 22px
|
||
- Tangkapan layar produk mempertahankan rasio aspek
|
||
- Seksi ungu menskalakan latar belakang secara proporsional
|
||
|
||
## 9. Panduan Prompt Agen
|
||
|
||
### Referensi Warna Cepat
|
||
- Teks Primer: "Cohere Black (#000000)"
|
||
- Latar Belakang Halaman: "Pure White (#ffffff)"
|
||
- Teks Sekunder: "Near Black (#212121)"
|
||
- Aksen Hover: "Interaction Blue (#1863dc)"
|
||
- Teks Diredam: "Muted Slate (#93939f)"
|
||
- Border Kartu: "Lightest Gray (#f2f2f2)"
|
||
- Border Seksi: "Border Cool (#d9d9dd)"
|
||
|
||
### Contoh Prompt Komponen
|
||
- "Buat seksi hero di atas Pure White (#ffffff) dengan CohereText pada 72px ketebalan 400, line-height 1.0, letter-spacing -1.44px. Teks Cohere Black. Subjudul dalam Unica77 pada 18px ketebalan 400, line-height 1.4."
|
||
- "Rancang kartu fitur dengan radius border 22px, border 1px solid Lightest Gray (#f2f2f2) di atas putih. Judul dalam Unica77 pada 32px, letter-spacing -0.32px. Isi dalam Unica77 pada 16px, Muted Slate (#93939f)."
|
||
- "Buat tombol ghost: latar belakang transparan, teks Cohere Black dalam Unica77 pada 16px. Saat hover, teks bergeser ke Interaction Blue (#1863dc) dengan opacity 0.8. Fokus: outline Interaction Blue solid 2px."
|
||
- "Buat seksi ungu gelap lebar penuh dengan teks putih. CohereText pada 60px untuk judulnya. Tangkapan layar produk mengapung di dalamnya menggunakan radius border 22px."
|
||
- "Rancang label seksi menggunakan CohereMono pada 14px, huruf kapital, letter-spacing 0.28px. Teks Muted Slate (#93939f)."
|
||
|
||
### Panduan Iterasi
|
||
1. Fokus pada SATU komponen dalam satu waktu
|
||
2. Selalu gunakan radius 22px untuk kartu primer — "kekhasan kartu Cohere"
|
||
3. Tentukan jenis huruf — CohereText untuk judul, Unica77 untuk isi, CohereMono untuk label
|
||
4. Elemen interaktif menggunakan Interaction Blue (#1863dc) hanya saat hover
|
||
5. Pertahankan permukaan putih dengan border abu-abu sejuk — tanpa nada hangat
|
||
6. Ungu diperuntukkan bagi seksi lebar penuh, bukan latar belakang kartu
|