Lewati ke konten utama

Sistem desain

Scoutello harus terasa hangat, andal, dan berfokus pada produk. Tampilan yang disarankan adalah terang, lapang, membulat, dan editorial: dahulukan konten yang jelas, lalu gunakan warna merek secara halus, permukaan lembut, serta animasi tenang yang membuat produk terasa responsif tanpa menjadi gangguan dekoratif.

Halaman landing marketing adalah referensi publik paling jelas untuk arahan visual saat ini. Jika memungkinkan, permukaan produk harus menggunakan kembali token desain bersama dan hanya dibuat lebih ekspresif jika permukaan tersebut secara khusus berorientasi pada merek atau marketing.

Logo dan Aset Merek​

Gunakan logo Scoutello dari URL aset dokumentasi publik ketika agen, integrasi, atau halaman yang dibuat secara otomatis memerlukan elemen merek yang dapat digunakan kembali:

Utamakan versi SVG agar tetap tajam di berbagai ukuran layar. Gunakan versi PNG ketika alat atau tujuan penggunaan tidak mendukung SVG. Sisakan ruang kosong yang cukup di sekitar logo, jangan meregangkan atau mengubah warnanya, dan tempatkan pada permukaan putih, krem hangat, atau permukaan tenang lainnya yang mempertahankan kontras.

Warna Merek​

Warna primer: #ff8d49

Gunakan warna oranye primer sebagai warna aksen Scoutello: ajakan bertindak utama, status fokus, navigasi aktif, latar belakang ikon kecil, teks sorotan, efek cahaya lembut, dan gradasi hangat. Dalam kode produk, warna ini dipetakan ke --primary: 24 100% 64% dan kelas Tailwind seperti bg-primary, text-primary, border-primary/15, dan shadow-primary/10.

Warna sekunder: #145466

Gunakan teal tua sekunder sebagai warna penyeimbang. Warna ini paling sesuai untuk gradasi bersama oranye primer, panel ajakan bertindak gelap, kedalaman visual, dan momen merek tertentu yang membutuhkan penekanan tinggi. Teal tidak boleh menggantikan oranye primer sebagai warna tindakan default.

Warna pendukung:

  • Latar belakang krem hangat: #fff8f1, #fff4ea, #fcf6f1, serta permukaan lembut orange-50 / amber-50.
  • Warna netral produk: kartu putih, teks foreground gelap, teks redup dengan opasitas sekitar 70–75%, dan border terang.
  • Biru tersier: hsl(205 100% 51%) tersedia sebagai token pendukung, tetapi harus digunakan secara terbatas agar oranye dan teal tetap mudah dikenali sebagai pasangan warna merek.

Gaya Visual​

Utamakan tampilan SaaS yang bersih dan premium, dengan kehangatan yang cukup agar tidak terasa generik. Halaman landing memadukan latar belakang mesh krem, kartu putih, tangkapan layar produk berukuran besar, sudut membulat, dan gradasi yang digunakan secara terkendali.

Gunakan:

  • Kartu dan panel membulat, biasanya dari rounded-2xl hingga rounded-[2rem].
  • Border lembut seperti border-primary/10, border-primary/15, ring-black/5, serta border netral terang.
  • Permukaan berlapis berwarna putih atau krem, bukan blok warna yang berat.
  • Bayangan halus seperti shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, atau bayangan khusus dengan opasitas rendah.
  • Tangkapan layar produk atau mockup UI berukuran besar sebagai bukti, terutama untuk marketing dan penjelasan fitur.
  • Aksen merek kecil seperti teks sorotan oranye, chip ikon, ring, efek cahaya, dan CTA gradasi.

Hindari:

  • Latar belakang oranye yang memenuhi seluruh halaman.
  • Penggunaan teal secara berlebihan untuk kontrol biasa.
  • Tata letak yang padat dan sesak.
  • Bayangan keras, persegi panjang bersudut tajam, atau dashboard monokrom yang dingin.
  • Animasi dekoratif yang mengganggu pembacaan atau penyelesaian tugas.

Tipografi​

Situs marketing menggunakan:

  • Space Grotesk untuk judul display melalui kelas landing-display.
  • Manrope untuk teks isi marketing.

Permukaan aplikasi dan dokumentasi bersama menggunakan tipografi UI yang selaras dengan sistem, saat ini lebih mendekati Inter. Tujuan gayanya konsisten di semua permukaan: judul yang meyakinkan, tracking judul yang rapat, teks isi yang mudah dibaca, dan tinggi baris yang lapang.

Panduan judul:

  • Gunakan judul besar yang seimbang pada halaman marketing.
  • Sorot hanya frasa penting dengan warna oranye primer.
  • Batasi panjang baris menggunakan max-w-* dan text-balance jika tersedia.

