Kembali ke demoBuku desain temaEN
wayfinderFIELD DESK

Wayfinder / SISTEM DESAIN

Sistem untuk menentukan arah.

Satu lembar rute lipat di atas kertas lapangan: lipatan indeks, peta skema, profil di tepi bawah, dan titik bernomor yang saling merujuk.

Buka website
Skema tata letak website yang diimplementasikan

Buku ini milik Wayfinder. Situs katalog memiliki panduan antarmuka terpisah. Contoh di bawah memakai komponen asli demo ini.

01 / FONDASI

Warna, huruf & bentuk

Kontrol ringkas. Hierarki praktis. Data dengan sumber yang jelas.

Kertas lapangan#f2f4ec
Tinta hutan#203d32
Hijau rute#1e5b49
Overpass / DISPLAY
Rencanakan. Periksa. Mulai.

DM Sans / TEKS & ANTARMUKA

Pilih rute, periksa elevasi, tandai titik, dan unduh rencana teks.

02 / KOMPONEN LANGSUNG

Rute & elevasi.

Pilih rute, periksa elevasi, tandai titik, dan unduh rencana teks.

LEMBAR 01 / 03

Lingkar punggung bukit

1/5234
Jarak / tanjakan6,4 km / +340 m5 titik singgah
12345

0 / 5 titik ditandai · sesi ini

Data ilustratif. Bukan rute nyata atau panduan navigasi.

03 / DETAIL ANTARMUKA

Detail kecil juga punya identitas.

Coba pilihan, fokuskan tombol bantuan, dan gulir daftar komponen. Popup dan tooltip tetap membawa karakter tema ini.

Overpass dipakai pada judul h1/h2 dan wordmark akun; DM Sans untuk teks bacaan, kolom, dan judul kecil.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Huruf halaman akun

    Overpass dipakai pada judul h1/h2 dan wordmark akun; DM Sans untuk teks bacaan, kolom, dan judul kecil.

  2. 02
    Brand Anda pada halaman akun

    Nama dan logo menggantikan wordmark. Warna utama dan kedua menjadi tinta dan aksen yang terbaca pada permukaan akun, input, aksi, fokus, dan dialog atur ulang. Latar, karya, warna lampu, dan papan gelap Wayfinder tetap milik tema. Brand dengan nama saja dan Tampilkan versi asli mempertahankan warna tema.

  3. 03
    Kerangka aplikasi

    Aplikasi adalah satu lembar rute berjudul rute terpilih. Dashboard akun mengindeks ketiga lembar; pencarian, sematan, dan unduhan teks tetap lokal.

  4. 04
    Identitas

    Wayfinder memakai logonya sendiri, terpisah dari katalog.

  5. 05
    Pilihan

    Pilih rute, periksa elevasi, tandai titik, dan unduh rencana teks.

  6. 06
    Menu pilihan

    Popup yang dioperasikan dengan papan ketik, memakai batas, huruf, fokus, dan status pilihan tema ini.

  7. 07
    Tooltip

    Bantuan kontekstual muncul saat hover atau fokus papan ketik dan ditutup dengan Escape.

  8. 08
    Area gulir

    Area terbatas dengan jalur dan pegangan sesuai tema. Gulir roda, sentuh, dan papan ketik tetap tersedia.

  9. 09
    Fokus & gerak

    Fokus terlihat dan transisi singkat yang mengikuti masukan. Preferensi pengurangan gerak menghilangkan perpindahan.

  10. 10
    Form & validasi

    Pengaturan di bawah memakai input berlabel, radio, switch, dan checkbox. Penyimpanan mengubah preferensi dashboard lokal tema ini.

  11. 11
    Dialog & respons

    Dialog atur ulang mempertahankan tema dalam portal, mengembalikan fokus, dan menonaktifkan latar sementara. Tab status menampilkan transisi kosong, gagal, memuat, dan berhasil.

Form, keputusan & respons

Ini adalah komponen pengaturan dan status yang digunakan pada halaman esensial tema ini.

Nama ini menjadi preferensi demo pada browser ini.
Kepadatan baris
Tampilan ruang kerja

Pratinjau ruang kerja

Pratinjau jarak baris yang dipilih.

Jelajahi halaman tema ini