Duolingo
Maskot kelas yang suka bermain di atas kertas putih
Antara muka Duolingo direka bentuk seperti buku bergambar kanak-kanak: kanvas kertas putih, fon bulat yang montok, dan satu warna hijau pekat yang serta-merta membangkitkan "jawapan yang betul." Teks utama ialah ton kelabu pertengahan yang menenangkan, membolehkan warna hijau dan aksen birunya melakukan semua kerja emosi—hijau untuk kemajuan dan tajuk, biru untuk pautan yang boleh diklik dan tindakan tambahan. Komponen berbentuk seperti pil atau sudut bulat yang tebal dengan sempadan hitam atau berwarna tebal, menjadikan setiap butang lebih terasa seperti pelekat yang dilekatkan pada halaman daripada kawalan UI yang rata.
Bahagian-bahagian memenuhi lebar penuh halaman dan disusun secara menegak dalam satu lajur, setiap satu setinggi kira-kira 800 piksel. Lebar kandungan maksimum adalah kira-kira 1 piksel di tengah. Teks di sebelah kiri dan ilustrasi di sebelah kanan berselang-seli, menyediakan ruang menegak yang luas (80 piksel antara bahagian). Tiada kad grid atau susun atur berbilang lajur—setiap bahagian ialah blok teks tunggal yang dipasangkan dengan satu ilustrasi. Navigasi ialah bar atas minimalis dengan logo dan pemilih bahasa, yang muncul sebagai bar tetap antara bahagian. Pengaki ialah jalur hijau yang merangkumi seluruh lebar halaman. Ritmanya ialah editorial: tajuk, perenggan, seruan bertindak, ilustrasi, pengulangan.
Bahasa ilustrasi buku ini menampilkan watak maskot dua dimensi yang rata (Duet burung hantu dan pelbagai figura manusia) dengan bentuk geometri bulat, garisan hitam tebal, dan palet warna pelengkap merah jambu, ungu, kuning, oren, dan biru yang tidak pernah muncul dalam antara muka itu sendiri. Ilustrasi diletakkan di sebelah teks di sebelah kanan setiap bahagian, dengan latar belakang putih tulen, tanpa bekas atau latar belakang. Tiada gambar—watak-watak berfungsi sebagai kandungan visual. Ikonografi menggunakan garisan tebal, selaras dengan gaya maskot. Ketumpatan imej adalah sederhana: setiap bahagian menampilkan satu ilustrasi besar watak, dengan bahagian lain halaman dikhaskan untuk tipografi dan ruang putih.
Palet
Jenama
- Eager Green
#58cc02— Hijau digunakan untuk menyerlahkan pautan, tag dan frasa pendek. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Storybook Green
#d7ffb8— Sorotan lembut pada permukaan yang cerah, ton latar belakang halus di sebalik label navigasi di pengaki.
Neutral
- Spark Blue
#1cb0f6— Biru digunakan untuk menyerlahkan pautan, tag dan frasa pendek. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Fresh Leaf
#a5ed6e— Hijau digunakan untuk menyerlahkan pautan, tag dan frasa pendek. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Night Ink
#000437— Pautan, teg dan frasa pendek yang diserlahkan diserlahkan dengan warna ungu. - Paper White
#ffffff— Kanvas halaman, permukaan kadbod, teks butang pada latar belakang hijau/gelap. - Charcoal
#4b4b4b— Pengepala dan Teks Isi Wira - Teks gelap universal yang membolehkan tajuk utama berwarna menonjol. - Pencil Gray
#777777— Perenggan utama teks diserlahkan dengan huruf yang tidak mencolok, dan teks deskriptif sekunder berundur ke latar belakang, supaya elemen berwarna menonjol.
Tipografi
dari 13 hingga 64px · 7 langkah
- feather — penggantian: Inter · garis besar 700 · Tajuk bahagian, seperti "Percuma. Seronok. Berkesan" dan "Ujian Bahasa Inggeris Duolingo," dipaparkan menggunakan fon bulat tersuai, memberikan jenama gaya yang ceria, mesra dan seperti maskot. Gantikan dengan "Feather Bold" atau "Nunito Black" dalam berat yang sesuai. Jarak huruf: -0.0200em
- duolingo-sans — penggantian: Inter · garis besar 500 · Perenggan utama dan pautan navigasi pada 17px/500—fon sans-serif geometri yang kekal boleh dibaca, membolehkan pemberat baris 700 menyerlahkan perkara penting. Gantikan dengan 'DIN Next', 'Inter' atau 'Nunito Sans'.
- duolingo-sans — penggantian: Inter · garis besar 700 · Semua nilai weight-700 digunakan: huruf besar dalam label navigasi ialah 15px (ls 0.0530em), subtajuk ialah 19px dan 32px, dan penekanan pautan ialah 13px. Fon yang sama seperti teks utama—perbezaan visual adalah pada berat, bukan perubahan fon. Jarak huruf: 0.0530em untuk huruf besar dalam label navigasi.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | padat |
| Langkah asas | 12px |
| Jejari butang | 12px |
| Jejari kad | 12px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 80-120px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Duolingo dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- Family — Sebaran daripada kisah dongeng di atas kulit kertas krim
- Say Briefly — Buku lakaran agensi kreatif pada kertas krim
- Flying Papers — Pengakuan pada Kartun Pagi Sabtu
- Portrait — Dinding kenangan, diabadikan dalam Polaroid di atas kertas berwarna krim. Sebuah buku skrap berwarna krim yang terang dengan dakwat biru gelap berfungsi sebagai satu-satunya teks, satu-satunya garisan struktur, dan satu-satunya warna bingkai—dengan pelangi lukisan tangan tunggal yang muncul sekali, pada butang "Daftar" dan pada perkataan "selamanya" yang dicondongkan, dan tidak akan lagi.
- Karl — Diorama gaya buku timbul 3D pada hari yang cerah
- Navigate — Satu set pelekat besar yang dilekatkan pada papan: fon besar yang mengerikan, semuanya dalam bentuk tablet dan lima ikon berwarna-warni, berulang seperti logo
- Monte — Pagi di pantai dengan warna berkarat
- MotherDuck — Terminal dikodkan dengan pensel warna pada kertas krim
- Wise Design — Sebuah gerai pasar neon di jalan global—papan tanda hijau terang yang menjerit melalui pasar yang sesak, sementara di belakangnya, antara muka pengguna produk yang digilap muncul secara tersembunyi.
- Hatch — Rekaan lukisan tangan bergaya samizdat yang dicampur dengan mangkuk gula-gula pastel. Kanvas kertas berkrim yang dihiasi dengan aksen pudina, titik konfeti dan seruan bertindak berbentuk pil, di mana fon serif yang besar dan berani mengisyaratkan keseronokan, dan maskot biru mengenyitkan mata di sudut.
- Superr — Sebuah buku nota sekolah yang hangat di bawah cahaya petang yang lembut. Sebuah halaman berwarna krim, penanda oren tanpa penutup, dan setumpuk pelekat nama berlamina yang menunggu untuk ditanggalkan.
- Mews — Sebuah pusat kawalan hospitaliti pada waktu subuh, bermandikan warna merah jambu. Ruang kerja berdinding putih yang diterangi cahaya matahari dengan tulisan hitam tebal, kad krim suam dan satu butang tindakan merah jambu panas mendefinisikan setiap skrin—keyakinan yang ceria dan bukannya kekangan korporat.