Duolingo
Maskot kelas yang lucu di atas kertas putih.
Antarmuka Duolingo dirancang seperti buku bergambar anak-anak: kanvas kertas putih, font tebal dan membulat, serta satu warna hijau pekat yang langsung membangkitkan kesan "jawaban yang benar." Teks utama menggunakan warna abu-abu sedang yang menenangkan, sehingga warna hijau dan aksen birunya mampu menyampaikan emosi—hijau untuk kemajuan dan judul, biru untuk tautan yang dapat diklik dan tindakan tambahan. Komponen-komponennya berbentuk seperti pil atau sudut membulat yang tebal dengan batas hitam atau berwarna, membuat setiap tombol terasa lebih seperti stiker yang ditempelkan di halaman daripada kontrol UI datar.
Bagian-bagian menempati seluruh lebar halaman dan disusun secara vertikal dalam satu kolom, masing-masing tingginya sekitar 800 piksel. Lebar konten maksimum sekitar 1 piksel di tengah. Teks di sebelah kiri dan ilustrasi di sebelah kanan bergantian, memberikan ruang vertikal yang cukup (80 piksel di antara bagian-bagian). Tidak ada kartu grid atau tata letak multi-kolom—setiap bagian adalah blok teks tunggal yang dipasangkan dengan satu ilustrasi. Navigasi berupa bilah atas minimalis dengan logo dan pemilih bahasa, yang muncul sebagai bilah tetap di antara bagian-bagian. Footer berupa garis hijau yang membentang di seluruh lebar halaman. Ritmenya editorial: judul, paragraf, ajakan bertindak, ilustrasi, pengulangan.
Gaya ilustrasi buku ini menampilkan karakter maskot datar dua dimensi (Duet si burung hantu dan berbagai figur manusia) dengan bentuk geometris membulat, garis luar hitam tebal, dan palet warna komplementer merah muda, ungu, kuning, oranye, dan biru yang tidak pernah muncul di antarmuka itu sendiri. Ilustrasi ditempatkan di sebelah teks di sisi kanan setiap bagian, dengan latar belakang putih bersih, tanpa wadah atau latar belakang. Tidak ada foto—karakter-karakter tersebut berfungsi sebagai konten visual. Ikonografi menggunakan garis luar tebal, konsisten dengan gaya maskot. Kepadatan gambar sedang: setiap bagian menampilkan satu ilustrasi besar karakter, dengan sisa halaman dikhususkan untuk tipografi dan ruang kosong.
Palet
Merek
- Eager Green
#58cc02— Warna hijau digunakan untuk menyoroti tautan, tag, dan frasa pendek. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Storybook Green
#d7ffb8— Sorotan lembut pada permukaan terang, nada latar belakang yang halus di balik label navigasi di bagian bawah halaman.
Netral
- Spark Blue
#1cb0f6— Warna biru digunakan untuk menyoroti tautan, tag, dan frasa pendek. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Fresh Leaf
#a5ed6e— Warna hijau digunakan untuk menyoroti tautan, tag, dan frasa pendek. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Night Ink
#000437— Tautan, tag, dan frasa pendek yang disorot ditandai dengan warna ungu. - Paper White
#ffffff— Kanvas halaman, permukaan karton, teks tombol pada latar belakang hijau/gelap. - Charcoal
#4b4b4b— Header dan Teks Isi Utama - Teks gelap universal yang memungkinkan judul berwarna menonjol. - Pencil Gray
#777777— Paragraf-paragraf utama teks disorot dengan huruf yang tidak mencolok, dan teks deskriptif sekunder menjadi lebih samar di latar belakang, sehingga elemen-elemen berwarna menjadi lebih menonjol.
Tipografi
dari 13 hingga 64px · 7 langkah
- feather — penggantian: Inter · garis besar 700 · Judul bagian, seperti "Gratis. Menyenangkan. Efektif" dan "Tes Bahasa Inggris Duolingo," ditampilkan menggunakan font bulat khusus, memberikan merek tersebut gaya yang ceria, ramah, dan seperti maskot. Ganti dengan "Feather Bold" atau "Nunito Black" dengan ketebalan yang sesuai. Jarak antar huruf: -0,0200em
- duolingo-sans — penggantian: Inter · garis besar 500 · Paragraf utama dan tautan navigasi pada 17px/500—font sans-serif geometris yang tetap mudah dibaca, memungkinkan ketebalan garis 700 untuk menyoroti poin-poin penting. Ganti dengan 'DIN Next', 'Inter', atau 'Nunito Sans'.
- duolingo-sans — penggantian: Inter · garis besar 700 · Semua nilai bobot 700 digunakan: huruf kapital pada label navigasi berukuran 15px (ls 0.0530em), subjudul berukuran 19px dan 32px, dan penekanan tautan berukuran 13px. Font yang digunakan sama dengan teks utama—perbedaan visualnya terletak pada bobot, bukan perubahan font. Jarak antar huruf: 0.0530em untuk huruf kapital pada label navigasi.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | padat |
| Langkah dasar | 12px |
| Radius tombol | 12px |
| Radius kartu | 12px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 80-120px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Duolingo dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- Family — Sebuah ilustrasi dari dongeng di atas kertas perkamen krem.
- Say Briefly — Buku sketsa agensi kreatif di atas kertas krem.
- Flying Papers — Pengakuan dalam Kartun Sabtu Pagi
- Portrait — Dinding kenangan, diabadikan dalam foto Polaroid di atas kertas berwarna krem. Sebuah buku tempel berwarna krem cerah di mana tinta biru tua berfungsi sebagai satu-satunya teks, satu-satunya garis struktur, dan satu-satunya warna bingkai—dengan satu pelangi yang digambar tangan yang muncul sekali, pada tombol "Daftar" dan pada kata "selamanya" yang dicetak miring, dan tidak pernah lagi.
- Karl — Diorama bergaya buku pop-up 3D di hari yang cerah.
- Navigate — Sejumlah besar stiker ditempelkan pada papan: font besar dan aneh, semuanya berbentuk tablet dan lima ikon warna-warni, berulang seperti logo.
- Monte — Pagi hari di pesisir dengan semburat warna karat.
- MotherDuck — Terminal yang diberi kode dengan pensil warna di atas kertas krem.
- Wise Design — Sebuah kios pasar neon di jalanan global—sebuah papan nama hijau terang yang mencolok di tengah pasar yang ramai, sementara di baliknya, antarmuka pengguna produk yang dipoles tampak tersembunyi.
- Hatch — Desain bergaya samizdat yang digambar tangan dipadukan dengan mangkuk permen pastel. Kanvas kertas krem dihiasi aksen mint, titik-titik confetti, dan ajakan bertindak berbentuk pil, di mana font serif besar dan tebal mengisyaratkan kesenangan, dan maskot biru mengedipkan mata di sudut.
- Superr — Sebuah buku catatan sekolah yang hangat dalam cahaya sore yang lembut. Halaman berwarna krem, spidol oranye tanpa tutup, dan setumpuk stiker nama berlaminasi yang menunggu untuk dilepas.
- Mews — Pusat kendali perhotelan di waktu fajar, bermandikan warna merah muda. Ruang kerja berdinding putih yang diterangi sinar matahari, di mana huruf hitam tebal, kartu krem hangat, dan satu tombol aksi merah muda cerah mendefinisikan setiap layar—sebuah kepercayaan diri yang ceria, bukan kekangan korporat.