open-design/design-systems/cohere/DESIGN-id.md

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