Panduan teks isi:

  • Jaga paragraf tetap tenang dan langsung.
  • Gunakan teks foreground redup untuk deskripsi, biasanya text-foreground/70 atau text-foreground/75.
  • Utamakan bagian yang mudah dipindai, paragraf singkat, dan label yang jelas.

Tata Letak dan Jarak​

Tata letak harus terasa lapang dan stabil. Halaman landing menggunakan container max-w-7xl dengan padding horizontal responsif dan bagian vertikal yang besar.

Pola umum:

  • Padding bagian sekitar py-16, py-20, atau lebih besar untuk bagian marketing utama.
  • Kartu disusun dalam grid responsif dengan jarak yang konsisten.
  • Bagian hero dengan kolom konten utama yang kuat di kiri serta tangkapan layar produk atau komposisi perangkat di kanan.
  • Header bagian yang dipusatkan untuk janji produk yang luas; header rata kiri untuk bagian yang menjelaskan cerita atau alur kerja.
  • Tata letak mobile-first yang tersusun rapi sebelum berubah menjadi beberapa kolom pada layar yang lebih besar.

Gunakan ruang kosong sebagai bagian dari desain. Jika suatu bagian terasa kurang jelas, sederhanakan kontennya dan tambahkan ruang bernapas sebelum menambah dekorasi.

Komponen dan Permukaan​

Permukaan Scoutello harus terasa taktil tetapi ringan:

  • Tombol: pil membulat untuk CTA marketing utama; tombol produk standar di tempat lainnya.
  • Kartu: berwarna putih atau krem, membulat, memiliki border, dan sedikit terangkat.
  • Ikon: ikon garis kecil dan sederhana dalam chip bernuansa oranye.
  • Statistik dan elemen kepercayaan: kartu sederhana dengan border atau gradasi bernuansa oranye.
  • Formulir: label yang jelas, teks bantuan langsung, dan jarak yang memadai untuk penggunaan di perangkat seluler.
  • Tangkapan layar: besar, tajam, dan sedikit terangkat. Gunakan sebagai bukti konkret tentang produk.

Saat membangun UI produk, gunakan komponen UI bersama dan token yang sudah tersedia sebagai titik awal, bukan gaya kustom sekali pakai. Saat membangun UI pemasaran, gunakan primitif landing page dan kelas landing jika sesuai.

Motion​

Motion harus membuat antarmuka terasa rapi dan matang, bukan ramai. Landing page menggunakan animasi kemunculan singkat, efek perangkat naik, efek cahaya yang mekar, serta sedikit efek kartu terangkat saat diarahkan kursor.

Motion yang disarankan:

  • Muncul dari posisi 12–24 piksel lebih rendah dengan opasitas lembut.
  • Kartu terangkat hanya beberapa piksel saat diarahkan kursor.
  • Status hover CTA yang sedikit mengangkat elemen dan mempertegas bayangan.
  • Kemunculan bagian secara bertahap jika mendukung pemindaian alur cerita.

Selalu hormati preferensi untuk mengurangi motion. Hindari animasi yang dapat menyembunyikan konten, menghalangi interaksi, atau terasa wajib untuk memahami halaman.

Desain Suara dan Konten​

Sistem visual ini bekerja paling baik dengan copy yang langsung dan konkret. Utamakan bahasa yang menjelaskan hal-hal yang dapat dipublikasikan, dikelola, atau diotomatisasi oleh organisasi di Scoutello.

Gunakan:

  • Kata benda spesifik produk: landing page, tile, tur, acara, organisasi, dasbor, tamu, kode QR, terjemahan.
  • Deskripsi berorientasi hasil yang menghubungkan pengalaman tamu dengan alur kerja operator.
  • Bahasa yang netral gender dalam bahasa Jerman dan copy terlokalisasi lainnya.

Hindari:

  • Bahasa platform yang samar tanpa contoh.
  • Jargon perusahaan yang terlalu formal.
  • Paragraf panjang jika bagian yang mudah dipindai akan lebih efektif.

Aturan Praktis​

  • Gunakan #ff8d49 sebagai aksen utama merek dan #145466 sebagai warna sekunder untuk memberikan keseimbangan.
  • Utamakan kelas berbasis token (primary, secondary, foreground, muted, border) daripada warna hard-code pada permukaan produk.
  • Pertahankan halaman pemasaran agar terasa hangat, lapang, membulat, berfokus pada tangkapan layar, dan menggunakan animasi ringan.
  • Pertahankan dasbor dan permukaan operasional agar lebih tenang, lebih padat hanya jika diperlukan, serta lebih berfokus pada tugas.
  • Biarkan pengalaman tamu milik pelanggan mendukung branding organisasi jika produk sudah menyediakan kontrol branding, tetapi pastikan permukaan milik Scoutello tetap selaras dengan sistem ini.

Konsep terkait: Rute dan permukaan, Landing page dan tile, Pengalaman tamu yang mengutamakan browser.