Duolingo - The world’s most popular way to learn Tasarım Sistemi

duolingo.com

PROMotor v4

CSSOM sıklık analizinden, LLM yorumu yapılmadan çıkarılmış tasarım token'ları.

Görsel sistem

%100 güven

hero-displayDesign is intelligence made visibleFeather80px / 700 / 1.1

display-lgDesign is intelligence made visibleFeather64px / 700 / 1.5

display-mdDesign is intelligence made visibleFeather62px / 700 / 1.1

headline-lgDesign is intelligence made visibleDuolingo Sans40px / 700 / 1.1

headline-mdDesign is intelligence made visibleDuolingo Sans32px / 700 / 1.5

headline-smDesign is intelligence made visibleDuolingo Sans28px / 700 / 1.15

title-lgDesign is intelligence made visibleDuolingo Sans25px / 700 / 1.35

title-mdDesign is intelligence made visibleDuolingo Sans24px / 700 / 1.65

title-smDesign is intelligence made visibleDuolingo Sans20px / 700 / 1.2

body-lgDesign is intelligence made visibleDuolingo Sans20px / 500 / 1.4

body-lg-strongDesign is intelligence made visibleDuolingo Sans20px / 700 / 1.4

bodyDesign is intelligence made visibleDuolingo Sans17px / 500 / 1.2

button-lgDesign is intelligence made visibleDuolingo Sans16px / 700 / 1

buttonDesign is intelligence made visibleDuolingo Sans15px / 700 / 1.15

label-capsDesign is intelligence made visibleDuolingo Sans15px / 700 / 1.35

nav-linkDesign is intelligence made visibleDuolingo Sans15px / 700 / 1.5

%100 güven

button-ghost-3-padding-x
11px

section-padding-y
96px

footer-inner-inner-max-width
1048px

%100 güven

sm · 8px

md · 12px

lg · 16px

Bileşenler

Buttons4

%100 eşleşme

ghost · desktop

Label y değeri 16px, sitede ise 14px; Label height değeri 17px, sitede ise 21px.

Durağan%100 eşleşme27 ölçümden 2 tanesi farklı

Orijinal

Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme40 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%100 eşleşme

ghost · desktop

Durağan%100 eşleşme28 ölçüm eşleşiyor

Orijinal

Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

%98 eşleşme

secondary · desktop

Siteye %98 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%98 eşleşme22 ölçüm eşleşiyor

Orijinal

Render

Focus%98 eşleşme19 ölçüm eşleşiyor

Orijinal

Render

DESIGN.md içindeki tarif

Cards5

%100 eşleşme

desktop

Group 2 y değeri 259px, sitede ise 273px; Group 2 height değeri 92px, sitede ise 68px ve 4 tane daha.

Durağan%100 eşleşme153 ölçümden 6 tanesi farklı

Sitedeki orijinal Card, durağan — Orijinal

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, hover — Orijinal

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card, focus — Orijinal

Durağan, örnek 2%100 eşleşme153 ölçümden 6 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme153 ölçümden 6 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme153 ölçümden 6 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Group y değeri 139px, sitede ise 0px; Link y değeri 139px, sitede ise 0px ve 1 tane daha.

Durağan%100 eşleşme97 ölçümden 3 tanesi farklı

Sitedeki orijinal Card (2), durağan — Orijinal

Card (2) için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (2), hover — Orijinal

Card (2) için ayrı render, hover — Render

Focus%100 eşleşme18 ölçümden 2 tanesi farklı

Sitedeki orijinal Card (2), focus — Orijinal

Card (2) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme97 ölçümden 3 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme97 ölçümden 3 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme97 ölçümden 3 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%100 eşleşme97 ölçümden 3 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme104 ölçüm eşleşiyor

Sitedeki orijinal Card (3), durağan — Orijinal

Card (3) için ayrı render, durağan — Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Card (3), focus — Orijinal

Card (3) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme104 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme104 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme104 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 5%100 eşleşme104 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 6%100 eşleşme104 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Doğrulanamaz

desktop

Doğrulanamaz: sayfanın içine yerleştirdiği fotoğraflar, medya veya reklamlar öğenin çoğunu kaplıyor ve başka hiçbir şey farklı değil, bu yüzden karşılaştırma tarif hakkında bir şey söylemiyor.

Durağan%99 eşleşme121 ölçüm eşleşiyor

Sitedeki orijinal Card (4), durağan — Orijinal

Card (4) için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (4), hover — Orijinal

Card (4) için ayrı render, hover — Render

Focus%99 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Card (4), focus — Orijinal

Card (4) için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme121 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%99 eşleşme121 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme121 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Group 2 height değeri 80px, sitede ise 105px; Text 3 height değeri 50px, sitede ise 75px.

Durağan%100 eşleşme164 ölçümden 2 tanesi farklı

Sitedeki orijinal Card (5), durağan — Orijinal

Card (5) için ayrı render, durağan — Render

Durağan, örnek 2%100 eşleşme164 ölçümden 2 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme164 ölçümden 2 tanesi farklı

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Extras7

%100 eşleşme

desktop

Durağan%100 eşleşme94 ölçüm eşleşiyor

Sitedeki orijinal Accordion, durağan — Orijinal

Accordion için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Icon x değeri -9px, sitede ise 16px.

Durağan%100 eşleşme102 ölçümden 1 tanesi farklı

Sitedeki orijinal App store badge, durağan — Orijinal

App store badge için ayrı render, durağan — Render

Focus%100 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal App store badge, focus — Orijinal

App store badge için ayrı render, focus — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme182 ölçüm eşleşiyor

Sitedeki orijinal Footer navigation, durağan — Orijinal

Footer navigation için ayrı render, durağan — Render

DESIGN.md içindeki tarif

Kontrol edilmedi

desktop

Tarif oluşturulmadı: öğe sayfada bulunamadı.

Bu bileşen için hiçbir şey karşılaştırılmadı.

%100 eşleşme

desktop

Durağan%100 eşleşme40 ölçüm eşleşiyor

Sitedeki orijinal Language selector (2), durağan — Orijinal

Language selector (2) için ayrı render, durağan — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Language selector (2), focus — Orijinal

Language selector (2) için ayrı render, focus — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Group width değeri 1016px, sitede ise 1002px; List width değeri 1016px, sitede ise 1002px.

Durağan%100 eşleşme496 ölçümden 2 tanesi farklı

Sitedeki orijinal Language tabs, durağan — Orijinal

Language tabs için ayrı render, durağan — Render

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Siteye %100 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%100 eşleşme24 ölçüm eşleşiyor

Sitedeki orijinal Step list item, durağan — Orijinal

Step list item için ayrı render, durağan — Render

Hover%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Step list item, hover — Orijinal

Step list item için ayrı render, hover — Render

Focus%100 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Step list item, focus — Orijinal

Step list item için ayrı render, focus — Render

Durağan, örnek 2%100 eşleşme24 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 3%100 eşleşme24 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

Durağan, örnek 4%100 eşleşme24 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Headers10

%99 eşleşme

desktop

Durağan%99 eşleşme156 ölçüm eşleşiyor

Sitedeki orijinal Header (inner), durağan — Orijinal

Header (inner) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (inner), focus — Orijinal

Header (inner) için ayrı render, focus — Render

link 2 üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%89 eşleşme

desktop

Kök height değeri 128px, sitede ise 70px; Inner y değeri 18px, sitede ise 0px ve 12 tane daha.

Durağan%89 eşleşme216 ölçümden 14 tanesi farklı

Sitedeki orijinal Header (inner, 2), durağan — Orijinal

Header (inner, 2) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (inner, 2), focus — Orijinal

Header (inner, 2) için ayrı render, focus — Render

cta 2 üzerinde Focus%89 eşleşme19 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta 3 üzerinde Focus%89 eşleşme19 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Focus%89 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%89 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Durağan%100 eşleşme114 ölçüm eşleşiyor

Sitedeki orijinal Header (inner, 3), durağan — Orijinal

Header (inner, 3) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (inner, 3), focus — Orijinal

Header (inner, 3) için ayrı render, focus — Render

button üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%86 eşleşme

desktop

Siteye %86 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%86 eşleşme119 ölçüm eşleşiyor

Sitedeki orijinal Header (inner, 4), durağan — Orijinal

Header (inner, 4) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (inner, 4), focus — Orijinal

Header (inner, 4) için ayrı render, focus — Render

logo üzerinde Focus%86 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%94 eşleşme

desktop

Text y değeri 25px, sitede ise 23px; Text height değeri 17px, sitede ise 21px.

Durağan%95 eşleşme99 ölçümden 2 tanesi farklı

Sitedeki orijinal Header (landing), durağan — Orijinal

Header (landing) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Header (landing), hover — Orijinal

Header (landing) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Header (landing), focus — Orijinal

Header (landing) için ayrı render, focus — Render

cta üzerinde Focus%95 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

cta üzerinde Hover%94 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

logo üzerinde Focus%95 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%93 eşleşme

mobile

Kök height değeri 128px, sitede ise 70px; Inner y değeri 18px, sitede ise 0px ve 9 tane daha.

Durağan%93 eşleşme145 ölçümden 11 tanesi farklı

Focuskontrol edilmedi

logo üzerinde Focus%93 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme57 ölçüm eşleşiyor

Focuskontrol edilmedi

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%95 eşleşme

mobile

Siteye %95 benzerlikte render ediliyor, bu %96 eşiğinin altında.

Durağan%95 eşleşme101 ölçüm eşleşiyor

Focuskontrol edilmedi

logo üzerinde Focus%95 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme113 ölçüm eşleşiyor

Focuskontrol edilmedi

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

menu toggle üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme57 ölçüm eşleşiyor

Focuskontrol edilmedi

logo üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Footers8

%100 eşleşme

desktop

Durağan%100 eşleşme223 ölçüm eşleşiyor

Sitedeki orijinal Footer (inner), durağan — Orijinal

Footer (inner) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Footer (inner), hover — Orijinal

Footer (inner) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (inner), focus — Orijinal

Footer (inner) için ayrı render, focus — Render

nav link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Kök height değeri 118px, sitede ise 79px; Nav height değeri 78px, sitede ise 39px ve 1 tane daha.

Durağan%100 eşleşme201 ölçümden 3 tanesi farklı

Sitedeki orijinal Footer (inner, 2), durağan — Orijinal

Footer (inner, 2) için ayrı render, durağan — Render

Hoverkontrol edilmedi

Sitedeki orijinal Footer (inner, 2), hover — Orijinal

Footer (inner, 2) için ayrı render, hover — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (inner, 2), focus — Orijinal

Footer (inner, 2) için ayrı render, focus — Render

nav link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

desktop

Kök height değeri 78px, sitede ise 39px; Link y değeri 51px, sitede ise 12px.

Durağan%100 eşleşme182 ölçümden 2 tanesi farklı

Sitedeki orijinal Footer (inner, 3), durağan — Orijinal

Footer (inner, 3) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (inner, 3), focus — Orijinal

Footer (inner, 3) için ayrı render, focus — Render

link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%99 eşleşme

desktop

Group height değeri 431px, sitede ise 381px; Group height değeri 431px, sitede ise 285px ve 29 tane daha.

Durağan%99 eşleşme2279 ölçümden 31 tanesi farklı

Sitedeki orijinal Footer (landing), durağan — Orijinal

Footer (landing) için ayrı render, durağan — Render

Focuskontrol edilmedi

Sitedeki orijinal Footer (landing), focus — Orijinal

Footer (landing) için ayrı render, focus — Render

link 2 üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%99 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme201 ölçüm eşleşiyor

Hoverkontrol edilmedi

Focuskontrol edilmedi

nav link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Durağan%100 eşleşme182 ölçüm eşleşiyor

Focuskontrol edilmedi

link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Kök height değeri 155px, sitede ise 116px; Inner height değeri 117px, sitede ise 78px ve 4 tane daha.

Durağan%100 eşleşme223 ölçümden 6 tanesi farklı

Hoverkontrol edilmedi

Focuskontrol edilmedi

nav link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

nav link üzerinde Hover%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

%100 eşleşme

mobile

Inner height değeri 274px, sitede ise 378px; List 2 height değeri 148px, sitede ise 252px ve 7 tane daha.

Durağan%100 eşleşme2279 ölçümden 9 tanesi farklı

Focuskontrol edilmedi

link 2 üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

link üzerinde Focus%100 eşleşme18 ölçüm eşleşiyor

