Visual Identity Guideline

Modern digital cash and payments brand that turns complex blockchain infrastructure into something warm, simple, and easy to trust. .

Pendahuluan

Moony adalah platform personal yang dirancang untuk menampilkan apa yang penting bagimu, pada saat yang tepat. Panduan ini menjelaskan bagaimana Moony terlihat, terdengar, dan berperilaku.

Tentang Kami

Versi singkat, dengan gaya bahasa kami sendiri.

Moony didirikan pada 2025 dari satu keresahan sederhana: segalanya datang sekaligus, dan hampir tidak ada yang benar-benar relevan untukmu. Kami membangun kebalikannya: ruang yang tenang, yang memahami apa yang kamu pedulikan dan menampilkannya saat berguna, bukan saat paling ramai.

Nilai-Nilai yang Kami Pegang

Tiga gagasan yang mendasari semua yang kami buat dan setiap keputusan dalam panduan ini.

Presisi

Kami menampilkan lebih sedikit hal, dan memastikan tiap hal dipilih dengan baik. Apa pun yang tidak dapat dijustifikasi, disingkirkan.

Empati

Kami merancang untuk orang pada hari mereka paling tidak fokus, bukan hari mereka paling perhatian.

Tenang

Tidak ada yang diperlakukan sebagai mendesak kecuali memang demikian. Antarmuka tidak meninggikan suara demi diperhatikan.

Tentang panduan ini

Apa yang dicakup, dan kapan merujuknya.

Gunakan panduan ini untuk semua hal yang dibuat atas nama Moony: produk, situs web, unggahan, dan dek presentasi. Jika ada situasi yang belum tercakup di sini, tanyakan dulu daripada menetapkan aturan baru.

Kontak

Siapa yang bisa dihubungi jika panduan ini tidak memberi jawaban.

Ada pertanyaan soal brand, atau butuh file yang tidak tersedia di sini? Silakan hubungi tim brand.

makrufalhafiz@gmail.com

Logo

Overview

Moony adalah brand uang digital dan pembayaran modern yang mengubah infrastruktur blockchain yang rumit menjadi sesuatu yang hangat, sederhana, dan mudah dipercaya. Dibangun dan didukung oleh yayasan nirlaba independen, fokusnya pada akses, inklusi, dan kegunaan sehari-hari, bukan spekulasi.

Berakar pada simbol ⍜ dan narasi matahari terbenam menuju bulan terbit, identitas visualnya mengandalkan struktur yang bersih, ruang yang lega, dan warna ungu khas yang halus. Pergeseran tonal yang lembut dan detail yang halus menciptakan sistem yang tenang dan kontemporer, terasa kredibel untuk fintech namun tetap ramah dan sedikit playful.

Logo utama

Skala logo

Gunakan artwork yang telah disetujui di setiap ukuran. Contoh di bawah menunjukkan logo utama, logomark, dan logotype yang menyesuaikan dari format besar hingga penggunaan digital yang kompak.

W:512px

W:320px

W:160px

W:96px

Lebar minimum 96 px

Ukuran minimum

Media digital (web, app, media sosial, UI)

Menetapkan ukuran terkecil yang diperbolehkan untuk logo, agar tetap terbaca di semua aplikasi.

Konteks	Lebar Minimum
UI situs (navbar, footer)	90 px
Favicon / ikon saja	32 px
Ikon aplikasi (simbol)	48–96 px
Gambar profil media sosial	180 × 180 px

Kemitraan

Bagi Moony, kolaborasi dimulai dari kejelasan. Saat logo kami tampil berdampingan dengan logo mitra, keterbacaan dan ruang sekitarnya selalu dijaga. Ruang kosong ini menentukan area yang dibutuhkan logo agar tetap dikenali dan konsisten, apa pun tata letaknya. Baik vertikal maupun horizontal, standar jarak ini menjaga keselarasan visual di setiap titik kemitraan.

Moony

38px38px

Parther

Moony

38px38px

Parther

Moony without safezone

Parther

Moony without safezone

Parther

Logo di Atas Warna

Saat memadukan logo dengan warna brand, pastikan selalu ada kontras yang cukup. Berikut kombinasi terang dan gelap yang disetujui.

Larangan logo

Jangan ubah logo. Hindari perlakuan berikut.

Jangan regangkan atau distorsi logo.

Jangan beri outline pada logo.

Jangan gunakan warna yang tidak disetujui.

Jangan terapkan bayangan atau efek.

Jangan memutar logo.

Jangan menerapkan pola atau tekstur.

Warna

Gambaran Umum

