Lewati ke konten utama

Sistem desain

Scoutello seharusnya terasa hangat, cakap, dan berfokus pada produk. Tampilan yang disukai adalah terang, lapang, membulat, dan editorial: konten yang jelas terlebih dahulu, kemudian warna merek yang halus, permukaan yang lembut, dan gerakan yang tenang yang membuat produk terasa responsif tanpa menjadi kebisingan dekoratif.

Halaman arahan pemasaran adalah referensi publik terjelas untuk arahan visual saat ini. Permukaan produk harus menggunakan kembali token desain bersama jika memungkinkan dan hanya menjadi lebih ekspresif ketika permukaan secara eksplisit berorientasi pada merek atau pemasaran.

Logo dan Aset Merek​

Gunakan logo Scoutello dari URL aset dokumentasi publik ketika agen, integrasi, atau halaman yang dihasilkan memerlukan tanda merek yang dapat digunakan kembali:

Lebih sukai versi SVG untuk rendering yang tajam di berbagai ukuran layar. Gunakan versi PNG ketika alat atau tujuan tidak dapat menangani SVG. Jaga ruang kosong yang cukup di sekitar tanda, hindari meregangkan atau mewarnainya kembali, dan letakkan di permukaan putih, krem hangat, atau permukaan tenang lainnya yang mempertahankan kontras.

Warna Merek​

Warna primer: #ff8d49

Gunakan oranye primer sebagai warna aksen Scoutello: panggilan tindakan primer, status fokus, navigasi aktif, latar belakang ikon kecil, sorot teks, cahaya lembut, dan gradien hangat. Dalam kode produk ini memetakan 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 dasar. Ini bekerja paling baik dalam gradien dengan oranye primer, panel panggilan tindakan gelap, kedalaman visual, dan momen merek berpenekanan tinggi sesekali. Ini tidak boleh menggantikan oranye primer sebagai warna tindakan default.

Warna pendukung:

  • Latar belakang krem hangat: #fff8f1, #fff4ea, #fcf6f1, dan permukaan orange-50 / amber-50 yang lembut.
  • Netral produk: kartu putih, teks latar depan gelap, teks yang diredam sekitar 70-75% opasitas, dan batas terang.
  • Biru tersier: hsl(205 100% 51%) tersedia sebagai token pendukung, tetapi harus digunakan secukupnya agar oranye dan teal tetap dikenali sebagai pasangan merek.

Gaya Visual​

Lebih sukai tampilan SaaS yang bersih dan premium dengan kehangatan yang cukup agar tidak terasa generik. Halaman arahan menggabungkan latar belakang jala krem, kartu putih, tangkapan layar produk besar, sudut membulat, dan gradien yang terkendali.

Gunakan:

  • Kartu dan panel membulat, seringkali dari rounded-2xl hingga rounded-[2rem].
  • Batas lembut seperti border-primary/10, border-primary/15, ring-black/5, dan batas netral terang.
  • Permukaan putih atau krem berlapis alih-alih blok berwarna tebal.
  • Bayangan halus seperti shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, atau bayangan opasitas rendah kustom.
  • Tangkapan layar produk besar atau mockup UI sebagai bukti, terutama untuk pemasaran dan penceritaan fitur.
  • Momen merek kecil seperti sorotan teks oranye, chip ikon, cincin, cahaya, dan CTA gradien.

Hindari:

  • Latar belakang oranye halaman penuh yang mencolok.
  • Penggunaan teal yang berlebihan untuk kontrol biasa.
  • Tata letak yang padat dan sempit.
  • Bayangan keras, persegi tajam, atau dasbor monokrom yang dingin.
  • Gerakan dekoratif yang bersaing dengan membaca atau penyelesaian tugas.

Tipografi​

Situs pemasaran menggunakan:

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

Permukaan aplikasi dan dokumentasi bersama menggunakan tipografi UI yang selaras dengan sistem, saat ini lebih dekat ke Inter. Tujuan gayanya konsisten di semua permukaan: judul yang percaya diri, pelacakan judul yang ketat, teks isi yang dapat dibaca, dan ketinggian baris yang lapang.

Panduan judul:

  • Gunakan judul besar dan seimbang di halaman pemasaran.
  • Sorot hanya frasa penting dengan oranye primer.
  • Jaga agar panjang baris terkontrol dengan max-w-* dan text-balance jika tersedia.