Orijinal

Kayıtlı görsel yok

Render

Kayıtlı görsel yok

DESIGN.md içindeki tarif

Input1

%94 eşleşme

desktop

Siteye %94 benzerlikte render ediliyor, bu %97 eşiğinin altında.

Durağan%94 eşleşme22 ölçüm eşleşiyor

Sitedeki orijinal Input, durağan — Orijinal

Input için ayrı render, durağan — Render

Focus%94 eşleşme18 ölçüm eşleşiyor

Sitedeki orijinal Input, focus — Orijinal

DESIGN.md içindeki tarif

DESIGN.md

Duolingo

Overview

Duolingo's marketing site reads as a children's picture book built by a disciplined product team. A pure white canvas carries warm charcoal type. The signature Feather Green (primary, #58CC02) shows up as the brand voice: hero headlines, step numbers, the solid CTA fill and the full-bleed footer. Sky Blue (secondary, #1CB0F6) is the second voice, used for links, ghost buttons and the solid course-page header bar. Flat-vector mascots and isometric illustrations carry most of the emotion, so the UI chrome stays simple and lets them play.

Density is low. Sections breathe on a section-padding-y rhythm, and feature rows pair one short green headline with a few lines of gray body copy and a large illustration. Hierarchy comes from typeface switching rather than size alone. The heavy, rounded Feather display face is reserved for hero and section headlines with tight negative tracking. Everything else is Duolingo Sans at only two weights (500 and 700). Interactive labels are 700 with wide 0.8px tracking, which makes them feel stamped and chunky.

The tactile, toy-like quality comes from borders, not shadows. Cards and buttons carry a thicker bottom border than their other edges, for example card-3 at 2px sides and a 4px bottom in Cloud Gray (hairline, #E5E5E5). The result is a pressable 'lip' rather than a floating lift. Corners are generously rounded (rounded.lg 16px dominates), and nothing on the page is sharp.

Key Characteristics:

White surface canvas; green (primary) is the brand anchor and floods the footer (footer-landing background #58CC02).
Two-tier charcoal text: ink #3C3C3C for base copy and ink-strong #4B4B4B for titles. Gray muted #777777 is used for supporting copy.
Feather display face only at hero and headline scale, with negative letter-spacing; Duolingo Sans everywhere else.
Only weights 500 and 700. Labels, buttons and nav use 700 with 0.8px tracking.
Depth comes from a thick bottom border (the 'chunky lip'), never from a blur shadow.
Radii of 8 / 12 / 16px with 16px dominant, so the soft, rounded geometry runs through every element.
Low density: generous vertical rhythm, illustration-led feature rows, a centered container.

Colors

The palette is a small set of saturated, cheerful brand hues on white, with a disciplined ladder of warm grays for text and borders. No gradients are used anywhere; every fill is a flat solid.

Brand & Accent

Feather Green (primary, #58CC02): the brand voice. It colors hero and section headlines (card-title), step numbers (step-list-item-text), the solid green header variant (header-inner-4 background) and the full footer field (footer-landing, footer-landing-mobile background). Use it for the primary CTA fill and celebratory headings, never for body copy.
Sky Blue (secondary, #1CB0F6): the secondary accent. It is the ghost-button label (button-ghost), inline links in cards (card-link), the active course link (header-inner-link) and the solid course-page header bar (header-inner-2 background).
Mint Teal (tertiary, #00CD9C): a page-specific accent, measured on one page. It colors the label of button-ghost-3 and the CTA in card-4, and tints the page's only spread shadow.
Flame Orange (accent-orange, #FF9600): a rare highlight, seen once. Treat it as a spot color only.
Deep Navy (navy, #0B3E71): the label color of button-secondary when it sits on the sky-blue header. Reserve it for text on secondary fields.

Surface

Paper White (surface, #FFFFFF): the page background and the fill of card-3. It is also the 4px ring around card-3-media.
On-Primary White (on-primary, #FFFFFF): text on green or blue fields, such as header-landing-text, header-inner-2-cta-3 and footer-inner-3-link.

Text

Charcoal (ink, #3C3C3C): the inherited base text color on almost every component root (card, header-landing, footer-inner). It is the most-used color on the site.
Strong Charcoal (ink-strong, #4B4B4B): titles and emphasized labels, for example card-2-text, card-3-text, accordion-title, card-4-title and app-store-badge.
Slate Gray (muted, #777777): supporting body copy and descriptions, for example card-body, card-3-text-2, card-4-body and step-list-item-text-2.
Pebble Gray (muted-light, #AFAFAF): tertiary UI text such as utility nav (footer-navigation-link, header-inner-link-2), the language selector (language-selector-2) and eyebrow labels (card-4-text).
Near Black (ink-black, #101010): input text only (input).
Black (black, #000000): the mobile menu toggle icon (header-inner-mobile-menu-toggle).
Default Link Blue (link, #0000EE): the browser-default anchor color. It was measured on logo links and on the card-3 root, where it is never actually visible as text. Do not use it as a design color; links that show text use secondary.

Hairlines & Borders

Cloud Gray (hairline, #E5E5E5): every visible border on the site. Examples are the card-3 outline and lip, the card-5 2px outline and the footer-inner 2px top rule. It is also the input fill (input background) and the accordion divider fill (accordion-group-2).

Component Colors (footer only)

These two greens were measured only inside the footer recipes, never in the page sampling. They exist to sit on the green field.

Lime (primary-light, #A5ED6E): footer link text (footer-landing-link, footer-landing-link-2) and the 2px top rule above the legal row (footer-landing-group-2).
Pale Sprout (primary-tint, #D7FFB8): footer column headings (footer-landing-text, footer-landing-text-2).

Typography

Font Family

Duolingo Sans (duolingo-sans, sans-serif): the workhorse face, a rounded geometric sans. It sets body, titles, buttons, nav, cards and the footer, and accounts for nearly all measured text on all five pages.
Feather (feather, sans-serif): the heavy, round-terminal display face. It appears only at hero and section-headline scale (hero-display, display-lg, display-md, and the 48px card-title in card). It always uses weight 700 with negative tracking.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`hero-display`	80px	700	1.1	-2.4px	Home hero headline (Feather)
`display-lg`	64px	700	1.5	-1.28px	Secondary-page hero h1 (Feather)
`display-md`	62px	700	1.1	-1.86px	Section h2 headlines (Feather)
`headline-lg`	40px	700	1.1	normal	Sans h1/h2 on inner pages
`headline-md`	32px	700	1.5	normal	Inner-page h1
`headline-sm`	28px	700	1.15	normal	Feature-block titles (`card-4-title`)
`title-lg`	25px	700	1.35	normal	Stat and step numerals (`card-5-text`, `step-list-item-text`)
`title-md`	24px	700	1.65	normal	Compact page h1
`title-sm`	20px	700	1.2	normal	h3 and accordion titles (`accordion-title`)
`body-lg`	20px	500	1.4	normal	Lead paragraphs (`card-4-body`)
`body-lg-strong`	20px	700	1.4	normal	Emphasized lead text, card captions (`card-2-text`)
`body`	17px	500	1.2	normal	Default body and inherited root text
`button-lg`	16px	700	1	0.64px	Large buttons and eyebrows (`button-ghost-3`, `card-4-text`)
`button`	15px	700	1.15	0.8px	Standard button labels (`button-ghost`, `language-selector-2`)
`label-caps`	15px	700	1.35	0.8px	Uppercase labels and tags
`nav-link`	15px	700	1.5	0.8px	Header and utility nav links

Principles

Two weights, no exceptions. 500 is the body weight and 700 covers everything else, including every heading, label and button. There is no 400 or 800+ in the token set. The single 400 reading, on input (flagged: the render matched 94% of the original pixels, below the 97% required after 2 correction attempts), is a form-control default, not a pattern to copy.
Tracking flips with role. Display headlines track tight (-1.28px to -2.4px) to make the Feather letterforms lock up like a wordmark. Interactive and label text tracks wide at 0.8px (0.64px at button-lg; header-inner-link measured 1px). Body and title text stays at normal tracking.
Line height is role-specific, not a single ratio. Display and headline text sits tight at 1.1–1.15, while body runs 1.2–1.4. Long-form card copy opens up further (card-group-2 and card-link at 24px on 17px; step-list-item-text-2 at 25px).
Body text is 17px, not 16px. body at 17px/500 is the inherited root on nearly every component. Keep that baseline when adding content.
Labels are typically uppercase. Button and nav labels at 0.8px tracking read as stamped caps in the screenshots. Pair button and nav-link with uppercase transform.

Note on Font Substitutes

Duolingo Sans and Feather are both proprietary. For Duolingo Sans, use Nunito (open source, rounded terminals). Map 500 to Nunito 600 and 700 to Nunito 800 so the strokes match Duolingo's heavier color, and keep the 0.8px label tracking. For Feather, use Fredoka at 700, or Baloo 2 at 800. Tighten tracking a touch less than the tokens specify (Fredoka is already compact), and check that the hero still reads as one chunky lockup at 80px.

Layout

Spacing System

Three spacing measurements were verified:

section-padding-y: 96px. This is the vertical padding between the page's major sections, measured on the page itself rather than on a component. It is the macro rhythm: every new feature block or band starts and ends with this breathing room.
button-ghost-3-padding-x: 11px. This is the horizontal padding of the root of button-ghost-3, the teal text button. It is a tight inset; the button's width comes from its label, not from wide padding.
footer-inner-inner-max-width: 1048px. This is the max width of the inner footer container on footer-inner.

Outside these three values, no internal component spacing was verified. Rebuild padding and gaps visually, and keep them generous.

Grid & Container

Container: content is centered and capped at footer-inner-inner-max-width (1048px). Use the same cap for page content so headers, features and footers align on one column edge.
Feature rows: the home page alternates text-and-illustration rows. The illustration swaps sides on each row, and the big green headline is left-aligned against gray body copy.
Course grid: the courses page is a strict grid of equal outlined cards (card-3) with consistent gutters. Each card carries a flag, a name and a learner count.
Footer: the green footer uses a multi-column link grid above a legal row.

Whitespace Philosophy

Whitespace is the primary separator. Sections are divided by section-padding-y and a change of content rather than by rules or background bands. The exceptions are the solid green footer and the occasional hairline between testimonial rows. Each viewport-height block holds one idea: one headline, one or two short lines of gray copy, one illustration. When adding content, add a new section at the same rhythm rather than packing more into an existing one.

Measured Layout

Every spacing token restates a measurement of a verified component recipe, or the step those measurements share. section-padding-y is measured directly on the page sections and feeds no step.

section-padding-y: 96px (vertical padding repeated on the page sections: 2 section edges on 1 page)
footer-inner-inner-max-width: 1048px (footer-inner, max width of footer-inner-inner)
button-ghost-3-padding-x: 11px (button-ghost-3, horizontal padding of the root)

The card-3 grid lays out in 4 columns at desktop. The footer lays out in 2 columns at mobile.

Elevation & Depth

Level	Treatment	Use
Base	`surface` #FFFFFF, no border, no shadow	Page canvas, feature rows, headers on white (`header-landing`, `header-inner`)
Hairline	2px solid `hairline` #E5E5E5	`card-5` outline (2px all sides); `footer-inner` top rule (2px top). On green, `footer-landing-group-2` uses a 2px `primary-light` #A5ED6E top rule
Chunky lip	Thicker bottom border than the sides	`card-3`: 2px sides and top, 4px bottom, solid #E5E5E5. `button-ghost` and `app-store-badge`: 2px sides, 4px bottom, transparent. `button-ghost-3` and `card-4-cta`: 1px sides, 5px bottom, transparent. `button-secondary` and `header-landing-cta`: 4px bottom, transparent
Tint wash	`rgba(0, 205, 156, 0.1) 0px 0px 0px 1440px` (spread-only shadow, no blur)	Measured once at page level: a 10% `tertiary` teal wash that tints the area around a highlighted element
Blur	None measured	No backdrop-filter anywhere; headers are static and opaque

Shadow philosophy. Duolingo builds depth with borders, not with light. The defining move is the 'chunky lip': a bottom border 2–3px heavier than the other edges. It makes cards and buttons look like physical, pressable keys. On card-3 the lip is visible Cloud Gray. On buttons the measured border color is transparent, so the visible lip there comes from a fill the recipes did not capture; the screenshots show the green CTA with a darker green lower edge. The only box-shadow on the site is a spread-only teal tint (rgba(0, 205, 156, 0.1) 0px 0px 0px 1440px). It works as a color wash, not as a lift. Never add soft drop shadows or blur. If something needs to feel raised, give it the thicker bottom border.

Shapes

Border Radius Scale

Token	Value	Use
`rounded.sm`	8px	Form fields (`input`)
`rounded.md`	12px	Standard buttons and badges: `button-ghost`, `app-store-badge`, `header-landing-cta`, and the image link in `card-2-link`
`rounded.lg`	16px	The dominant radius for cards and large buttons: `card-3`, `card-3-media`, `card-5`, `button-secondary`, `button-ghost-3`, `header-inner-2-cta-3`, `header-inner-4-cta`

The geometry is soft and rounded throughout. rounded.lg is by far the most frequent value; it gives cards and course tiles their toy-like, rounded-square look. Even the flag thumbnails inside card-3 are rounded squares (card-3-media at 16px, framed by a 4px white border). Buttons split between 12px and 16px with no strong rule. Use rounded.lg for anything card-sized or primary, and rounded.md for compact buttons and badges.

There is no pill or full-circle radius token. The small round check-mark badges and illustration elements visible in the screenshots are artwork, not UI chrome. Do not invent a 999px pill for buttons; Duolingo buttons are rounded rectangles. Square corners appear nowhere in the interactive UI.

Components

Each component below was distilled from the live page: the recipe is a standalone, placeholder-filled reproduction with literal values, and every frontmatter key named in the anatomy carries the same measurements. A verified component reproduced the original in every check; a flagged one is shipped with the reason it did not; one marked not verifiable could not be compared with the original, which says nothing about the recipe.

Buttons

Button, ghost

Verification: flagged, the button-ghost-label y did not reproduce the measured 14px after 2 correction attempts.

Anatomy

button-ghost: the component root, a <button> (.c-button-ghost)
button-ghost-label: label text, 25 characters (.c-button-ghost__label)

Recipe

HTML · CSS

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__label">lorem ipsum dolor sit ame</span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 50px;
  padding: 0px 16px;
  position: relative;
  background-color: transparent;
  color: #1CB0F6;
  border-radius: 12px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 2px solid transparent;
}

.c-button-ghost::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 330px;
  height: 48px;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #E5E5E5;
  border: 2px solid #E5E5E5;
  border-radius: 12px;
  box-shadow: #E5E5E5 0px 2px 0px 0px;
}

.c-button-ghost__label {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

.c-button-ghost:focus {
  outline: none;
}

States

focus: outline none

Button, secondary

Verification: flagged, the render came out 2 px wider than the original after 2 correction attempts.

Anatomy

button-secondary: the component root, a <button> (.c-button-secondary), 5-character label

Recipe

HTML · CSS

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">lorem</button>
</div>

.c-button-secondary-scope {
  background-color: #1CB0F6;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 44px;
  padding: 0px 20px;
  position: relative;
  background-color: transparent;
  color: #0B3E71;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  border-top: 0;
  border-right: 0;
  border-bottom: 4px solid transparent;
  border-left: 0;
}

.c-button-secondary::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 83px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #FFFFFF80;
  border-radius: 16px;
  box-shadow: #FFFFFF80 0px 4px 0px 0px;
}

.c-button-secondary:focus {
  outline: none;
}

States

focus: outline none

Button, ghost (2)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-2: the component root, a <button> (.c-button-ghost-2)
button-ghost-2-label: label text, 0 characters (.c-button-ghost-2__label)
button-ghost-2-label-2: label text, 14 characters (.c-button-ghost-2__label-2)
button-ghost-2-label-3: label text, 7 characters (.c-button-ghost-2__label-3)
button-ghost-2-image: image placeholder, 14px (.c-button-ghost-2__image)

Recipe

HTML · CSS

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <span class="c-button-ghost-2__label">
      <span class="c-button-ghost-2__label-2">lorem ipsum do</span>
      <span class="c-button-ghost-2__label-3">lorem i</span>
    </span>
    <span class="c-button-ghost-2__image" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #1CB0F6;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 17.25px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: filter 0.2s ease;
}

.c-button-ghost-2__label {
  display: block;
  box-sizing: border-box;
}

.c-button-ghost-2__image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-left: 8px;
}

.c-button-ghost-2:focus {
  outline: none;
}

States

focus: outline none

Button, ghost (3)

Verification: verified against the live page at desktop.

Anatomy

button-ghost-3: the component root, a <button> (.c-button-ghost-3)
button-ghost-3-label: label text, 25 characters (.c-button-ghost-3__label)

Recipe

HTML · CSS

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__label">lorem ipsum dolor sit ame</span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #00CD9C1A;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-button-ghost-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 48px;
  max-width: 300px;
  padding: 0px 11px;
  position: relative;
  background-color: transparent;
  color: #00CD9C;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 1px solid transparent;
}

.c-button-ghost-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 300px;
  height: 44px;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  background-color: color(srgb 0.9 0.980392 0.961176);
  color: color(srgb 0.75 0.95098 0.902941);
  border: 1px solid color(srgb 0.75 0.95098 0.902941);
  border-radius: 16px;
  box-shadow: color(srgb 0.75 0.95098 0.902941) 0px 3px 0px 1px;
  outline: 1px solid color(srgb 0.75 0.95098 0.902941);
}

.c-button-ghost-3__label {
  display: block;
  box-sizing: border-box;
}

.c-button-ghost-3:focus {
  outline: none;
}

States

focus: outline none

Cards

Card

Verification: flagged, the card-group-2 y did not reproduce the measured 273px after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid; the recipe carries the values they all share
card: the component root, a <section> (.c-card)
card-group: inner flex column (.c-card__group)
card-title: heading, 21 characters (.c-card__title)
card-body: inner group (.c-card__body)
card-group-2: inner group (.c-card__group-2)
card-text: label text, 34 characters (.c-card__text, 2 instances)
card-link: link, 28-character label (.c-card__link)
card-group-3: inner block (.c-card__group-3)
card-media: image placeholder, 530px (.c-card__media)

Recipe

HTML · CSS

<div class="c-card-scope">
  <section class="c-card">
    <div class="c-card__group">
      <h2 class="c-card__title">lorem ipsum dolor sit</h2>
      <p class="c-card__body">
        <span class="c-card__group-2">
          <span class="c-card__text">lorem ipsum dolor sit amet consect</span>
          <a class="c-card__link" href="#">lorem ipsum dolor sit amet c</a>
          <span class="c-card__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipi</span>
        </span>
      </p>
    </div>
    <div class="c-card__group-3">
      <span class="c-card__media" aria-hidden="true"></span>
    </div>
  </section>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card {
  display: inline-flex;
  align-items: center;
  gap: 101px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 988px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card__group {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex-shrink: 0;
  gap: 24px;
  box-sizing: border-box;
  max-width: 100%;
}

.c-card__title {
  display: block;
  box-sizing: border-box;
  max-width: 503px;
  margin: 0px;
  color: #58CC02;
  font-family: feather, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
}

.c-card__body {
  display: block;
  box-sizing: border-box;
  max-width: 473px;
  margin: 0px;
  color: #777777;
  line-height: 24px;
}

.c-card__group-2 {
  display: inline;
  box-sizing: border-box;
}

.c-card__link {
  display: inline;
  box-sizing: border-box;
  color: #1CB0F6;
  cursor: pointer;
  font-weight: 700;
  text-decoration-line: none;
}

.c-card__group-3 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 530px;
  aspect-ratio: 1 / 1;
  position: relative;
  line-height: 0px;
}

.c-card__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 530px;
  height: 530px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card:hover {
  flex-direction: row;
}

.c-card:focus {
  flex-direction: row;
}

States

hover: flex-direction row
focus: flex-direction row

Card (2)

Verification: flagged, the card-2-group y did not reproduce the measured 0px after 2 correction attempts.

Anatomy

Group: 5 instances in a 1-column grid; the recipe carries the values they all share
card-2: the component root, a <div> (.c-card-2)
card-2-group: inner block (.c-card-2__group)
card-2-link: link (.c-card-2__link)
card-2-media: image placeholder, 500x277px (.c-card-2__media)
card-2-media-2: image placeholder, 64px (.c-card-2__media-2)
card-2-group-2: inner flex row (.c-card-2__group-2)
card-2-text: label text, 70 characters (.c-card-2__text)

Recipe

HTML · CSS

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <a class="c-card-2__link" href="#">
        <span class="c-card-2__media" aria-hidden="true"></span>
        <span class="c-card-2__media-2" aria-hidden="true"></span>
      </a>
    </div>
    <div class="c-card-2__group-2">
      <span class="c-card-2__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod</span>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-2__group {
  display: block;
  box-sizing: border-box;
  aspect-ratio: 375 / 208;
  position: relative;
}

.c-card-2__link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #0000EE;
  border-radius: 12px;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 500px;
  height: 277px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-2__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  position: absolute;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, -32, -32);
}

.c-card-2__group-2 {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 16px;
  box-sizing: border-box;
}

.c-card-2__text {
  display: block;
  box-sizing: border-box;
  color: #4B4B4B;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.c-card-2:hover {
  gap: 40px;
}

.c-card-2:focus {
  gap: 40px;
}

States

hover: gap 40px
focus: gap 40px

Card (3)

Verification: verified against the live page at desktop.

Anatomy

Group: 6 instances in a 4-column grid; the recipe carries the values they all share
card-3: the component root, a <a> (.c-card-3)
card-3-group: inner block (.c-card-3__group)
card-3-group-2: inner flex row (.c-card-3__group-2)
card-3-group-3: inner block (.c-card-3__group-3)
card-3-media: image placeholder, 88x68px (.c-card-3__media)
card-3-text: label text, 7 characters (.c-card-3__text)
card-3-text-2: label text, 12 characters (.c-card-3__text-2)

Recipe

HTML · CSS

<div class="c-card-3-scope">
  <a class="c-card-3" href="#">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2"></div>
      <div class="c-card-3__group-3">
        <span class="c-card-3__media" aria-hidden="true"></span>
      </div>
      <div class="c-card-3__text">lorem i</div>
      <div class="c-card-3__text-2">lorem ipsum</div>
    </div>
  </a>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-3 {
  display: inline-block;
  flex-grow: 1;
  border-spacing: 0px;
  box-sizing: border-box;
  min-width: 200px;
  max-width: 240px;
  min-height: 217px;
  padding: 12px 12px 24px;
  position: relative;
  background-color: #FFFFFF;
  color: #0000EE;
  border-radius: 16px;
  cursor: pointer;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  border-top: 2px solid #E5E5E5;
  border-right: 2px solid #E5E5E5;
  border-bottom: 4px solid #E5E5E5;
  border-left: 2px solid #E5E5E5;
}

.c-card-3__group {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-card-3__group-2 {
  display: flex;
  flex-direction: row-reverse;
  box-sizing: border-box;
  min-height: 26px;
  margin-bottom: 6px;
}

.c-card-3__group-3 {
  display: block;
  box-sizing: border-box;
  height: 80px;
  margin-right: auto;
  margin-left: auto;
}

.c-card-3__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 88px;
  height: 68px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  border: 4px solid #FFFFFF;
  border-radius: 16px;
}

.c-card-3__text {
  display: block;
  box-sizing: border-box;
  color: #4B4B4B;
  font-weight: 700;
  line-height: 20.4px;
  margin-top: 10px;
}

.c-card-3__text-2 {
  display: block;
  box-sizing: border-box;
  color: #777777;
  margin-top: 6px;
}

.c-card-3:focus {
  outline: none;
}

States

focus: outline none

Card (4)

Verification: not verifiable, what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged.

Anatomy

Group: 4 instances in a 1-column grid, 40px gap; the recipe carries the values they all share
card-4: the component root, a <section> (.c-card-4)
card-4-group: inner flex column (.c-card-4__group)
card-4-text: label text, 19 characters (.c-card-4__text)
card-4-title: heading, 24 characters (.c-card-4__title)
card-4-body: label text, 59 characters (.c-card-4__body)
card-4-cta: link (.c-card-4__cta)
card-4-text-2: label text, 13 characters (.c-card-4__text-2)
card-4-group-2: inner flex row (.c-card-4__group-2)
card-4-media: image placeholder, 295x611px (.c-card-4__media)

Recipe

HTML · CSS

<div class="c-card-4-scope">
  <section class="c-card-4">
    <div class="c-card-4__group">
      <span class="c-card-4__text">lorem ipsum dolor s</span>
      <h2 class="c-card-4__title">lorem ipsum dolor sit am</h2>
      <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed</p>
      <a class="c-card-4__cta" href="#">
        <span class="c-card-4__text-2">lorem ipsum d</span>
      </a>
    </div>
    <div class="c-card-4__group-2">
      <span class="c-card-4__media" aria-hidden="true"></span>
    </div>
  </section>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-4 {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 910px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-card-4__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  text-align: center;
}

.c-card-4__text {
  display: block;
  box-sizing: border-box;
  color: #AFAFAF;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.c-card-4__title {
  display: block;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  color: #4B4B4B;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  max-width: 442px;
  margin: 0px auto 36px;
  color: #777777;
  font-size: 20px;
  line-height: 28px;
}

.c-card-4__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  max-width: 300px;
  position: relative;
  color: #00CD9C;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-size: 16px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 11px;
  padding-left: 11px;
  border-top: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 1px solid transparent;
}

.c-card-4__cta::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 300px;
  height: 44px;
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #E5E5E5;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  box-shadow: #E5E5E5 0px 3px 0px 1px;
  outline: 1px solid #E5E5E5;
}

.c-card-4__text-2 {
  display: block;
  box-sizing: border-box;
}

.c-card-4__group-2 {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.c-card-4__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 295px;
  height: 611px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-4:hover {
  flex-direction: row-reverse;
}

.c-card-4:focus {
  flex-direction: row-reverse;
}

States

hover: flex-direction row-reverse
focus: flex-direction row-reverse

Card (5)

Verification: flagged, the card-5-group-2 height did not reproduce the measured 105px after 2 correction attempts.

Anatomy

Group: 3 instances in a 3-column grid, 80px gap; the recipe carries the values they all share
card-5: the component root, a <div> (.c-card-5)
card-5-media: image placeholder, 170px (.c-card-5__media)
card-5-text: label text, 9 characters (.c-card-5__text)
card-5-group: inner block (.c-card-5__group)
card-5-group-2: inner block (.c-card-5__group-2, 2 instances)
card-5-group-3: inner flex row (.c-card-5__group-3, 2 instances)
card-5-media-2: image placeholder, 13x9px (.c-card-5__media-2, 2 instances)
card-5-text-2: label text, 21 characters (.c-card-5__text-2, 2 instances)
card-5-text-3: label text, 57 characters (.c-card-5__text-3, 2 instances)

Recipe

HTML · CSS

<div class="c-card-5-scope">
  <div class="c-card-5">
    <span class="c-card-5__media" aria-hidden="true"></span>
    <div class="c-card-5__text">lorem ips</div>
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3">
          <span class="c-card-5__media-2" aria-hidden="true"></span>
          <span class="c-card-5__text-2">lorem ipsum dolor sit</span>
        </div>
        <div class="c-card-5__text-3">lorem ipsum dolor sit amet consectetur adipiscing elit se</div>
      </div>
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-3">
          <span class="c-card-5__media-2" aria-hidden="true"></span>
          <span class="c-card-5__text-2">lorem ipsum do</span>
        </div>
        <div class="c-card-5__text-3">lorem ipsum dolor sit amet consectetur adipiscing el</div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #4B4B4B;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
}

.c-card-5 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 330px;
  padding: 24px;
  color: #4B4B4B;
  border: 2px solid #E5E5E5;
  border-radius: 16px;
  cursor: default;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  text-align: center;
}

.c-card-5__media {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 170px;
  height: 170px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-top: -75px;
  margin-bottom: 18px;
}

.c-card-5__text {
  display: block;
  box-sizing: border-box;
  font-size: 25px;
  font-weight: 700;
  line-height: 34px;
  margin-bottom: 24px;
}

.c-card-5__group {
  display: block;
  box-sizing: border-box;
  text-align: left;
}

.c-card-5__group-2 {
  display: block;
  box-sizing: border-box;
}

.c-card-5__group-3 {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 5px;
}

.c-card-5__media-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 13px;
  height: 9px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-top: 8px;
  margin-right: 15px;
}

.c-card-5__text-3 {
  display: block;
  box-sizing: border-box;
  margin-left: 28px;
}

States

No hover or focus change was observed.

Language tabs

Verification: flagged, the language-tab-group width did not reproduce the measured 1002px after 2 correction attempts.

Anatomy

language-tab: the component root, a <nav> (.c-language-tab), content not captured
language-tab-icon: icon placeholder, 14px (.c-language-tab__icon)
language-tab-group: inner block (.c-language-tab__group)
language-tab-list: inner flex row (.c-language-tab__list), content not captured
language-tab-link: link (.c-language-tab__link, 18 instances), content not captured
language-tab-item: inner group (.c-language-tab__item)

Recipe

HTML · CSS

<div class="c-language-tab-scope">
  <nav class="c-language-tab">
    <span class="c-language-tab__icon" aria-hidden="true"></span>
    <div class="c-language-tab__group">
      <ul class="c-language-tab__list">
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <a class="c-language-tab__link" href="#"></a>
        <li class="c-language-tab__item">
          <a class="c-language-tab__link" href="#"></a>
        </li>
      </ul>
    </div>
  </nav>
</div>

.c-language-tab-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-language-tab {
  display: inline-grid;
  align-items: center;
  gap: 30px;
  grid-template-columns: min-content 1fr min-content;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 74px;
  max-width: 1090px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-language-tab__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  cursor: pointer;
}

.c-language-tab__group {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-language-tab__list {
  display: flex;
  gap: 23px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  list-style-type: none;
  transition: transform 0.5s ease-in-out;
}

.c-language-tab__link {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: #777777;
  cursor: pointer;
  text-decoration-line: none;
}

.c-language-tab__item {
  display: list-item;
  box-sizing: border-box;
}

States

No hover or focus change was observed.

Verification: flagged, the app-store-badge-icon x did not reproduce the measured 16px after 2 correction attempts.

Anatomy

app-store-badge: the component root, a <a> (.c-app-store-badge)
app-store-badge-group: inner group (.c-app-store-badge__group)
app-store-badge-icon: icon placeholder, 34px (.c-app-store-badge__icon)
app-store-badge-group-2: inner group (.c-app-store-badge__group-2)
app-store-badge-group-3: inner grid (.c-app-store-badge__group-3)
app-store-badge-text: label text, 15 characters (.c-app-store-badge__text)
app-store-badge-text-2: label text, 9 characters (.c-app-store-badge__text-2)

Recipe

HTML · CSS

<div class="c-app-store-badge-scope">
  <a class="c-app-store-badge" href="#">
    <span class="c-app-store-badge__group">
      <span class="c-app-store-badge__icon" aria-hidden="true"></span>
    </span>
    <span class="c-app-store-badge__group-2">
      <span class="c-app-store-badge__group-3">
        <span class="c-app-store-badge__text">lorem ipsum dol</span>
        <span class="c-app-store-badge__text-2">lorem ips</span>
      </span>
    </span>
  </a>
</div>

.c-app-store-badge-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-app-store-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 9.5px 14px;
  position: relative;
  color: #4B4B4B;
  border-radius: 12px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 2px solid transparent;
}

.c-app-store-badge::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 177px;
  height: 61px;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #E5E5E5;
  border: 2px solid #E5E5E5;
  border-radius: 12px;
  box-shadow: #E5E5E5 0px 2px 0px 0px;
}

.c-app-store-badge__group {
  display: block;
  align-self: start;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
}

.c-app-store-badge__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-app-store-badge__group-2 {
  display: block;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 20px;
}

.c-app-store-badge__group-3 {
  display: grid;
  box-sizing: border-box;
}

.c-app-store-badge__text {
  display: block;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 1px;
}

.c-app-store-badge:focus {
  outline: none;
}

States

focus: outline none

Headers

Header (landing)

Verification: desktop flagged, the header-landing-text y did not reproduce the measured 23px after 2 correction attempts; mobile verified against the live page at mobile.

Variant observed on https://www.duolingo.com/.

Anatomy

header-landing: the component root, a <nav> (.c-header-landing)
header-landing-logo: link (.c-header-landing__logo)
header-landing-logo-image: image placeholder, 179x42px (.c-header-landing__logo-image)
header-landing-group: inner flex row (.c-header-landing__group)
header-landing-cta: link (.c-header-landing__cta)
header-landing-text: label text, 11 characters (.c-header-landing__text)

Desktop recipe

HTML · CSS

<div class="c-header-landing-scope">
  <nav class="c-header-landing">
    <a class="c-header-landing__logo" href="#">
      <span class="c-header-landing__logo-image" aria-hidden="true"></span>
    </a>
    <div class="c-header-landing__group">
      <a class="c-header-landing__cta" href="#">
        <span class="c-header-landing__text">lorem ipsum</span>
      </a>
    </div>
  </nav>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-landing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 70px;
  max-width: 988px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-landing__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 179px;
  height: 42px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-landing__group {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-landing__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  position: relative;
  color: #FFFFFF;
  border-radius: 12px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-landing__cta::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 133px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-color: #58CC02;
  color: #58A700;
  border-radius: 12px;
  box-shadow: #58A700 0px 4px 0px 0px;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
}

.c-header-landing__logo:focus {
  outline: none;
}

.c-header-landing__cta:hover {
  justify-content: normal;
  padding: 0px;
  color: #AFAFAF;
  border: 0;
  border-radius: 0px;
  line-height: 17.25px;
  text-align: center;
  appearance: button;
}

.c-header-landing__cta:focus {
  justify-content: normal;
  padding: 0px;
  color: #AFAFAF;
  border: 0;
  border-radius: 0px;
  outline: none;
  line-height: 17.25px;
  text-align: center;
  appearance: button;
}

Mobile anatomy

header-landing-mobile: the component root, a <nav> (.c-header-landing-mobile)
header-landing-mobile-logo: link (.c-header-landing-mobile__logo)
header-landing-mobile-logo-image: image placeholder, 161x38px (.c-header-landing-mobile__logo-image)

Mobile recipe

HTML · CSS

<div class="c-header-landing-mobile-scope">
  <nav class="c-header-landing-mobile">
    <a class="c-header-landing-mobile__logo" href="#">
      <span class="c-header-landing-mobile__logo-image" aria-hidden="true"></span>
    </a>
  </nav>
</div>

.c-header-landing-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-landing-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 70px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 15px;
  padding-left: 15px;
}

.c-header-landing-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-landing-mobile__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 161px;
  height: 38px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-landing-mobile__logo:focus {
  outline: none;
}

States

header-landing-logo focus: outline none
header-landing-cta hover (header-landing-cta-hover): justify-content normal, padding 0px, color #AFAFAF, border 0, border-radius 0px, line-height 17.25px, text-align center, appearance button
header-landing-cta focus (header-landing-cta-focus): justify-content normal, padding 0px, color #AFAFAF, border 0, border-radius 0px, outline none, line-height 17.25px, text-align center, appearance button
mobile, header-landing-mobile-logo focus: outline none

Header (inner)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.duolingo.com/efficacy.

Anatomy

header-inner: the component root, a <nav> (.c-header-inner)
header-inner-logo: link (.c-header-inner__logo)
header-inner-logo-image: image placeholder, 182x42px (.c-header-inner__logo-image)
header-inner-link: link, 8-character label (.c-header-inner__link)
header-inner-link-2: link, 6-character label (.c-header-inner__link-2, 4 instances)

Desktop recipe

HTML · CSS

<div class="c-header-inner-scope">
  <nav class="c-header-inner">
    <a class="c-header-inner__logo" href="#">
      <span class="c-header-inner__logo-image" aria-hidden="true"></span>
    </a>
    <a class="c-header-inner__link" href="#">lorem ip</a>
    <a class="c-header-inner__link-2" href="#">lorem</a>
    <a class="c-header-inner__link-2" href="#">lorem i</a>
    <a class="c-header-inner__link-2" href="#">lorem ips</a>
    <a class="c-header-inner__link-2" href="#">lorem ip</a>
  </nav>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1048px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 30px;
  padding-left: 30px;
}

.c-header-inner__logo {
  display: block;
  align-self: center;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  margin-right: auto;
}

.c-header-inner__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 182px;
  height: 42px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner__link {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  color: #1CB0F6;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 20px;
}

.c-header-inner__link::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 76px;
  height: 4px;
  position: absolute;
  top: 68px;
  right: -32.1719px;
  bottom: -2px;
  left: 44.1719px;
  background-color: #1CB0F6;
  transform: matrix(1, 0, 0, 1, -38.1797, 0);
}

.c-header-inner__link-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  color: #AFAFAF;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 20px;
}

.c-header-inner__link-2::after {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 69px;
  height: 4px;
  position: absolute;
  top: 68px;
  right: -28.4375px;
  bottom: -2px;
  left: 40.4375px;
  transform: matrix(1, 0, 0, 1, -34.4453, 0);
}

.c-header-inner__logo:focus {
  outline: none;
}

.c-header-inner__link:focus {
  outline: none;
}

.c-header-inner__link-2:focus {
  outline: none;
}

Mobile anatomy

header-inner-mobile: the component root, a <nav> (.c-header-inner-mobile)
header-inner-mobile-logo: link (.c-header-inner-mobile__logo)
header-inner-mobile-logo-image: image placeholder, 139x32px (.c-header-inner-mobile__logo-image)
header-inner-mobile-menu-toggle: button (.c-header-inner-mobile__menu-toggle)
header-inner-mobile-group: inner group (.c-header-inner-mobile__group)
header-inner-mobile-icon: icon placeholder, 32x33px (.c-header-inner-mobile__icon)

Mobile recipe

HTML · CSS

<div class="c-header-inner-mobile-scope">
  <nav class="c-header-inner-mobile">
    <a class="c-header-inner-mobile__logo" href="#">
      <span class="c-header-inner-mobile__logo-image" aria-hidden="true"></span>
    </a>
    <button class="c-header-inner-mobile__menu-toggle" type="button">
      <span class="c-header-inner-mobile__group">
        <span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
      </span>
    </button>
  </nav>
</div>

.c-header-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-mobile {
  display: inline-flex;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-inner-mobile__logo {
  display: block;
  align-self: center;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  margin-right: auto;
}

.c-header-inner-mobile__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 139px;
  height: 32px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  align-self: center;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 19.55px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: filter 0.2s ease;
}

.c-header-inner-mobile__group {
  display: block;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  color: #58CC02;
}

.c-header-inner-mobile__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 33px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__logo:focus {
  outline: none;
}

.c-header-inner-mobile__menu-toggle:focus {
  outline: none;
}

States

header-inner-logo focus: outline none
header-inner-link focus: outline none
header-inner-link-2 focus: outline none
mobile, header-inner-mobile-logo focus: outline none
mobile, header-inner-mobile-menu-toggle focus: outline none

Header (inner, 2)

Verification: desktop flagged, the header-inner-2 height did not reproduce the measured 70px after 2 correction attempts; mobile flagged, the header-inner-2-mobile height did not reproduce the measured 70px after 2 correction attempts.

Variant observed on https://www.duolingo.com/courses.

Anatomy

header-inner-2: the component root, a <header> (.c-header-inner-2)
header-inner-2-inner: inner block (.c-header-inner-2__inner)
header-inner-2-logo: link (.c-header-inner-2__logo)
header-inner-2-logo-image: image placeholder, 153x36px (.c-header-inner-2__logo-image)
header-inner-2-group: inner flex row (.c-header-inner-2__group)
header-inner-2-group-2: inner block (.c-header-inner-2__group-2)
header-inner-2-cta: the button-ghost-2 button (.c-header-inner-2__cta)
header-inner-2-text: label text, 0 characters (.c-header-inner-2__text)
header-inner-2-text-2: label text, 14 characters (.c-header-inner-2__text-2, 2 instances)
header-inner-2-cta-image: image placeholder, 14px (.c-header-inner-2__cta-image)
header-inner-2-group-3: inner block (.c-header-inner-2__group-3)
header-inner-2-cta-2: the button-secondary button, 5-character label (.c-header-inner-2__cta-2)
header-inner-2-cta-3: link, 11-character label (.c-header-inner-2__cta-3)

Desktop recipe

HTML · CSS

<div class="c-header-inner-2-scope">
  <header class="c-header-inner-2">
    <div class="c-header-inner-2__inner">
      <a class="c-header-inner-2__logo" href="#">
        <span class="c-header-inner-2__logo-image" aria-hidden="true"></span>
      </a>
      <div class="c-header-inner-2__group">
        <div class="c-header-inner-2__group-2">
          <button class="c-header-inner-2__cta" type="button">
            <span class="c-header-inner-2__text">
              <span class="c-header-inner-2__text-2">lorem ipsum do</span>
              <span class="c-header-inner-2__text-2">lorem i</span>
            </span>
            <span class="c-header-inner-2__cta-image" aria-hidden="true"></span>
          </button>
        </div>
        <div class="c-header-inner-2__group-3">
          <button class="c-header-inner-2__cta-2" type="button">lorem</button>
        </div>
        <a class="c-header-inner-2__cta-3" href="#">lorem ipsum</a>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  z-index: 2;
  background-color: #1CB0F6;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-2__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1065px;
  min-height: 70px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
  margin-top: 18px;
}

.c-header-inner-2__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 153px;
  height: 36px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-2__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 70px;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  margin-right: 24px;
}