Sistem warna Moony memadukan ungu lembut sebagai inti dengan corak peach yang halus, bersama putih dan abu netral. Palet ini dirancang untuk terasa lembut, tenang, dan ramah, namun tetap jelas dan terbaca di seluruh penggunaan produk dan komunikasi.

Selalu jaga kontras yang cukup dengan menyesuaikan warna logo terhadap nilai latar: gunakan logo lebih gelap pada permukaan terang, dan logo lebih terang pada permukaan gelap. Untuk penerapan solid maupun gradasi, utamakan nilai warna yang telah ditentukan agar tampilan Moony tetap konsisten, mudah dikenali, dan seimbang secara visual di semua media.

Cute LavenderE7D9FD

Romantic LavenderC29FFCPrimary color

Violet Punk9F67FC

Illusion793BDC

Daisy Bush502792

Bleach WhiteFFF2D9

PeachFFE5B4Secondary

EggnogFAD693

Sun-Kissed GoldEBB859

ButterscotchD48A2F

Gentle PeachFCEFEB

Heavenly PeachFFD8CEAccent

Sporty PeachF9B09D

Deep ToneE97A63

Sunset TerracottaA03E2B

Full WhiteFFFFFF

Mist ToneF0F0F0Neutral

BaseD8D8D8

Deep Tone6C6C6C

Rich Tone1F1F1F

Gradient 1

GRADIENT: #C29FFC → #FFF2D9

Gradient 2

GRADIENT: #B083FC → #FFDFD1 → #FCF5E9

Gradient 1

GRADIENT: #C29FFC → #FFF2D9

Gradient 2

GRADIENT: #B083FC → #FFDFD1 → #FCF5E9

Kombinasi Warna

Sistem pemasangan warna ini menentukan bagaimana palet Moony didistribusikan dalam sebuah layout. Kombinasi utama mengutamakan lilac dan ungu lembut, dengan peach dan warna netral dipakai secukupnya sebagai aksen. Kombinasi primer dioptimalkan untuk produk dan antarmuka, dengan fokus pada keterbacaan tinggi dan kenyamanan pengguna. Kombinasi sekunder menghadirkan netral yang lebih gelap dan ungu yang lebih pekat untuk materi marketing, hero section, dan momen yang lebih ekspresif. Jadikan persentase yang disarankan sebagai acuan agar tiap komposisi tetap seimbang dan sesuai brand.

Kombinasi warna khas brand

Keseimbangan warna brand, diterapkan pada tiap komposisi.

60%

30%

Kombinasi warna khas brand

Keseimbangan warna brand, diterapkan pada tiap komposisi.

60%

30%

Kombinasi warna khas brand

Keseimbangan warna brand, diterapkan pada tiap komposisi.

60%

30%

Kombinasi warna khas brand

Keseimbangan warna brand, diterapkan pada setiap komposisi.

60%

30%

Kombinasi warna khas brand

Keseimbangan warna yang dianjurkan untuk semua komposisi.

60%

30%

Kombinasi warna khas brand

Keseimbangan warna yang dianjurkan untuk semua komposisi.

60%

30%

Tipografi

Typeface, ukuran yang dipakai, dan cara hierarki dibangun.

Ikhtisar

Sistem tipografi Moony memakai General Sans untuk mencerminkan karakter brand yang tenang dan modern. Headline memakai General Sans Medium dengan spacing rapat untuk menghadirkan rasa percaya diri dan kejelasan di momen-momen penting. Sub-headline dan body text memakai keluarga typeface yang sama demi konsistensi, dengan line height lebih besar agar nyaman dibaca di seluruh layout produk, web, dan komunikasi.

Memakai satu keluarga typeface yang serbaguna menjaga pengalaman tetap simpel dan kohesif, membiarkan warna, ikonografi, dan layout membawa kehangatan brand, sementara tipografi tetap bersih, netral, dan mudah dibaca.

Primer

UsageHeadingBody TextDescription

General Sans

Glyph

Font style 12

Aa123

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()?+

Scale Category	Typeface	Weight	Size	Case
Caption	General Sans	Medium	12	Sentence
Header 1	General Sans	Semibold	96	Sentence
Header 2	General Sans	Medium	60	Sentence
Header 3	General Sans	Regular	48	Sentence
Body copy	General Sans	Regular	16	Sentence
Small text	General Sans	Regular	12	Sentence
CTA	General Sans	Regular	16	Sentence

Penggunaan Tipografi

Body style · Brand font · 16px / 500

Line length

Keep paragraphs comfortable to scan. Adjust the width for the typeface, text size, and screen; this is a preferred measure, not a fixed character count.

Preferred width · 65ch · narrows to fit the screen

Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.
Preferred measure: 65ch · fits available width

Line height

Give each line enough space to follow the next. Set heading and body spacing independently, and check longer passages at smaller screen sizes.

