Duolingo tasarım sistemi.

Duolingo tasarım sistemi — Dil öğrenme platformu. Parlak baykuş yeşili, kalın gölgeler, oyunlaştırılmış neşe.

Bağlam içinde görün

Aynı tasarım token’ları farklı çıktı türlerine uygulandı — bir web sitesi, bir uygulama, bir slayt, bir poster. Bu sistemle yeniden giydirilmiş özgün mock’lar, ekran görüntüleri değil.

Web sitesi
Slaytlar
Uygulama
Poster

Tasarım token’ları

Open Design token sözleşmesine uyan 56 token — agent’ınızın herhangi bir çıktıyı temalandırmak için okuduğu aynı yapılandırılmış palet, tipografi, boşluk ve hareket değerleri.

Yüzey

  • --bg #ffffff
  • --surface #f7f7f7
  • --surface-warm var(--surface)

Metin

  • --fg #3c3c3c
  • --fg-2 var(--fg)
  • --muted #777777
  • --meta #afafaf

Kenarlık

  • --border #e5e5e5
  • --border-soft var(--border)

Vurgu

  • --accent #58cc02
  • --accent-on #ffffff
  • --accent-hover #89e219
  • --accent-active #58a700

Semantik

  • --success #58cc02
  • --warn #ffc800
  • --danger #ff4b4b

Tipografi

  • --font-display "Feather Bold", "DIN Round Pro", "Helvetica Neue", sans-serif
  • --font-body "Mona Sans", "Helvetica Neue", system-ui, sans-serif
  • --font-mono "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace

Tipografi ölçeği

  • --text-xs 12px
  • --text-sm 13px
  • --text-base 15px
  • --text-lg 18px
  • --text-xl 24px
  • --text-2xl 32px
  • --text-3xl 40px
  • --text-4xl 56px
  • --leading-body 1.5
  • --leading-tight 1.15
  • --tracking-display -0.01em

Boşluk

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 80px
  • --section-y-tablet 56px
  • --section-y-phone 40px

Köşe yarıçapı

  • --radius-sm 12px
  • --radius-md 16px
  • --radius-lg 20px
  • --radius-pill 9999px

Yükseklik

  • --elev-flat none
  • --elev-ring 0 0 0 2px var(--border)
  • --elev-raised 0 4px 0 #d7d7d7

Odak

  • --focus-ring 0 0 0 3px rgba(28, 176, 246, 0.2)

Hareket

  • --motion-fast 180ms
  • --motion-base 320ms
  • --ease-standard cubic-bezier(0.34, 1.56, 0.64, 1)

Yerleşim

  • --container-max 1080px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 20px
  • --container-gutter-phone 16px

Duolingo’dan İlham Alan Tasarım Sistemi

Category: Üretkenlik ve SaaS Dil öğrenme platformu. Parlak baykuş yeşili, kalın gölgeler, oyunlaştırılmış neşe.

1. Görsel Tema ve Atmosfer