.c-header-inner-2__cta {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 0;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 17.25px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: filter 0.2s ease;
}

.c-header-inner-2__text {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-2__cta-image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-left: 8px;
}

.c-header-inner-2__group-3 {
  display: block;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.c-header-inner-2__cta-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  padding: 0px 20px;
  position: relative;
  background-color: transparent;
  color: #0B3E71;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  border-top: 0;
  border-right: 0;
  border-bottom: 4px solid transparent;
  border-left: 0;
}

.c-header-inner-2__cta-2::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 83px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #FFFFFF80;
  border-radius: 16px;
  box-shadow: #FFFFFF80 0px 4px 0px 0px;
}

.c-header-inner-2__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 44px;
  position: relative;
  color: #FFFFFF;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: 10px;
  margin-left: 10px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-2__cta-3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 133px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-color: #58CC02;
  color: #58A700;
  border-radius: 16px;
  box-shadow: #58A700 0px 4px 0px 0px;
}

.c-header-inner-2__logo:focus {
  outline: none;
}

.c-header-inner-2__cta:focus {
  outline: none;
}

.c-header-inner-2__cta-2:focus {
  outline: none;
}

.c-header-inner-2__cta-3:focus {
  outline: none;
}

Mobile anatomy

header-inner-2-mobile: the component root, a <header> (.c-header-inner-2-mobile)
header-inner-2-mobile-inner: inner block (.c-header-inner-2-mobile__inner)
header-inner-2-mobile-logo: link (.c-header-inner-2-mobile__logo)
header-inner-2-mobile-logo-image: image placeholder, 153x36px (.c-header-inner-2-mobile__logo-image)
header-inner-2-mobile-group: inner flex row (.c-header-inner-2-mobile__group)
header-inner-2-mobile-group-2: inner block (.c-header-inner-2-mobile__group-2)
header-inner-2-mobile-group-3: inner block (.c-header-inner-2-mobile__group-3)