1.6× line height · 25.6px

Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.

Alignment

Use start alignment for paragraphs. Center alignment can emphasize a short statement; choose exceptions deliberately and check how the text wraps.

Preferred alignment · Left (start)

Good typography makes every message easier to understand. Give words room to breathe, keep each line comfortable to follow, and let the reader move naturally from one thought to the next. A clear rhythm helps people focus on what matters.

Tone dan suara

Ikhtisar

Moony berbicara dengan ketenangan yang jelas, keterbukaan, dan kepercayaan diri yang hangat. Ide yang rumit dibuat mudah dipahami, setiap klaim didukung fakta yang transparan, dan orang diperlakukan sebagai peserta yang cakap dalam jaringan terbuka.

Bahasa kami ringkas, manusiawi, dan mudah dipahami secara global. Kami menyampaikan nilai praktis Moony tanpa hype, spekulasi, atau jargon teknis yang tidak perlu.

01 · Tenang dan jelas

Sajikan infrastruktur keuangan yang rumit dengan istilah yang sederhana dan mudah dipahami. Gunakan bahasa yang lugas dan kalimat pendek, jelaskan ide teknis tanpa terdengar teknis.

Contoh

Kirim uang ke mana saja dalam hitungan detik. Tanpa perlu rekening bank.

02 · Radikal terbuka

Bangun kepercayaan lewat fakta, transparansi, dan keterverifikasian. Jelaskan secara spesifik bagaimana sistem bekerja, siapa yang terlibat, dan apa yang bisa diverifikasi sendiri oleh orang-orang.

Contoh

Jumlah pasokan tetap di angka 21 juta. Kode publiknya tidak bisa diubah.

03 · Memberdayakan dengan hangat

Sapa orang sebagai partisipan yang cakap, bukan pelanggan pasif. Jaga nada yang ramah, inklusif, dan optimis, namun tetap membumi.

Contoh

Uangmu bergerak bersamamu—lintas ruangan atau lintas negara.

Menerapkan voice

Website dan kampanye: Optimis, sederhana, dan mengedepankan manfaat praktis.

UI produk: Singkat, langsung, dan menenangkan.

Edukasi dan dukungan: Sabar, komunikatif, dan tidak menggurui.

Sosial dan komunitas: Hangat, mengajak partisipasi, dan sedikit playful.

Dokumentasi protokol: Presisi, netral, dan dapat diverifikasi.

Keamanan, kebijakan, dan hukum: Faktual, tenang, dan tidak ambigu.

Selalu

Jelas, spesifik, manusiawi, dan berguna.

Jangan Pernah

Hindari hype, spekulasi, bahasa orang dalam, atau janji yang berlebihan.

Fotografi

Apa yang digambarkan fotografi kami, cara pengambilannya, dan cara membedakan gambar yang baik dari yang sekadar mendekati.

Ikhtisar

Citra untuk Moony harus terasa hangat, terbuka, dan tenang secara optimistis. Gunakan cahaya lembut, ruang kosong yang lapang, detail bertekstur, dan komposisi tenang yang bergerak dari kehangatan senja menuju ungu cahaya bulan. Hindari foto stok fintech generik, kebisingan visual, kontras keras, dan citra yang mengandalkan hype atau spekulasi.

Prinsip

Tiga kualitas yang perlu diperiksa pada setiap gambar baru sebelum digunakan.

Cahaya alami

Cahaya alami, dari jendela atau luar ruangan. Bayangan lembut, tanpa flash.

Momen nyata

Orang-orang melakukan apa yang sungguh mereka lakukan, di tempat mereka sungguh bekerja.

Ruang untuk bernapas

Satu subjek yang jelas, dengan ruang di sekitarnya untuk tempat teks.

Gaya

Satu set kecil yang membangun nada. Foto baru sebaiknya duduk nyaman berdampingan dengan contoh-contoh ini.

Treatment

Cara sebuah gambar dipotret dan diselesaikan, agar foto dari sesi pemotretan yang berbeda terasa sebagai satu rangkaian yang konsisten.

Fotografi

Terapkan ini pada setiap gambar sebelum dipublikasikan.

Aspek	Panduan
Cahaya	Natural and soft, from one direction
Warna	True to life, slightly warm, never filtered
Komposisi	Subject off center, clear space on one side
Crop	2:1 for headers, 4:5 for cards

Do's and Don'ts

Keputusan yang paling sering muncul saat memilih atau menyunting foto.

Orang

Tampilkan orang yang fokus pada aktivitas yang sedang dilakukannya.

Don't

Hindari model yang tersenyum langsung ke kamera.

Editing

Betulkan eksposur dan white balance, lalu berhenti.