Panduan teks isi:

  • Jaga agar paragraf tetap tenang dan langsung.
  • Gunakan teks latar depan yang diredam untuk deskripsi, biasanya text-foreground/70 atau text-foreground/75.
  • Lebih sukai bagian yang dapat dipindai, paragraf pendek, dan label yang jelas.

Tata Letak dan Jarak​

Tata letak harus terasa lapang dan stabil. Halaman arahan menggunakan kontainer max-w-7xl dengan bantalan horizontal responsif dan bagian vertikal yang besar.

Pola umum:

  • Bantalan bagian sekitar py-16, py-20, atau lebih besar untuk bagian pemasaran utama.
  • Kartu diatur dalam kisi responsif dengan celah yang konsisten.
  • Bagian hero dengan kolom konten kiri yang kuat dan tangkapan layar produk atau komposisi perangkat di sebelah kanan.
  • Header bagian yang berpusat untuk janji produk yang luas; header yang disejajarkan ke kiri untuk bagian cerita atau alur kerja.
  • Tata letak mobile-first yang ditumpuk dengan rapi sebelum menjadi multi-kolom di layar yang lebih besar.

Gunakan ruang putih sebagai bagian dari desain. Jika suatu bagian terasa tidak jelas, sederhanakan konten dan tambahkan ruang bernapas sebelum menambahkan dekorasi lebih lanjut.

Komponen dan Permukaan​

Permukaan Scoutello harus terasa taktil namun ringan:

  • Tombol: pil membulat untuk CTA pemasaran yang menonjol; tombol produk standar di tempat lain.
  • Kartu: putih atau krem, membulat, berbatas, dan sedikit terangkat.
  • Ikon: ikon garis kecil dan sederhana dalam chip berwarna oranye.
  • Statistik dan elemen kepercayaan: kartu yang terkendali dengan batas berwarna oranye atau gradien.
  • Formulir: label yang jelas, teks bantuan langsung, dan ruang yang cukup untuk penggunaan seluler.
  • Tangkapan layar: besar, tajam, dan sedikit terangkat. Gunakan sebagai bukti konkret produk.

Saat membangun UI produk, mulailah dari komponen UI bersama yang ada dan token daripada gaya kustom satu kali. Saat membangun UI pemasaran, gunakan primitif arahan dan kelas arahan jika sesuai.

Gerakan​

Gerakan harus membuat antarmuka terasa halus, tidak sibuk. Halaman arahan menggunakan animasi pengungkapan pendek, efek naik perangkat, efek mekar cahaya, dan angkat hover kecil.

Gerakan yang disukai:

  • Muncul dari 12-24px dengan opasitas lembut.
  • Kartu hover terangkat hanya beberapa piksel.
  • Status hover CTA yang sedikit mengangkat dan memperdalam bayangan.
  • Entri bagian yang berurutan di mana mereka mendukung pemindaian naratif.

Selalu hormati preferensi gerakan yang dikurangi. Hindari animasi yang dapat menyembunyikan konten, memblokir interaksi, atau terasa diperlukan untuk memahami halaman.

Suara dan Desain Konten​

Sistem visual bekerja paling baik dengan salinan yang langsung dan konkret. Lebih sukai bahasa yang menjelaskan apa yang dapat diterbitkan, dikelola, atau diotomatisasi oleh suatu organisasi di Scoutello.

Gunakan:

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

Hindari:

  • Bahasa platform yang samar tanpa contoh.
  • Jargon perusahaan yang terlalu formal.
  • Paragraf panjang di mana bagian yang dapat dipindai akan bekerja lebih baik.

Aturan Praktis​

  • Gunakan #ff8d49 sebagai aksen merek utama dan #145466 sebagai warna dasar sekunder.
  • Lebih sukai kelas bertoken (primary, secondary, foreground, muted, border) daripada warna yang dikodekan secara permanen di permukaan produk.
  • Jaga agar halaman pemasaran tetap hangat, lapang, membulat, dipimpin oleh tangkapan layar, dan sedikit beranimasi.
  • Jaga agar permukaan dasbor dan operasional lebih tenang, lebih padat hanya jika diperlukan, dan lebih berfokus pada tugas.
  • Biarkan pengalaman tamu yang dimiliki pelanggan mendukung branding organisasi di mana produk sudah mengekspos kontrol branding, tetapi jaga agar permukaan milik Scoutello selaras dengan sistem ini.

Konsep terkait: Rute dan permukaan, Halaman arahan dan ubin, Pengalaman tamu berbasis browser.