Mobile recipe

HTML · CSS

<div class="c-header-inner-2-mobile-scope">
  <header class="c-header-inner-2-mobile">
    <div class="c-header-inner-2-mobile__inner">
      <a class="c-header-inner-2-mobile__logo" href="#">
        <span class="c-header-inner-2-mobile__logo-image" aria-hidden="true"></span>
      </a>
      <div class="c-header-inner-2-mobile__group">
        <div class="c-header-inner-2-mobile__group-2">
          <div class="c-header-inner-2-mobile__group-3"></div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: fixed;
  top: 0px;
  z-index: 2;
  background-color: #1CB0F6;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-2-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1065px;
  min-height: 70px;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
  margin-top: 18px;
}

.c-header-inner-2-mobile__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 153px;
  height: 36px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 70px;
}

.c-header-inner-2-mobile__group-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2-mobile__group-3 {
  display: inline-block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin-top: 5px;
}

.c-header-inner-2-mobile__logo:focus {
  outline: none;
}

States

header-inner-2-logo focus: outline none
header-inner-2-cta focus: outline none
header-inner-2-cta-2 focus: outline none
header-inner-2-cta-3 focus: outline none
mobile, header-inner-2-mobile-logo focus: outline none

Header (inner, 3)

Verification: desktop verified against the live page at desktop; mobile verified against the live page at mobile.

