Mitra Material / Pedoman visual

Fondasi yang sama.
Ruang untuk bertumbuh.

Identitas dan bahasa desain yang menghubungkan setiap pengalaman Mitra Material. Dibangun untuk jelas, mudah digunakan, dan dekat dengan dunia material bangunan.

Jelajahi panduan

Dirancang untuk pekerjaan nyata.

Prinsip yang menjadi rujukan saat menyusun pengalaman Mitra Material.

01 / Jelas

Informasi lebih dulu

Hierarki yang mudah dipindai, bahasa yang lugas, dan tindakan yang mudah ditemukan.

02 / Konsisten

Terasa saling terhubung

Warna, tipografi, dan pola interaksi yang selaras dari katalog hingga pengiriman.

03 / Inklusif

Nyaman untuk digunakan

Dukungan tema terang dan gelap, fokus keyboard, serta preferensi gerakan pengguna.

Satu platform, identitas akses yang berbeda.

Tiga identitas publik membedakan peran dan akses yang sedang dibuka. Masing-masing memiliki logo tersendiri dengan bahasa visual yang tetap terhubung dengan Mitra Material.

Platform utama

Mitra Material

Identitas utama Mitra Material untuk platform publik dan akses mitra toko.

mitramaterial.com

Warehouse / Gudang

Gudang Material

Identitas akses gudang untuk pengelolaan stok dan operasional pasokan material.

warehouse.mitramaterial.com

Driver / Supir

Supir Material

Identitas akses supir untuk tugas, navigasi, dan pengelolaan pengiriman material.

mitramaterial.com/driver

Gunakan logo sesuai peran yang sedang diakses, disertai nama atau konteks akses yang jelas. Logo gudang dan supir mempertahankan identitas masing-masing pada halaman masuk dan area operasionalnya.

MitraMaterialWordmark platform utama · mengikuti tema halaman

Rekomendasi penggunaan

Sediakan ruang kosong di sekeliling logo. Pertahankan proporsi asli dan gunakan latar yang membuat bentuk logo terbaca. Periksa kembali keterbacaan pada ukuran kecil.

Hindari

Jangan menukar logo antarperan, meregangkan, memutar, mewarnai ulang, atau menambahkan efek pada logo. Jangan meletakkan logo di atas gambar yang terlalu ramai.

Industrial, dengan sentuhan hangat.

Cobalt menjadi warna utama. Terracotta memberi aksen hangat. Warna status membantu menjelaskan keadaan, selalu disertai teks atau ikon.

Palet merek

Cobalt--color-primary-500

Deep Cobalt--color-primary-700

Terracotta--color-secondary-500

Soft Clay--color-secondary-100

Permukaan & status

Permukaan--surface

Teks utama--ink

Berhasil--color-success-500

Perhatian--color-warning-500

Kesalahan--color-danger-500

Informasi--color-info

Nilai warna mengikuti tema aktif. Warna utama tidak otomatis cocok untuk semua teks; gunakan warna teks dan permukaan yang memiliki kontras memadai.

Manrope. Jelas di setiap ukuran.

Satu keluarga huruf untuk judul, informasi produk, dan pekerjaan sehari-hari. Manrope digunakan sebagai variable font dengan rentang bobot 200–800.

Manrope / Latin

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 · Rp 125.000 / m²

Judul

Material untuk setiap ruang.

Subjudul

Temukan pilihan yang sesuai.

Isi

Bandingkan informasi produk dan lanjutkan percakapan dengan toko.

Keterangan

Harga dan ketersediaan dikonfirmasi melalui toko.

Ringkas, dengan makna yang jelas.

Ikon garis dari Lucide, dilengkapi ikon khusus visualisasi ruangan. Gunakan gaya dan ketebalan garis yang konsisten.

Produk

Pencarian gambar

Toko

QR produk

Pengiriman

Visualisasi ruangan

Ukuran & garis

Ukuran rujukan 16, 18, 20, dan 24 piksel dengan stroke 2. Sesuaikan dengan konteks dan sediakan area sentuh yang cukup.

Label tetap penting

Sertakan label untuk tindakan yang belum familier. Tombol yang hanya berisi ikon harus memiliki nama aksesibel.

Detail kecil. Ritme yang terjaga.

