Kembali ke demoBuku desain temaEN
FF

Form & Field / SISTEM DESAIN

SISTEM / YANG BEKERJA.

Kuning limau, huruf padat, struktur terbuka. Sudut tegas dan bayangan bergeser menjadikan interaksi bagian dari bahasa grafis.

Buka website
Skema tata letak website yang diimplementasikan

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

01 / FONDASI

Warna, huruf & bentuk

Batas tegas. Bayangan bergeser. Respons langsung.

Kuning limau#e5ef75
Tinta#23251f
Kertas#f4f1e9
Space Grotesk / DISPLAY
FORM. FIELD.

Inter Tight / TEKS & ANTARMUKA

Ganti proyek dan warna kanvas

02 / KOMPONEN LANGSUNG

Studi & pilihan.

Ganti proyek dan warna kanvas

Ubah suasana
Pilih studi
Signal / Identitas

Studi grafis / 01

Identitas visual yang dibangun dari satu bentuk lingkaran. Mudah diingat, leluasa untuk dieksplorasi.

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.

Space Grotesk dipakai pada judul h1/h2 dan wordmark akun; Inter Tight untuk teks bacaan, kolom, dan judul kecil.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Huruf halaman akun

    Space Grotesk dipakai pada judul h1/h2 dan wordmark akun; Inter Tight 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

    Dashboard adalah satu lembar proof: indeks studi, proof terpilih dengan keterangannya, dan tepi bernomor lembar. Masuk dan pemulihan berupa slip akses tipografis dengan formulir sebagai inti.

  4. 04
    Identitas

    Form & Field memakai logonya sendiri, terpisah dari katalog.

  5. 05
    Pilihan

    Ganti proyek dan warna kanvas

  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