Variant observed on https://www.duolingo.com/chess.

Anatomy

header-inner-3: the component root, a <nav> (.c-header-inner-3)
header-inner-3-logo: link (.c-header-inner-3__logo)
header-inner-3-logo-image: image placeholder, 144x42px (.c-header-inner-3__logo-image)
header-inner-3-group: inner block (.c-header-inner-3__group)
header-inner-3-button: button (.c-header-inner-3__button)
header-inner-3-text: label text, 0 characters (.c-header-inner-3__text)
header-inner-3-text-2: label text, 14 characters (.c-header-inner-3__text-2, 2 instances)
header-inner-3-button-image: image placeholder, 14px (.c-header-inner-3__button-image)

Desktop recipe

HTML · CSS

<div class="c-header-inner-3-scope">
  <nav class="c-header-inner-3">
    <a class="c-header-inner-3__logo" href="#">
      <span class="c-header-inner-3__logo-image" aria-hidden="true"></span>
    </a>
    <div class="c-header-inner-3__group">
      <button class="c-header-inner-3__button" type="button">
        <span class="c-header-inner-3__text">
          <span class="c-header-inner-3__text-2">lorem ipsum do</span>
          <span class="c-header-inner-3__text-2">lorem i</span>
        </span>
        <span class="c-header-inner-3__button-image" aria-hidden="true"></span>
      </button>
    </div>
  </nav>
</div>