Don't

Menambahkan filter, vignette, atau kontras berat.

Teks pada gambar

Tempatkan teks di bagian frame yang tenang.

Don't

Menaruh teks di atas wajah atau detail yang ramai.

Sumber

Tugaskan atau ambil gambar secara in-house.

Don't

Gunakan foto stok yang juga dipakai brand lain.

Elemen Grafis

Ringkasan

Pola brand Moony mengembangkan simbol ⍜ dan wordmark menjadi tatanan berulang yang terasa ritmis, tenang, dan mudah dikenali. Pola ini dapat digunakan sebagai ikon tersendiri atau dipadukan dengan logotype, selalu mengikuti aturan spasi dan perataan inti sistem. Paling baik diterapkan pada skala di mana setiap mark tetap jelas namun terbaca sebagai satu kesatuan—cocok untuk template media sosial, latar belakang, dan tekstur halus. Hindari membebani elemen lain; pola ini dibuat untuk mendukung, bukan bersaing dengan, pesan utama.

Dot circle

Pola titik melingkar yang dapat mendukung konteks desain.

Frosted glass

Terapkan efek ini pada objek brand tertentu.

Gradient shape

Terapkan efek gradien kaca menggunakan warna utama Moony.

Pattern 1

Pola 2

Penggunaan pola brand harus menggunakan dua warna dengan kontras kuat. Daisy Bush menjadi warna pola utama, sementara Rich Tone dan Full White dapat digunakan sebagai warna objek pendukung.

Motion

One curve and three timings. Small elements move quickly, most motion uses the base timing, and larger moments move slowly.

Prinsip

Tiga kebiasaan mendasari setiap gerakan. Animasi baru yang mengikuti kebiasaan ini akan terasa konsisten dengan brand.

Jelas

Setiap gerakan punya alasan: menunjukkan dari mana sesuatu berasal atau ke mana ia menuju.

Terarah

Gerakan mengarahkan perhatian ke hal yang penting, lalu mereda.

Konsisten

Momen sejenis selalu bergerak dengan cara yang sama.

Kurva

Easing khas dan tiga timing, dengan nilai yang bisa langsung ditempel ke tool kamu.

Signature — Arrive

cubic-bezier(0.2, 0, 0, 1)

Fast 170ms · small thingsBase 360ms · most movesSlow 660ms · big moments

Fades take about 50% of the move they go with.

Kode untuk

Nilai yang sama, dalam format yang dikenali tool kamu.

Copy for

:root {
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 250ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

.element {
  transition: transform var(--duration-base) var(--ease-exit);
}

Penerapan

Kurva yang diterapkan pada komponen di tiap layar.

In use

Toggle

Switching on and off. Fast · 170ms

Carousel

Moving through a set. Base · 680ms

Modal

Asking for a decision. Slow · 440ms

Options

Edit

Duplicate

Delete

Opening from what you clicked. Base · 680ms

Continue

Button

Pressing a button. Fast · 170ms

Card

Lifting under the pointer. Fast · 170ms

Overview

Specs

Files

Tabs

Moving between views. Fast · 170ms

Logo

Arriving on screen. Slow · 440ms

Copy link⋮

Tooltip

Explaining on hover. Fast · 170ms

Saat reduced motion diaktifkan, setiap gerakan menjadi fade singkat. Tidak ada yang berpindah, berputar, atau berubah skala.

Lakukan dan hindari

Kasus yang muncul di hampir setiap layar.

Kemunculan

Lakukan

Fade in, lalu menetap mengikuti kurva kita.

Jangan

Memantul, melenting, atau overshoot.

Menunggu

Lakukan

Bergerak begitu pekerjaan selesai.

Jangan

Menahan siapa pun agar animasi sempat selesai.

Kenyamanan

Lakukan

Saat reduced motion aktif, ganti setiap gerakan dengan fade singkat.

Jangan

Mengguncang, mengedip, atau memutar bagian besar layar.

Aplikasi

Ikhtisar

Sistem gradien Moony menerjemahkan kisah sunset-to-moonrise menjadi latar ambient yang lembut, mendukung logo tanpa menenggelamkannya. Tiap gradien memadukan nuansa peach dan ungu dengan transisi yang halus, menciptakan bidang atmosferik yang tenang dan menjaga fokus tetap pada mark. Gunakan ikon Moony gelap sebagai pilihan default pada gradien agar keterbacaan tetap jelas di semua ukuran. Gradien harus terasa lembut dan ringan, bukan intens atau berkontras tinggi. Terapkan perlakuan ini secara konsisten pada panel hero, avatar media sosial, dan permukaan brand utama lainnya agar bahasa visual tetap koheren dan mudah dikenali.