Duolingo, görsel dil olarak işlenmiş oyunlaştırmadır. Arayüz çekinmeden parlaktır; baykuş yeşili (#58cc02) marka birincil rengi olarak kullanılır ve her etkileşimli öğenin altında, basılmayı bekleyen bir 3D düğme gibi görünen kalın 4px alt gölgesi bulunur. Sayfa beyazdır (#ffffff) ve 2–3px kalın kenarlıklar koyu gri (#e5e5e5) renktedir; tüm sistem daha iyi hiyerarşiyle yeniden doğmuş 2015 iOS uygulaması gibi okunur.

Tipografi, krom için Feather Bold (özel yuvarlak köşeli sans-serif) ve gövde metni için Mona Sans (veya Inter) kullanır. Görüntüleme boyutları büyük ve kendinden emin — Duolingo asla fısıldamaz. Başlıklar genellikle yeşil alt çizgi darbesi taşır veya yeşil bir hap üzerinde oturur; maskot Duo (yeşil bir baykuş) statik bir logo olarak değil, aktif bir illüstrasyon karakteri olarak görünür.

Şekil dili dostanedir: kartlarda 16–20px yarıçap, düğmelerde 12px, çipler ve ilerleme çubuklarında 9999px. İkonografi dolu, yuvarlak ve beceriye göre renk kodludur — her ders yüzeyi anında tanımlanabilir bir renk çifti içerir.

Temel Özellikler:

  • Baykuş yeşili (#58cc02) yüzeyin %30’undan fazlasında kullanılan baskın marka rengi
  • Her düğmede 4px kalın alt gölge (“dokunsal basma” karşılığı)
  • 2–3px düz kenarlıklar, asla ince çizgiler
  • Feather Bold (yuvarlak görüntüleme) + Mona Sans (gövde)
  • Büyük, kendinden emin metin — görüntüleme boyutları 48px’den başlayıp yükselir
  • Karakter olarak maskot: Duo baykuşu katılım sürecinde, hatalarda, serilerde görünür
  • Seri turuncusu (#ff9600) ve mücevher pembesi (#ce82ff) ikincil marka renkleri olarak

2. Renk Paleti & Roller

Birincil

  • Baykuş Yeşili (#58cc02): Marka birincili, birincil CTA, doğru cevap.
  • Koyu Baykuş Yeşili (#58a700): Yeşil düğmeler için basma/gölge rengi.
  • Açık Baykuş Yeşili (#89e219): Hover, yumuşak dolgular.
  • Soluk Baykuş Yeşili (#dbf8c5): Yumuşak yüzey, başarı afişi.

İkincil Vurgular

  • Seri Turuncusu (#ff9600): Seri sayacı, alev ikonu, premium enerji.
  • Koyu Seri Turuncusu (#cc7a00): Basılmış turuncu.
  • Mücevher Pembesi (#ce82ff): Mücevher para birimi, Super Duolingo.
  • Yılan Balığı Mavisi (#1cb0f6): İpucu düğmesi, bilgi bağlantısı.
  • Kardinal Kırmızı (#ff4b4b): Yanlış cevap, can kaybı.
  • Arı Sarısı (#ffc800): Pro rozeti, başarı.

Yüzey

  • Kar (#ffffff): Birincil arka plan.
  • Yılan Balığı (#f7f7f7): Bölüm ayırıcı, ikincil yüzey.
  • Kuğu (#e5e5e5): Devre dışı arka plan, gömülü blok.
  • Kurt (#777777): Koyu ayırıcı, ikincil metin.

Mürekkep & Metin

  • Yılan Balığı Siyahı (#3c3c3c): Birincil metin.
  • Kurt (#777777): İkincil metin, alt yazılar.
  • Tavşan (#afafaf): Devre dışı, yer tutucu.

Kenarlık

  • Kuğu (#e5e5e5): Standart 2px kenarlık.
  • Tavşan (#afafaf): Hover’da vurgulanan kenarlık.

3. Tipografi Kuralları

Yazı Tipi Ailesi

  • Görüntüleme / UI / Başlıklar: Feather Bold, yedek: 'DIN Round Pro', 'Helvetica Neue', sans-serif
  • Gövde / Uzun Metin: Mona Sans, yedek: 'Helvetica Neue', system-ui, sans-serif
  • Kod (nadir, okullar/yönetim): JetBrains Mono, yedek: ui-monospace, Menlo, monospace

Hiyerarşi

RolYazı TipiBoyutAğırlıkSatır YüksekliğiHarf AralığıNotlar
GörüntülemeFeather Bold56px (3.5rem)8001.05-0.01emKatılım kahramanı
H1Feather Bold32px (2rem)8001.15-0.005emSayfa başlığı
H2Feather Bold24px (1.5rem)8001.2normalBölüm başlığı
H3Feather Bold18px (1.125rem)7001.25normalKart başlığı, ders satırı
Büyük GövdeMona Sans17px (1.0625rem)5001.5normalDers istemi, talimat
GövdeMona Sans15px (0.9375rem)4001.5normalStandart düzyazı
AçıklamaMona Sans13px (0.8125rem)6001.40.01emXP sayacı, meta veri
DüğmeFeather Bold16px (1rem)8001.20.02emStandart düğme etiketi
SeriFeather Bold14px (0.875rem)8001.2normalSeri sayısı, alev üzerinde

İlkeler

  • 800 varsayılandır: Feather Bold, başlıklarda ve düğmelerde 800 ağırlıkta çalışır. Bu sistemde 700 zayıf görünür.
  • Büyük metin: Başlık boyutları tipik ürün markalarından %25–40 daha büyüktür — güven kimlik olarak.
  • Yuvarlak harf biçimleri: Her glif yumuşak uçlara sahiptir; keskin serifler dostluk sözleşmesini bozar.

4. Bileşen Stilleri

Düğmeler

Birincil (Baykuş Yeşili)

  • Arka plan: #58cc02
  • Metin: #ffffff
  • Dolgu: 14px 24px
  • Yarıçap: 16px
  • Border-bottom: 4px solid #58a700 (kalın gölge)
  • Hover: arka plan #89e219
  • Aktif: translate-y 4px, border-bottom 0 (düğme “basılır”)
  • Kullanım: “Devam Et”, “Kontrol Et”, ana CTA.

İkincil (Alt Gölgeli Beyaz)

  • Arka plan: #ffffff
  • Metin: #777777
  • Kenarlık: 2px solid #e5e5e5
  • Border-bottom: 4px solid #e5e5e5
  • Yarıçap: 16px
  • Dolgu: 14px 24px
  • Hover: metin #3c3c3c, kenarlık #afafaf

Seri Turuncusu

  • Arka plan: #ff9600
  • Metin: #ffffff
  • Border-bottom: 4px solid #cc7a00
  • Kullanım: seri hedefi, “Seriyi Başlat”

Hata (Kardinal Kırmızı)

  • Arka plan: #ff4b4b
  • Metin: #ffffff
  • Border-bottom: 4px solid #cc3b3b
  • Kullanım: yanlış cevap geri bildirimi.

Kartlar / Ders Karoları

  • Arka plan: #ffffff
  • Kenarlık: 2px solid #e5e5e5
  • Border-bottom: 4px solid #e5e5e5
  • Yarıçap: 16px
  • Dolgu: 16px
  • Hover: 2px yükselt, gölge 0 4px 0 #d7d7d7

Beceri Ağacı Düğümü (Ders Balonu)

  • Boyut: 80×72px
  • Arka plan: beceri rengi tonlu (aktif için yeşil, kilitli için gri)
  • Border-bottom: 6px solid daha koyu varyant
  • Yarıçap: 50% (dairesel)
  • Aktif: 1.6s’de bir 1.0 → 1.05 nabız atar

Giriş Alanları

  • Arka plan: #ffffff
  • Kenarlık: 2px solid #e5e5e5
  • Yarıçap: 12px
  • Dolgu: 12px 16px
  • Odak: kenarlık #1cb0f6 (yılan balığı mavisi), halka 0 0 0 3px rgba(28, 176, 246, 0.2)

İlerleme Çubuğu

  • Yol: #e5e5e5
  • Dolgu: #58cc02 (veya seri için #ff9600)
  • Yarıçap: 9999px
  • Yükseklik: 16px
  • Animasyonlu dolgu: artışta 320ms ease-out.

5. Boşluk & Düzen

  • Temel birim: 4px. Ölçek: 4, 8, 12, 16, 24, 32, 48, 64.
  • Kapsayıcı: maks. 1080px, 24px oluk.
  • Ders ağacı sütunu: 320px genişlik; masaüstünde ortalı.

6. Hareket

  • Süre: Düğme basması için 180ms; beceri düğümü kilit açma için 320ms; aktif düğüm nabzı için 1.6s.
  • Hızlanma: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, hafif aşma) kilit açma animasyonları için.
  • Maskot: Duo her 4–6s’de bir göz kırpar, seri dönüm noktalarında zıplar (480ms ease-out yay).

7. Kullanım Yönergeleri

  • Yüksek doygunluktaki baykuş yeşilini, kalın alt gölgeleri ve yuvarlak ders geometrisini birlikte tutun; düz yeşil düğmeler tek başına Duolingo gibi okunmaz.
  • Aşırı büyük kalın metni, ürünün teşvik veya geri bildirime ihtiyaç duyduğu ders, seri ve ilerleme anları için ayırın.
  • Eğlenceli hareketi ilerleme durumu değişikliklerinde tutumlu kullanın; her denetimde genel zıpla animasyonlarından kaçının.
Mod
design-system
Sahne
design
Yüzey
web
Manifest ID
design-system-duolingo

Etiketler

  • design-system
  • first-party
  • design
  • productivity-saas