.c-header-inner-3-scope {
  background-color: #00CD9C1A;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 1065px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.c-header-inner-3__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-3__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 144px;
  height: 42px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-3__group {
  display: block;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}

.c-header-inner-3__button {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #AFAFAF;
  border: 0;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 17.25px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: filter 0.2s ease;
}

.c-header-inner-3__text {
  display: block;
  box-sizing: border-box;
}

.c-header-inner-3__button-image {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-left: 8px;
}

.c-header-inner-3__logo:focus {
  outline: none;
}

.c-header-inner-3__button:focus {
  outline: none;
}

Mobile anatomy

header-inner-3-mobile: the component root, a <nav> (.c-header-inner-3-mobile)
header-inner-3-mobile-logo: link (.c-header-inner-3-mobile__logo)
header-inner-3-mobile-logo-image: image placeholder, 144x42px (.c-header-inner-3-mobile__logo-image)

Mobile recipe

HTML · CSS

<div class="c-header-inner-3-mobile-scope">
  <nav class="c-header-inner-3-mobile">
    <a class="c-header-inner-3-mobile__logo" href="#">
      <span class="c-header-inner-3-mobile__logo-image" aria-hidden="true"></span>
    </a>
  </nav>
</div>

.c-header-inner-3-mobile-scope {
  background-color: #00CD9C1A;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-3-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 20px 24px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-3-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-3-mobile__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 144px;
  height: 42px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-3-mobile__logo:focus {
  outline: none;
}

States

header-inner-3-logo focus: outline none
header-inner-3-button focus: outline none
mobile, header-inner-3-mobile-logo focus: outline none

Header (inner, 4)

Verification: desktop flagged, the render matched 86% of the original pixels, below the 96% required after 2 correction attempts; mobile flagged, the render matched 95% of the original pixels, below the 96% required after 2 correction attempts.

Variant observed on https://www.duolingo.com/business.

Anatomy

header-inner-4: the component root, a <header> (.c-header-inner-4)
header-inner-4-inner: inner flex row (.c-header-inner-4__inner)
header-inner-4-group: inner block (.c-header-inner-4__group)
header-inner-4-logo: link (.c-header-inner-4__logo)
header-inner-4-logo-image: image placeholder, 250x35px (.c-header-inner-4__logo-image)
header-inner-4-cta: link, 11-character label (.c-header-inner-4__cta)

Desktop recipe

HTML · CSS

<div class="c-header-inner-4-scope">
  <header class="c-header-inner-4">
    <div class="c-header-inner-4__inner">
      <div class="c-header-inner-4__group">
        <a class="c-header-inner-4__logo" href="#">
          <span class="c-header-inner-4__logo-image" aria-hidden="true"></span>
        </a>
      </div>
      <a class="c-header-inner-4__cta" href="#">lorem ipsum</a>
    </div>
  </header>
</div>

.c-header-inner-4-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 80px;
  position: sticky;
  top: 0px;
  z-index: 210;
  background-color: #58CC02;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-4__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1500px;
  padding-right: 32px;
  padding-left: 32px;
}

.c-header-inner-4__group {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-inner-4__logo {
  display: inline;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-4__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 250px;
  height: 35px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-4__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 50px;
  min-width: 275px;
  position: relative;
  color: #58CC02;
  border-radius: 16px;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
  white-space: nowrap;
  padding-right: 16px;
  padding-left: 16px;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-bottom-color: transparent;
}

.c-header-inner-4__cta::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 275px;
  height: 46px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background-color: #FFFFFF;
  color: #FFFFFFCC;
  border-radius: 16px;
  box-shadow: #FFFFFFCC 0px 4px 0px 0px;
}

.c-header-inner-4__logo:focus {
  outline: none;
}

Mobile anatomy

header-inner-4-mobile: the component root, a <header> (.c-header-inner-4-mobile)
header-inner-4-mobile-inner: inner flex column (.c-header-inner-4-mobile__inner)
header-inner-4-mobile-group: inner block (.c-header-inner-4-mobile__group)
header-inner-4-mobile-logo: link (.c-header-inner-4-mobile__logo)
header-inner-4-mobile-logo-image: image placeholder, 250x35px (.c-header-inner-4-mobile__logo-image)

Mobile recipe

HTML · CSS

<div class="c-header-inner-4-mobile-scope">
  <header class="c-header-inner-4-mobile">
    <div class="c-header-inner-4-mobile__inner">
      <div class="c-header-inner-4-mobile__group">
        <a class="c-header-inner-4-mobile__logo" href="#">
          <span class="c-header-inner-4-mobile__logo-image" aria-hidden="true"></span>
        </a>
      </div>
    </div>
  </header>
</div>

.c-header-inner-4-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-4-mobile {
  display: flex;
  justify-content: center;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 80px;
  position: sticky;
  top: 0px;
  z-index: 210;
  background-color: #58CC02;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-header-inner-4-mobile__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1500px;
  padding-right: 16px;
  padding-left: 16px;
}

.c-header-inner-4-mobile__group {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-inner-4-mobile__logo {
  display: inline;
  box-sizing: border-box;
  color: #0000EE;
  cursor: pointer;
  text-decoration-line: none;
}

.c-header-inner-4-mobile__logo-image {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 250px;
  height: 35px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-header-inner-4-mobile__logo:focus {
  outline: none;
}

States

header-inner-4-logo focus: outline none
mobile, header-inner-4-mobile-logo focus: outline none

Footers

Verification: desktop flagged, the footer-landing-group height did not reproduce the measured 381px after 2 correction attempts; mobile flagged, the footer-landing-mobile-inner height did not reproduce the measured 378px after 2 correction attempts.

Variant observed on https://www.duolingo.com/.

Anatomy

footer-landing: the component root, a <footer> (.c-footer-landing)
footer-landing-columns: inner grid (.c-footer-landing__columns)
footer-landing-column: inner grid (.c-footer-landing__column, 5 instances)
footer-landing-group: inner block (.c-footer-landing__group, 6 instances)
footer-landing-text: label text, 8 characters (.c-footer-landing__text, 6 instances)
footer-landing-list: inner flex column (.c-footer-landing__list, 6 instances)
footer-landing-item: inner group (.c-footer-landing__item, 35 instances)
footer-landing-link: link, 7-character label (.c-footer-landing__link, 35 instances)
footer-landing-group-2: inner group (.c-footer-landing__group-2)
footer-landing-inner: inner block (.c-footer-landing__inner)
footer-landing-text-2: label text, 14 characters (.c-footer-landing__text-2)
footer-landing-list-2: inner group (.c-footer-landing__list-2), content not captured
footer-landing-item-2: inner group (.c-footer-landing__item-2, 11 instances), content not captured
footer-landing-link-2: link, 7-character label (.c-footer-landing__link-2, 10 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <div class="c-footer-landing__columns">
      <div class="c-footer-landing__column">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ip</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ips</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsu</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-landing__column">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ip</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum do</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-landing__column">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lore</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolo</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-landing__column">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ipsum dolo</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum d</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="c-footer-landing__column">
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem ipsum dolor</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ipsum dolor sit amet consectetur adipi</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing__group">
          <div class="c-footer-landing__text">lorem</div>
          <ul class="c-footer-landing__list">
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lore</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ips</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing__item">
              <a class="c-footer-landing__link" href="#">lorem ip</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing__group-2"></div>
    <div class="c-footer-landing__inner">
      <div class="c-footer-landing__text-2">lorem ipsum do</div>
      <ul class="c-footer-landing__list-2">
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem ip</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem ip</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing__item-2">
          <a class="c-footer-landing__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing__item-2"></li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #58CC02;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-landing__columns {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(5, 178px);
  box-sizing: border-box;
  max-width: 988px;
  padding-top: 96px;
  padding-bottom: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__column {
  display: grid;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-landing__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__text {
  display: block;
  box-sizing: border-box;
  color: #D7FFB8;
  font-size: 19px;
  font-weight: 700;
  line-height: 26.6px;
  margin-bottom: 12px;
}

.c-footer-landing__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing__link {
  display: inline;
  box-sizing: border-box;
  color: #A5ED6E;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-decoration-line: none;
}

.c-footer-landing__group-2 {
  display: block;
  height: 0px;
  color: #808080;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #A5ED6E;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  max-width: 988px;
  padding-top: 40px;
  padding-bottom: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__text-2 {
  display: block;
  box-sizing: border-box;
  color: #D7FFB8;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 16px;
}

.c-footer-landing__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: -8px -12px;
  list-style-type: none;
}

.c-footer-landing__item-2 {
  display: inline-block;
  box-sizing: border-box;
  margin: 8px 12px;
}

.c-footer-landing__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #A5ED6E;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-decoration-line: none;
}

.c-footer-landing__link:focus {
  outline: none;
}

.c-footer-landing__link-2:focus {
  outline: none;
}

Mobile anatomy

footer-landing-mobile: the component root, a <footer> (.c-footer-landing-mobile)
footer-landing-mobile-columns: inner grid (.c-footer-landing-mobile__columns)
footer-landing-mobile-column: inner grid (.c-footer-landing-mobile__column)
footer-landing-mobile-group: inner block (.c-footer-landing-mobile__group, 6 instances)
footer-landing-mobile-text: label text, 8 characters (.c-footer-landing-mobile__text, 6 instances)
footer-landing-mobile-list: inner flex column (.c-footer-landing-mobile__list, 6 instances)
footer-landing-mobile-item: inner group (.c-footer-landing-mobile__item, 35 instances)
footer-landing-mobile-link: link, 7-character label (.c-footer-landing-mobile__link, 35 instances)
footer-landing-mobile-group-2: inner group (.c-footer-landing-mobile__group-2)
footer-landing-mobile-inner: inner block (.c-footer-landing-mobile__inner)
footer-landing-mobile-text-2: label text, 14 characters (.c-footer-landing-mobile__text-2)
footer-landing-mobile-list-2: inner group (.c-footer-landing-mobile__list-2), content not captured
footer-landing-mobile-item-2: inner group (.c-footer-landing-mobile__item-2, 13 instances), content not captured
footer-landing-mobile-link-2: link, 7-character label (.c-footer-landing-mobile__link-2, 12 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <div class="c-footer-landing-mobile__columns">
      <div class="c-footer-landing-mobile__column">
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ip</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ips</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsu</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ip</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ip</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor sit</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor sit</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum do</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor s</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lore</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolo</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ipsum dolo</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum d</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor sit amet</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem ipsum dolor</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor si</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ipsum dolor sit amet consectetur adipi</a>
            </li>
          </ul>
        </div>
        <div class="c-footer-landing-mobile__group">
          <div class="c-footer-landing-mobile__text">lorem</div>
          <ul class="c-footer-landing-mobile__list">
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lore</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ips</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem i</a>
            </li>
            <li class="c-footer-landing-mobile__item">
              <a class="c-footer-landing-mobile__link" href="#">lorem ip</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="c-footer-landing-mobile__group-2"></div>
    <div class="c-footer-landing-mobile__inner">
      <div class="c-footer-landing-mobile__text-2">lorem ipsum do</div>
      <ul class="c-footer-landing-mobile__list-2">
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem ip</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem i</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem ip</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem ipsum dolo</a>
        </li>
        <li class="c-footer-landing-mobile__item-2">
          <a class="c-footer-landing-mobile__link-2" href="#">lorem ip</a>
        </li>
        <li class="c-footer-landing-mobile__item-2"></li>
      </ul>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-landing-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #58CC02;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-landing-mobile__columns {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0px, 216px);
  box-sizing: border-box;
  max-width: 375px;
  padding: 96px 32px 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__column {
  display: grid;
  gap: 32px;
  box-sizing: border-box;
}

.c-footer-landing-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing-mobile__text {
  display: block;
  box-sizing: border-box;
  color: #D7FFB8;
  font-size: 19px;
  font-weight: 700;
  line-height: 26.6px;
  margin-bottom: 12px;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-landing-mobile__link {
  display: inline;
  box-sizing: border-box;
  color: #A5ED6E;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-decoration-line: none;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  height: 0px;
  color: #808080;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #A5ED6E;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 375px;
  padding: 40px 32px 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__text-2 {
  display: block;
  box-sizing: border-box;
  color: #D7FFB8;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 16px;
}

.c-footer-landing-mobile__list-2 {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: -8px -12px;
  list-style-type: none;
}

.c-footer-landing-mobile__item-2 {
  display: inline-block;
  box-sizing: border-box;
  margin: 8px 12px;
}

.c-footer-landing-mobile__link-2 {
  display: inline;
  box-sizing: border-box;
  color: #A5ED6E;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  text-decoration-line: none;
}

.c-footer-landing-mobile__link:focus {
  outline: none;
}

.c-footer-landing-mobile__link-2:focus {
  outline: none;
}

States

footer-landing-link focus: outline none
footer-landing-link-2 focus: outline none
mobile, footer-landing-mobile-link focus: outline none
mobile, footer-landing-mobile-link-2 focus: outline none

Verification: desktop verified against the live page at desktop; mobile flagged, the footer-inner-mobile height did not reproduce the measured 116px after 2 correction attempts.

Variant observed on https://www.duolingo.com/efficacy.

Anatomy

footer-inner: the component root, a <footer> (.c-footer-inner)
footer-inner-inner: inner block (.c-footer-inner__inner)
footer-inner-nav: inner flex row (.c-footer-inner__nav)
footer-inner-nav-link: link, 8-character label (.c-footer-inner__nav-link, 8 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <div class="c-footer-inner__inner">
      <nav class="c-footer-inner__nav">
        <a class="c-footer-inner__nav-link" href="#">lorem ip</a>
        <a class="c-footer-inner__nav-link" href="#">lorem</a>
        <a class="c-footer-inner__nav-link" href="#">lorem i</a>
        <a class="c-footer-inner__nav-link" href="#">lore</a>
        <a class="c-footer-inner__nav-link" href="#">lorem ips</a>
        <a class="c-footer-inner__nav-link" href="#">lore</a>
        <a class="c-footer-inner__nav-link" href="#">lorem</a>
        <a class="c-footer-inner__nav-link" href="#">lorem i</a>
      </nav>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 30px 25px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #E5E5E5;
}

.c-footer-inner__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1048px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: -12px;
  color: #AFAFAF;
}

.c-footer-inner__nav-link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #AFAFAF;
  opacity: 0.8;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner__nav-link:hover {
  opacity: 1;
}

.c-footer-inner__nav-link:focus {
  outline: none;
}

Mobile anatomy

footer-inner-mobile: the component root, a <footer> (.c-footer-inner-mobile)
footer-inner-mobile-inner: inner block (.c-footer-inner-mobile__inner)
footer-inner-mobile-nav: inner flex row (.c-footer-inner-mobile__nav)
footer-inner-mobile-nav-link: link, 8-character label (.c-footer-inner-mobile__nav-link, 8 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__inner">
      <nav class="c-footer-inner-mobile__nav">
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem ip</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem i</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lore</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem ips</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lore</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
        <a class="c-footer-inner-mobile__nav-link" href="#">lorem i</a>
      </nav>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 30px 25px;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #E5E5E5;
}

.c-footer-inner-mobile__inner {
  display: block;
  box-sizing: border-box;
  max-width: 1048px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: -12px;
  color: #AFAFAF;
}

.c-footer-inner-mobile__nav-link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #AFAFAF;
  opacity: 0.8;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner-mobile__nav-link:hover {
  opacity: 1;
}

.c-footer-inner-mobile__nav-link:focus {
  outline: none;
}

States

footer-inner-nav-link hover: opacity 1
footer-inner-nav-link focus: outline none
mobile, footer-inner-mobile-nav-link hover: opacity 1
mobile, footer-inner-mobile-nav-link focus: outline none

Verification: desktop flagged, the footer-inner-2 height did not reproduce the measured 79px after 2 correction attempts; mobile verified against the live page at mobile.

Variant observed on https://www.duolingo.com/chess.

Anatomy

footer-inner-2: the component root, a <footer> (.c-footer-inner-2)
footer-inner-2-nav: inner flex row (.c-footer-inner-2__nav)
footer-inner-2-nav-link: link, 8-character label (.c-footer-inner-2__nav-link, 8 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-2-scope">
  <footer class="c-footer-inner-2">
    <nav class="c-footer-inner-2__nav">
      <a class="c-footer-inner-2__nav-link" href="#">lorem ip</a>
      <a class="c-footer-inner-2__nav-link" href="#">lorem</a>
      <a class="c-footer-inner-2__nav-link" href="#">lorem i</a>
      <a class="c-footer-inner-2__nav-link" href="#">lore</a>
      <a class="c-footer-inner-2__nav-link" href="#">lorem ips</a>
      <a class="c-footer-inner-2__nav-link" href="#">lore</a>
      <a class="c-footer-inner-2__nav-link" href="#">lorem</a>
      <a class="c-footer-inner-2__nav-link" href="#">lorem i</a>
    </nav>
  </footer>
</div>

.c-footer-inner-2-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-2 {
  display: inline-flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px 16px;
  color: #AFAFAF;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-2__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: -12px;
}

.c-footer-inner-2__nav-link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #AFAFAF;
  opacity: 0.8;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner-2__nav-link:hover {
  opacity: 1;
}

.c-footer-inner-2__nav-link:focus {
  outline: none;
}

Mobile anatomy

footer-inner-2-mobile: the component root, a <footer> (.c-footer-inner-2-mobile)
footer-inner-2-mobile-nav: inner flex row (.c-footer-inner-2-mobile__nav)
footer-inner-2-mobile-nav-link: link, 8-character label (.c-footer-inner-2-mobile__nav-link, 8 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-2-mobile-scope">
  <footer class="c-footer-inner-2-mobile">
    <nav class="c-footer-inner-2-mobile__nav">
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem ip</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem i</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lore</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem ips</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lore</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem</a>
      <a class="c-footer-inner-2-mobile__nav-link" href="#">lorem i</a>
    </nav>
  </footer>
</div>

.c-footer-inner-2-mobile-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-2-mobile {
  display: inline-flex;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 32px 16px;
  color: #AFAFAF;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-2-mobile__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  margin: -12px;
}

.c-footer-inner-2-mobile__nav-link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #AFAFAF;
  opacity: 0.8;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner-2-mobile__nav-link:hover {
  opacity: 1;
}

.c-footer-inner-2-mobile__nav-link:focus {
  outline: none;
}

States

footer-inner-2-nav-link hover: opacity 1
footer-inner-2-nav-link focus: outline none
mobile, footer-inner-2-mobile-nav-link hover: opacity 1
mobile, footer-inner-2-mobile-nav-link focus: outline none

Verification: desktop flagged, the footer-inner-3 height did not reproduce the measured 39px after 2 correction attempts; mobile verified against the live page at mobile.

Variant observed on https://www.duolingo.com/business.

Anatomy

footer-inner-3: the component root, a <nav> (.c-footer-inner-3)
footer-inner-3-link: link, 8-character label (.c-footer-inner-3__link, 8 instances)

Desktop recipe

HTML · CSS

<div class="c-footer-inner-3-scope">
  <nav class="c-footer-inner-3">
    <a class="c-footer-inner-3__link" href="#">lorem ip</a>
    <a class="c-footer-inner-3__link" href="#">lorem</a>
    <a class="c-footer-inner-3__link" href="#">lorem i</a>
    <a class="c-footer-inner-3__link" href="#">lore</a>
    <a class="c-footer-inner-3__link" href="#">lorem ips</a>
    <a class="c-footer-inner-3__link" href="#">lore</a>
    <a class="c-footer-inner-3__link" href="#">lorem</a>
    <a class="c-footer-inner-3__link" href="#">lorem i</a>
  </nav>
</div>

.c-footer-inner-3-scope {
  background-color: #58CC02;
  color: #FFFFFF;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-3 {
  display: flex;
  flex-wrap: wrap;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}

.c-footer-inner-3__link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner-3__link:focus {
  outline: none;
}

Mobile anatomy

footer-inner-3-mobile: the component root, a <nav> (.c-footer-inner-3-mobile)
footer-inner-3-mobile-link: link, 8-character label (.c-footer-inner-3-mobile__link, 8 instances)

Mobile recipe

HTML · CSS

<div class="c-footer-inner-3-mobile-scope">
  <nav class="c-footer-inner-3-mobile">
    <a class="c-footer-inner-3-mobile__link" href="#">lorem ip</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lorem</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lorem i</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lore</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lorem ips</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lore</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lorem</a>
    <a class="c-footer-inner-3-mobile__link" href="#">lorem i</a>
  </nav>
</div>

.c-footer-inner-3-mobile-scope {
  background-color: #58CC02;
  color: #FFFFFF;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-inner-3-mobile {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FFFFFF;
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
}

.c-footer-inner-3-mobile__link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

.c-footer-inner-3-mobile__link:focus {
  outline: none;
}

States

footer-inner-3-link focus: outline none
mobile, footer-inner-3-mobile-link focus: outline none

Verification: verified against the live page at desktop.

Anatomy

footer-navigation: the component root, a <nav> (.c-footer-navigation)
footer-navigation-link: link, 8-character label (.c-footer-navigation__link, 8 instances)

Recipe

HTML · CSS

<div class="c-footer-navigation-scope">
  <nav class="c-footer-navigation">
    <a class="c-footer-navigation__link" href="#">lorem ip</a>
    <a class="c-footer-navigation__link" href="#">lorem</a>
    <a class="c-footer-navigation__link" href="#">lorem i</a>
    <a class="c-footer-navigation__link" href="#">lore</a>
    <a class="c-footer-navigation__link" href="#">lorem ips</a>
    <a class="c-footer-navigation__link" href="#">lore</a>
    <a class="c-footer-navigation__link" href="#">lorem</a>
    <a class="c-footer-navigation__link" href="#">lorem i</a>
  </nav>
</div>

.c-footer-navigation-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #AFAFAF;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-footer-navigation__link {
  display: block;
  box-sizing: border-box;
  margin: 12px;
  color: #AFAFAF;
  opacity: 0.8;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration-line: none;
}

States

No hover or focus change was observed.

Accordion

Verification: verified against the live page at desktop.

Anatomy

accordion: the component root, a <div> (.c-accordion)
accordion-group: inner flex row (.c-accordion__group)
accordion-title: heading, 26 characters (.c-accordion__title)
accordion-media: image placeholder, 24px (.c-accordion__media)
accordion-group-2: inner group (.c-accordion__group-2)

Recipe

HTML · CSS

<div class="c-accordion-scope">
  <div class="c-accordion">
    <div class="c-accordion__group">
      <h3 class="c-accordion__title">lorem ipsum dolor sit amet</h3>
      <span class="c-accordion__media" aria-hidden="true"></span>
    </div>
    <div class="c-accordion__group-2"></div>
  </div>
</div>

.c-accordion-scope {
  background-color: #FFFFFF;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-accordion {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #3C3C3C;
  cursor: pointer;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-accordion__group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 32px;
}

.c-accordion__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #4B4B4B;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
}

.c-accordion__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-accordion__group-2 {
  display: block;
  height: 2px;
  background-color: #E5E5E5;
  color: #808080;
}

States

No hover or focus change was observed.

Language selector (2)

Verification: verified against the live page at desktop.

Anatomy

language-selector-2: the component root, a <button> (.c-language-selector-2)
language-selector-2-text: label text, 0 characters (.c-language-selector-2__text)
language-selector-2-text-2: label text, 14 characters (.c-language-selector-2__text-2, 2 instances)
language-selector-2-media: image placeholder, 14px (.c-language-selector-2__media)

Recipe

HTML · CSS

<div class="c-language-selector-2-scope">
  <button class="c-language-selector-2" type="button">
    <span class="c-language-selector-2__text">
      <span class="c-language-selector-2__text-2">lorem ipsum do</span>
      <span class="c-language-selector-2__text-2">lorem i</span>
    </span>
    <span class="c-language-selector-2__media" aria-hidden="true"></span>
  </button>
</div>

.c-language-selector-2-scope {
  background-color: #00CD9C1A;
  color: #3C3C3C;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
}

.c-language-selector-2 {
  display: flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #AFAFAF;
  border: 0;
  cursor: pointer;
  transform: matrix(1, 0, 0, 1, 0, 0);
  font-family: duolingo-sans, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 17.25px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  appearance: button;
  transition: filter 0.2s ease;
}

.c-language-selector-2__text {
  display: block;
  box-sizing: border-box;
}

.c-language-selector-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
  margin-left: 8px;
}

.c-language-selector-2:focus {
  outline: none;
}

States

focus: outline none

Input

Verification: flagged, the render matched 94% of the original pixels, below the 97% required after 2 correction attempts.

Anatomy

input: the component root, a <input> (.c-input), 3-character placeholder

Recipe

HTML · CSS

<div class="c-input-scope">
  <input class="c-input" type="text" placeholder="lor">
</div>

.c-input-scope {
  background-color: #FFFFFF;
  color: #777777;
  font-family: duolingo-sans, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 34px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 333px;
  height: 16px;
  padding: 0px;
  background-color: #E5E5E5;
  color: #101010;
  border: 0;
  border-radius: 8px;
  cursor: default;
  font-family: duolingo-sans, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 28.75px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  appearance: none;
}

.c-input:focus {
  outline: none;
}

States

focus: outline none

Step list item

Verification: flagged, the render came out 13 px taller than the original (instance 3) after 2 correction attempts.

Anatomy

Group: 4 instances in a 1-column grid, 16px gap; the recipe carries the values they all share
step-list-item: the component root, a <div> (.c-step-list-item)
step-list-item-text: label text, 7 characters (.c-step-list-item__text)
step-list-item-text-2: label text, 74 characters (.c-step-list-item__text-2)

Recipe

HTML · CSS

<div class="c-step-list-item-scope">
  <div class="c-step-list-item">
    <div class="c-step-list-item__text">lorem i</div>
    <div class="c-step-list-item__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod temp</div>
  </div>
</div>

.c-step-list-item-scope {
  background-color: #FFFFFF;
  color: #4B4B4B;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
}

.c-step-list-item {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #4B4B4B;
  cursor: default;
  font-family: duolingo-sans, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  text-align: left;
}

.c-step-list-item__text {
  display: block;
  box-sizing: border-box;
  color: #58CC02;
  font-size: 25px;
  font-weight: 700;
  line-height: 34px;
}

.c-step-list-item__text-2 {
  display: block;
  box-sizing: border-box;
  color: #777777;
}

.c-step-list-item:hover {
  transform-origin: 229.5px 42px;
}

.c-step-list-item:focus {
  transform-origin: 229.5px 42px;
}

States

hover: transform-origin 229.5px 42px
focus: transform-origin 229.5px 42px

Do's and Don'ts

Do

Do reserve Feather Green (primary, #58CC02) for brand moments. The site uses it for the solid CTA, green headlines (card-title, step-list-item-text), the green header variant (header-inner-4) and the full footer field (footer-landing).
Do build depth with a thicker bottom border, as card-3 does with 2px sides and a 4px bottom in hairline #E5E5E5, and as button-ghost-3 does with 1px sides and a 5px bottom.
Do stick to the three radii: rounded.lg (16px) for cards and large buttons (card-3, card-5, button-secondary, button-ghost-3), rounded.md (12px) for compact buttons and badges (button-ghost, app-store-badge), and rounded.sm (8px) for inputs.
Do keep the two-typeface split: Feather only for hero-display, display-lg and display-md; Duolingo Sans for everything else.
Do set every interactive label in button, nav-link or label-caps (15px, 700, 0.8px tracking), or in button-lg (16px, 700, 0.64px) for larger buttons.
Do keep the observed button heights in the touch-friendly range: button-ghost 50px, button-ghost-3 48px, button-secondary 44px.
Do separate sections with the section-padding-y rhythm (96px) and cap content at footer-inner-inner-max-width (1048px).
Do place footer links in primary-light #A5ED6E and footer headings in primary-tint #D7FFB8 when they sit on the green footer field.

Don't

Don't introduce new radius values beyond rounded.sm, rounded.md and rounded.lg, and don't turn buttons into pills.
Don't add weights other than 500 and 700. There is no light, regular or black weight in the system.
Don't add soft or blurred drop shadows. The only measured shadow is the spread-only teal wash rgba(0, 205, 156, 0.1) 0px 0px 0px 1440px, and it is a tint, not a lift.
Don't set body copy in primary or secondary. Body copy belongs in ink #3C3C3C, ink-strong #4B4B4B or muted #777777.
Don't use link (#0000EE) as a visible color. It is a browser default measured on logo anchors; visible links use secondary #1CB0F6.
Don't use Feather below headline scale or with positive tracking. Its negative letter-spacing is part of its look.
Don't introduce a third typeface or a new accent hue. tertiary, accent-orange and navy are already spot colors.

Responsive Behavior

This analysis is based on two viewports only (desktop and mobile). No intermediate breakpoint values could be observed, so none are stated.

What changes on mobile

Single column. Alternating feature rows collapse into one centered column. Headings center, and illustrations drop beneath their text.
Buttons go full-width. Primary and secondary CTAs stack vertically and stretch to the column width.
Headers simplify.
- The landing header keeps its 70px height (header-landing-mobile), but its logo shrinks from 179px wide (header-landing-logo-image) to 161px (header-landing-mobile-logo-image).
- The inner-page header drops from 70px (header-inner) to 56px (header-inner-mobile) and swaps its links for a 32px menu toggle (header-inner-mobile-menu-toggle).
- The sky-blue course header stays at 70px on both viewports (header-inner-2-mobile).
Footers stack. The green link footer grows from 827px tall on desktop (footer-landing) to 2014px on mobile (footer-landing-mobile) as its columns stack into one. Utility footers grow similarly as their nav wraps: footer-inner-2 goes from 79px to 118px (footer-inner-2-mobile), and footer-inner-3 goes from 39px to 156px (footer-inner-3-mobile).
Type tokens do not change between viewports in the recipes. Footer links stay at 15px/700 on both.

Touch targets

Measured buttons sit in or near the comfortable touch range: button-ghost at 50px, button-ghost-3 at 48px and button-secondary at 44px. Text-only controls are much shorter, such as button-ghost-2 and language-selector-2 at 17px. When they are used on mobile, pad their hit area out to at least the button-secondary height.

Iteration Guide

Reference tokens, never raw hex. Use primary, secondary, ink, ink-strong, muted, muted-light and hairline. If a color you need is not a token, the design does not need it.
Depth is a bottom border. To make something feel raised or pressable, give it a heavier bottom border, following the card-3 pattern (2px sides, 4px bottom, hairline). Never add a blurred box-shadow.
Two faces, two weights. Feather goes only in hero-display, display-lg and display-md. All other text is Duolingo Sans at 500 (body, body-lg) or 700 (everything else). Do not add weights, and do not add a third family.
Labels are stamped. Any button, nav link or tag uses button, nav-link, label-caps or button-lg, so the wide 0.8px / 0.64px tracking carries through.
Radius has three steps. Use rounded.lg for cards and large buttons, rounded.md for compact buttons and badges, and rounded.sm for inputs. Do not add pill or sharp-cornered variants.
Green is reserved. primary fills the CTA, the footer field and celebratory headlines. Inside the footer, use the component greens primary-light and primary-tint for text; do not use them elsewhere.
Keep the rhythm and container. New sections use section-padding-y and sit within footer-inner-inner-max-width. Add sections rather than densifying existing ones.

Known Gaps

Primary CTA fill is not captured. The solid green button and its darker green lower lip are visible in the screenshots, but no recipe measured that button's fill or lip color. Only transparent-border recipes exist (button-ghost, button-secondary, button-ghost-3). The darker green lip shade is therefore not tokenized.
Many recipes did not reproduce exactly. Most component recipes are flagged, including card (flagged: the card-group-2 y did not reproduce the measured 273px after 2 correction attempts), card-5 (flagged: the card-5-group-2 height did not reproduce the measured 105px after 2 correction attempts), input (flagged: the render matched 94% of the original pixels, below the 97% required after 2 correction attempts), header-inner-4 (flagged: the render matched 86% of the original pixels, below the 96% required after 2 correction attempts) and button-secondary (flagged: the render came out 2 px wider than the original after 2 correction attempts). Treat their internal geometry as approximate.
One recipe could not be compared. card-4 (not verifiable: what the page placed in it (photos, media, ads) covers most of it and nothing else differs, so the comparison could not be judged).
Hover and focus states are thin. States were listed but barely measured. The one captured hover, header-landing-cta-hover (text #AFAFAF, radius 0px), looks like an artifact rather than a real design state. Pressed and active states (the lip collapsing on press) were not captured.
Spacing is sparse. Only three spacing values were verified (section-padding-y, footer-inner-inner-max-width, button-ghost-3-padding-x). There is no base step, no card padding token and no grid-gap token.
Responsive coverage is two viewports only. No breakpoint values are known.
Coverage is limited to marketing pages. All five captured pages are marketing surfaces (home, efficacy, courses, chess, business); every capture succeeded and no values were dropped by grounding. The logged-in learning app, lesson UI, gamification components, modals and the full sign-up flow were not reached.
Animation and motion were not captured. Lottie or mascot animations, scroll effects and button press transitions are unknown.
The link token (#0000EE) is a browser default read from logo anchors, not an intentional brand color.

Bu DESIGN.md dosyası, AI kodlama ajanlarının onu okuduğu dil olan İngilizcedir.

Duolingo - The world’s most popular way to learn web sitesinin herkese açık sayfalarından çıkarıldı, resmi marka yönergeleri değildir. Başka bir sitenin fontlarını kontrol et

Benzerleri

Tümüne göz at

Yardımcı ve Günlük Araçlar · Browser Extensions & Small Utilities

Apple

CSSOM frekans analizinden, LLM yorumu yapılmadan çıkarılmış tasarım token'ları.

Seyahat, Ulaşım ve Lojistik

Airbnb

Airbnb'nin tasarım sistemi, tek bir özel değişken yazı tipi (Airbnb Cereal VF) etrafında kurulmuş. Renk paleti neredeyse tek renkli; derin kömür grisi (#222222) ve açık gri tonlar bu paletin omurgasını oluşturuyor. Markanın imza rengi olan "Rausch" mercan-pembesi (#ff385c) yalnızca birincil eylem düğmeleri ve logo için ayrılmış. Yerleşim, geniş görsel-metin oranlarına sahip, duyarlı bir fotoğraf kartı ızgarası. Kartlarda 20px yumuşak köşe yuvarlaması var; sert bir kontrast yaratmadan ince bir derinlik veren çok katmanlı ortam gölge sistemi kullanılıyor. Arama çubuğu, temel kullanıcı eylemini bir araya getiren, dikkat çekici hap şeklinde bir kapsayıcı.

Ticaret ve Perakende · E-commerce Store

IKEA

IKEA'nın küresel ana sayfası, birincil eylem yüzeyi olarak ikonik IKEA Sarısı'nı (#ffdb00) ve marka logosundaki vurgu rengi olarak IKEA Mavisi'ni (#0058a3) kullanan, cesur ve düz bir tasarım sistemine dayanıyor. Tüm tipografik sistem, 14px gövde metninden 51px görüntü başlıklarına uzanan sıkı tanımlı bir ölçek üzerinde, 400 ve 700 ağırlıklarını kapsayan tek bir özel yazı tipi olan Noto IKEA üzerine kurulu. Yükseklik hissi gölge yerine tamamen renk kontrastı ve yerleşim yapısıyla sağlanıyor. Düzen, 90rem maksimum genişlikli bir kapsayıcı ve masaüstünde 1.5rem ızgara boşluğu kullanıyor; etkileşimli öğelerde tutarlı şekilde 8px köşe yarıçapı tokenı uygulanıyor. Saf #111111 metin rengiyle buluşan #fffefb kırık beyaz arka plan sıcaklık katarak yüksek kontrastlı ve erişilebilir bir okuma deneyimi yaratıyor.

Yazılım ve SaaS · Productivity & Notes

Notion

Notion'ın pazarlama ana sayfası, koyu lacivert (#02093a) bir kahraman bölümünü açık (#f6f5f4) bir gövdeyle birleştirir ve tüm metin rolleri için özel bir yazı tipi (NotionInter) kullanır. Tasarım, 28px oluklu 12 sütunlu bir ızgara, kartlar için 8px ve haplar için 9999px olmak üzere çift köşe yarıçapı dili ve yüzen arayüz öğeleri için çok katmanlı kademeli bir gölge sistemi kullanır. Marka mavisi (#2537b1) CTA'ları ve vurgu noktalarını yönlendirir; anlamsal gri tonları basamağı (gray-200'den gray-900'e) tüm metin ve yüzey hiyerarşisini düzenler.

Geliştirici ve Altyapı · Developer Tools & IDEs

Railway

Railway'in tasarım sistemi, derin, neredeyse siyah lacivert yüzeylere (#13111c, #0b0b0f) dayanan, karanlık temalı öncelikli bir geliştirici platformu arayüzüdür. Yüksek kontrastlı kırık beyaz metin (#f7f7f8) ve belirgin bir mor marka vurgusu (#853bce / #553f83) kullanır. Kahraman bölümünde editoryal bir ağırlık için IBM Plex Serif kullanılır; tüm arayüz metinleri Inter ile yazılır, kod alanlarında ise JetBrains Mono ve SF Mono tercih edilir. Yükseklik hissi gölge yerine, rgba(255,255,255,0.2) 1.5px inset beyaz parıltılı kenarlıklarla sağlanır; bu da arayüze cam panel estetiği kazandırır. Boşluk sistemi 4px temellidir ve 8/12/16/24/32 ritmiyle sıkı bir düzen izler. Köşe yuvarlaklıkları dar tutulur: baskın olan 4px'tir, kartlar ve kahraman kapsayıcılarında ise seçici olarak 8px ve 16px kullanılır.

İş ve Profesyonel Hizmetler

Shopify

Shopify'ın pazarlama ana sayfası, üstteki beyaz gezinme çubuğuyla keskin bir kontrast oluşturan, tam genişlikte ve dramatik bir video kahraman alanına sahip. Arka plan neredeyse siyah (#02090a). Birincil marka vurgusu canlı bir nane yeşili (#36f4a4) ve bu renk vurgulamalarda ve etkileşimli durumlarda ölçülü biçimde kullanılıyor. Tipografi, görünen başlık ve editoryal metinler için NeueHaasGrotesk, arayüz gövde metinleri için ise Inter-Variable arasında bölünmüş. Eylem çağrıları (CTA) tamamen yuvarlatılmış hap şeklinde (border-radius: 9999px). Genel sistem özgüven veren, yüksek kontrastlı ve ilham verici; ziyaretçileri satıcıya dönüştürmek üzere tasarlanmış.

Duolingo - The world’s most popular way to learn Tasarım Sistemi

Bileşenler

Buttons4

Cards5

Extras7

Headers10

Footers8

Input1

Overview

Colors

Brand & Accent

Surface

Text

Hairlines & Borders

Component Colors (footer only)

Typography

Font Family

Hierarchy

Principles

Note on Font Substitutes

Layout

Spacing System

Grid & Container

Whitespace Philosophy

Measured Layout

Elevation & Depth

Shapes

Border Radius Scale

Components

Buttons

Cards

Language tabs

App store badge

Headers

Footers

Footer navigation

Accordion

Language selector (2)

Input

Step list item

Do's and Don'ts

Do

Don't

Responsive Behavior

What changes on mobile

Touch targets

Iteration Guide

Known Gaps

Benzerleri

Apple

Airbnb

IKEA

Notion

Railway

Shopify