Fondasi antarmuka berasal dari token bersama sehingga ukuran dan tampilan dapat mengikuti preferensi pengguna.

Ruang

Skala ruang memberi ritme yang konsisten di antara konten dan kontrol.

Sudut & kedalaman

Radius turunan dan bayangan lembut membedakan permukaan tanpa mengganggu isi.

Gerakan

Transisi singkat memberi umpan balik pada perubahan keadaan. Preferensi reduced motion dihormati oleh sistem.

Cepat · 160 ms
Dasar · 250 ms
Nilai dasar dapat mengikuti preferensi tampilan.

Liquid glass. Kedalaman yang terasa ringan.

Lapisan kaca menjadi bagian dari karakter antarmuka Mitra Material: transparansi, blur latar, garis tepi halus, dan bayangan membantu elemen melayang terasa terpisah dari konten di belakangnya.

Lapisan melayang

Liquid glass

Warna dan bentuk di belakang tetap terasa, dengan detail yang dilembutkan oleh blur.

Informasi tetap menjadi fokus.

Permukaan konten

Solid surface

Latar opak memberi pijakan yang tenang untuk membaca dan mengolah informasi.

Ruang untuk pekerjaan utama.

Digunakan pada lapisan kontekstual

Popover, menu, panel dialog, dan dropdown notifikasi memakai nuansa kaca untuk memperjelas hubungan dengan halaman di belakangnya. Tampilan mengikuti tema terang dan gelap.

Dipakai secara selektif

Konten padat seperti tabel, formulir panjang, dan detail produk membutuhkan permukaan yang stabil. Hindari menumpuk lapisan kaca atau menempatkan teks langsung di atas latar yang ramai.

Transparansi & blur

Lapisan transparan dan blur latar bekerja bersama; saturasi serta kecerahan disesuaikan dengan tema.

Tepi & bayangan

Garis tepi halus menegaskan bentuk. Bayangan memberi jarak visual antara panel melayang dan permukaan halaman.

Kenyamanan didahulukan

Pada preferensi transparansi rendah atau mode performa ringan, sistem memakai permukaan solid dan menonaktifkan blur. Contoh ini mengikuti pengaturan tersebut.

Contoh kaca memakai fondasi liquid glass yang sama dengan platform. Coba pergantian tema untuk melihat penyesuaian permukaannya.

Spesifikasi teknis CSS.

Buka referensi teknis untuk melihat nilai token yang sedang aktif dan contoh CSS yang bisa disalin.

Lihat token & contoh CSS

Nilai dibaca langsung dari CSS platform pada tema dan preferensi tampilan yang aktif. Nilai rem juga ditampilkan dalam piksel sesuai ukuran font dasar saat ini. Ekspresi calc tetap ditampilkan sebagai rumus CSS.

Gunakan var(--space-4) untuk menerapkan desain. Angka di tabel adalah referensi, bukan nilai yang perlu disalin sebagai konstanta. Ganti tema untuk membandingkan nilai; transparansi rendah dan mode ringan juga dapat mengubah token kaca.

Warna & permukaan

Nilai CSS aktif: Warna & permukaan
Token CSS	Nilai aktif
`--color-primary-500`	`Menunggu nilai browser`
`--color-primary-600`	`Menunggu nilai browser`
`--color-secondary-500`	`Menunggu nilai browser`
`--bg`	`Menunggu nilai browser`
`--surface`	`Menunggu nilai browser`
`--surface-muted`	`Menunggu nilai browser`
`--ink`	`Menunggu nilai browser`
`--border-color`	`Menunggu nilai browser`

Tipografi

Nilai CSS aktif: Tipografi
Token CSS	Nilai aktif
`--font-sans`	`Menunggu nilai browser`
`--type-caption`	`Menunggu nilai browser`
`--type-label`	`Menunggu nilai browser`
`--type-body`	`Menunggu nilai browser`
`--type-body-lg`	`Menunggu nilai browser`
`--type-title-sm`	`Menunggu nilai browser`
`--type-title-md`	`Menunggu nilai browser`
`--type-title-lg`	`Menunggu nilai browser`
`--font-weight-base`	`Menunggu nilai browser`
`--font-weight-heading`	`Menunggu nilai browser`
`--tracking-base`	`Menunggu nilai browser`
`--tracking-heading`	`Menunggu nilai browser`

Ruang, ukuran & radius

Nilai CSS aktif: Ruang, ukuran & radius
Token CSS	Nilai aktif
`--space-1`	`Menunggu nilai browser`
`--space-2`	`Menunggu nilai browser`
`--space-3`	`Menunggu nilai browser`
`--space-4`	`Menunggu nilai browser`
`--space-6`	`Menunggu nilai browser`
`--space-8`	`Menunggu nilai browser`
`--control-hit-size`	`Menunggu nilai browser`
`--control-height-md`	`Menunggu nilai browser`
`--icon-sm`	`Menunggu nilai browser`
`--icon-md`	`Menunggu nilai browser`
`--icon-lg`	`Menunggu nilai browser`
`--radius`	`Menunggu nilai browser`
`--radius-lg`	`Menunggu nilai browser`
`--radius-xl`	`Menunggu nilai browser`
`--radius-2xl`	`Menunggu nilai browser`

Liquid glass & kedalaman

Nilai CSS aktif: Liquid glass & kedalaman
Token CSS	Nilai aktif
`--glass-bg`	`Menunggu nilai browser`
`--glass-blur`	`Menunggu nilai browser`
`--glass-saturate`	`Menunggu nilai browser`
`--glass-brightness`	`Menunggu nilai browser`
`--glass-stroke`	`Menunggu nilai browser`
`--glass-shadow-lg`	`Menunggu nilai browser`
`--border-width`	`Menunggu nilai browser`
`--overlay-scrim`	`Menunggu nilai browser`
`--shadow`	`Menunggu nilai browser`

Gerakan & lapisan

Nilai CSS aktif: Gerakan & lapisan
Token CSS	Nilai aktif
`--duration-fast`	`Menunggu nilai browser`
`--duration-base`	`Menunggu nilai browser`
`--duration-slow`	`Menunggu nilai browser`
`--ease-standard`	`Menunggu nilai browser`
`--z-drawer`	`Menunggu nilai browser`
`--z-dialog`	`Menunggu nilai browser`
`--z-confirm`	`Menunggu nilai browser`
`--z-popover`	`Menunggu nilai browser`
`--z-tooltip`	`Menunggu nilai browser`
`--z-toast`	`Menunggu nilai browser`

Penerapan di frontend

Untuk lapisan kaca, class bersama glass sudah menyediakan latar, tepi, radius, dan blur. Tambahkan bayangan sesuai konteks. Contoh berikut menunjukkan properti CSS yang dipakai. Token dan aturan preferensi berasal dari stylesheet global platform.

Contoh liquid glass

.floating-panel {
  background: var(--glass-bg);
  border: var(--border-width) solid var(--glass-stroke);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur))
    saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  color: var(--ink);
}

Contoh permukaan solid

.content-panel {
  background: var(--surface);
  color: var(--ink);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-6);
  gap: var(--space-4);
  display: grid;
  font-size: var(--type-body);
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

Ukuran ikon mengikuti konteks (16, 18, 20, atau 24 px), dengan strokeWidth 2. Logo mempertahankan rasio 1:1; ukuran asli logo utama dan gudang 512 × 512 px, sedangkan logo supir 500 × 500 px. Z-index mengikuti urutan drawer → dialog → confirm → popover → tooltip → toast.

Aset untuk setiap identitas.

Pilih logo sesuai konteks publikasi dan peran yang dituju. Penggunaan identitas tidak boleh menyiratkan kemitraan atau dukungan tanpa persetujuan.

Logo Mitra Material

Platform utama · PNG · 512 × 512 piksel

Unduh logo PNG

Logo Gudang Material

Warehouse / Gudang · PNG · 512 × 512 piksel

Unduh logo warehouse PNG

Logo Supir Material

Driver / Supir · PNG · 500 × 500 piksel

Unduh logo driver PNG

Sumber vektor belum tersedia dalam paket publik ini. Gunakan aset asli dan pertahankan rasio 1:1.

Font Manrope Pustaka Lucide

Panduan ini mengikuti fondasi visual frontend Mitra Material. Pedoman dapat berkembang bersama produk.

Fondasi yang sama.Ruang untuk bertumbuh.