Design system Duolingo - The world’s most popular way to learn

duolingo.com

PROSilnik v4

Tokeny projektowe wyodrębnione z analizy częstotliwości CSSOM bez interpretacji przez LLM.

System wizualny

100% pewność

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% pewność

button-ghost-3-padding-x
11px

section-padding-y
96px

footer-inner-inner-max-width
1048px

100% pewność

sm · 8px

md · 12px

lg · 16px

Komponenty

Buttons4

100% zgodność

ghost · desktop

Label y: 16px, na stronie 14px; Label height: 17px, na stronie 21px.

SpoczynekZgodność 100%Różne pomiary: 2 z 27

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 40

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginał

Render

Receptura w DESIGN.md

100% zgodność

ghost · desktop

SpoczynekZgodność 100%Zgodne pomiary: 28

Oryginał

Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginał

Render

Receptura w DESIGN.md

98% zgodność

secondary · desktop

Zgodność renderu ze stroną to 98%, poniżej progu 97%.

SpoczynekZgodność 98%Zgodne pomiary: 22

Oryginał

Render

FocusZgodność 98%Zgodne pomiary: 19

Oryginał

Render

Receptura w DESIGN.md

Cards5

100% zgodność

desktop

Group 2 y: 259px, na stronie 273px; Group 2 height: 92px, na stronie 68px i jeszcze 4.

SpoczynekZgodność 100%Różne pomiary: 6 z 153

Oryginalny Card na stronie, spoczynek — Oryginał

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card na stronie, hover — Oryginał

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Card na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Różne pomiary: 6 z 153

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Różne pomiary: 6 z 153

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Różne pomiary: 6 z 153

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Group y: 139px, na stronie 0px; Link y: 139px, na stronie 0px i jeszcze 1.

SpoczynekZgodność 100%Różne pomiary: 3 z 97

Oryginalny Card (2) na stronie, spoczynek — Oryginał

Osobny render: Card (2), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card (2) na stronie, hover — Oryginał

FocusZgodność 100%Różne pomiary: 2 z 18

Oryginalny Card (2) na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Różne pomiary: 3 z 97

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Różne pomiary: 3 z 97

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Różne pomiary: 3 z 97

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 5Zgodność 100%Różne pomiary: 3 z 97

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 104

Oryginalny Card (3) na stronie, spoczynek — Oryginał

Osobny render: Card (3), spoczynek — Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginalny Card (3) na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 104

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 104

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 104

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 5Zgodność 100%Zgodne pomiary: 104

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 6Zgodność 100%Zgodne pomiary: 104

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Nie do sprawdzenia

desktop

Nie do sprawdzenia: zdjęcia, multimedia lub reklamy umieszczone w nim przez stronę zakrywają większość elementu, a poza tym nic się nie różni, więc porównanie nic nie mówi o recepturze.

SpoczynekZgodność 99%Zgodne pomiary: 121

Oryginalny Card (4) na stronie, spoczynek — Oryginał

Osobny render: Card (4), spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Card (4) na stronie, hover — Oryginał

FocusZgodność 99%Zgodne pomiary: 18

Oryginalny Card (4) na stronie, focus — Oryginał

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 121

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 99%Zgodne pomiary: 121

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 121

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Group 2 height: 80px, na stronie 105px; Text 3 height: 50px, na stronie 75px.

SpoczynekZgodność 100%Różne pomiary: 2 z 164

Oryginalny Card (5) na stronie, spoczynek — Oryginał

Osobny render: Card (5), spoczynek — Render

Spoczynek, wystąpienie 2Zgodność 100%Różne pomiary: 2 z 164

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Różne pomiary: 2 z 164

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Extras7

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 94

Oryginalny Accordion na stronie, spoczynek — Oryginał

Osobny render: Accordion, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

Icon x: -9px, na stronie 16px.

SpoczynekZgodność 100%Różne pomiary: 1 z 102

Oryginalny App store badge na stronie, spoczynek — Oryginał

Osobny render: App store badge, spoczynek — Render

FocusZgodność 100%Zgodne pomiary: 22

Oryginalny App store badge na stronie, focus — Oryginał

Osobny render: App store badge, focus — Render

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 182

Oryginalny Footer navigation na stronie, spoczynek — Oryginał

Osobny render: Footer navigation, spoczynek — Render

Receptura w DESIGN.md

Niesprawdzony

desktop

Nie utworzono receptury: nie znaleziono elementu na stronie.

Dla tego komponentu nic nie zostało porównane.

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 40

Oryginalny Language selector (2) na stronie, spoczynek — Oryginał

Osobny render: Language selector (2), spoczynek — Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Language selector (2) na stronie, focus — Oryginał

Osobny render: Language selector (2), focus — Render

Receptura w DESIGN.md

100% zgodność

desktop

Group width: 1016px, na stronie 1002px; List width: 1016px, na stronie 1002px.

SpoczynekZgodność 100%Różne pomiary: 2 z 496

Oryginalny Language tabs na stronie, spoczynek — Oryginał

Osobny render: Language tabs, spoczynek — Render

Receptura w DESIGN.md

100% zgodność

desktop

Zgodność renderu ze stroną to 100%, poniżej progu 96%.

SpoczynekZgodność 100%Zgodne pomiary: 24

Oryginalny Step list item na stronie, spoczynek — Oryginał

Osobny render: Step list item, spoczynek — Render

HoverZgodność 100%Zgodne pomiary: 18

Oryginalny Step list item na stronie, hover — Oryginał

Osobny render: Step list item, hover — Render

FocusZgodność 100%Zgodne pomiary: 18

Oryginalny Step list item na stronie, focus — Oryginał

Osobny render: Step list item, focus — Render

Spoczynek, wystąpienie 2Zgodność 100%Zgodne pomiary: 24

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 3Zgodność 100%Zgodne pomiary: 24

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Spoczynek, wystąpienie 4Zgodność 100%Zgodne pomiary: 24

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Headers10

99% zgodność

desktop

SpoczynekZgodność 99%Zgodne pomiary: 156

Oryginalny Header (inner) na stronie, spoczynek — Oryginał

Osobny render: Header (inner), spoczynek — Render

Focusniesprawdzony

Oryginalny Header (inner) na stronie, focus — Oryginał

Osobny render: Header (inner), focus — Render

Focus na link 2Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na linkZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na logoZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

89% zgodność

desktop

Element główny height: 128px, na stronie 70px; Inner y: 18px, na stronie 0px i jeszcze 12.

SpoczynekZgodność 89%Różne pomiary: 14 z 216

Oryginalny Header (inner, 2) na stronie, spoczynek — Oryginał

Osobny render: Header (inner, 2), spoczynek — Render

Focusniesprawdzony

Oryginalny Header (inner, 2) na stronie, focus — Oryginał

Osobny render: Header (inner, 2), focus — Render

Focus na cta 2Zgodność 89%Zgodne pomiary: 19

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na cta 3Zgodność 89%Zgodne pomiary: 19

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na ctaZgodność 89%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na logoZgodność 89%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 114

Oryginalny Header (inner, 3) na stronie, spoczynek — Oryginał

Osobny render: Header (inner, 3), spoczynek — Render

Focusniesprawdzony

Oryginalny Header (inner, 3) na stronie, focus — Oryginał

Osobny render: Header (inner, 3), focus — Render

Focus na buttonZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

86% zgodność

desktop

Zgodność renderu ze stroną to 86%, poniżej progu 96%.

SpoczynekZgodność 86%Zgodne pomiary: 119

Oryginalny Header (inner, 4) na stronie, spoczynek — Oryginał

Osobny render: Header (inner, 4), spoczynek — Render

Focusniesprawdzony

Oryginalny Header (inner, 4) na stronie, focus — Oryginał

Osobny render: Header (inner, 4), focus — Render

Focus na logoZgodność 86%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

94% zgodność

desktop

Text y: 25px, na stronie 23px; Text height: 17px, na stronie 21px.

SpoczynekZgodność 95%Różne pomiary: 2 z 99

Oryginalny Header (landing) na stronie, spoczynek — Oryginał

Osobny render: Header (landing), spoczynek — Render

Hoverniesprawdzony

Oryginalny Header (landing) na stronie, hover — Oryginał

Osobny render: Header (landing), hover — Render

Focusniesprawdzony

Oryginalny Header (landing) na stronie, focus — Oryginał

Osobny render: Header (landing), focus — Render

Focus na ctaZgodność 95%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na ctaZgodność 94%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na logoZgodność 95%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

93% zgodność

mobile

Element główny height: 128px, na stronie 70px; Inner y: 18px, na stronie 0px i jeszcze 9.

SpoczynekZgodność 93%Różne pomiary: 11 z 145

Focusniesprawdzony

Focus na logoZgodność 93%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

SpoczynekZgodność 100%Zgodne pomiary: 57

Focusniesprawdzony

Focus na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

95% zgodność

mobile

Zgodność renderu ze stroną to 95%, poniżej progu 96%.

SpoczynekZgodność 95%Zgodne pomiary: 101

Focusniesprawdzony

Focus na logoZgodność 95%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

SpoczynekZgodność 100%Zgodne pomiary: 113

Focusniesprawdzony

Focus na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na menu toggleZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

SpoczynekZgodność 100%Zgodne pomiary: 57

Focusniesprawdzony

Focus na logoZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Footers8

100% zgodność

desktop

SpoczynekZgodność 100%Zgodne pomiary: 223

Oryginalny Footer (inner) na stronie, spoczynek — Oryginał

Osobny render: Footer (inner), spoczynek — Render

Hoverniesprawdzony

Oryginalny Footer (inner) na stronie, hover — Oryginał

Osobny render: Footer (inner), hover — Render

Focusniesprawdzony

Oryginalny Footer (inner) na stronie, focus — Oryginał

Osobny render: Footer (inner), focus — Render

Focus na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Element główny height: 118px, na stronie 79px; Nav height: 78px, na stronie 39px i jeszcze 1.

SpoczynekZgodność 100%Różne pomiary: 3 z 201

Oryginalny Footer (inner, 2) na stronie, spoczynek — Oryginał

Osobny render: Footer (inner, 2), spoczynek — Render

Hoverniesprawdzony

Oryginalny Footer (inner, 2) na stronie, hover — Oryginał

Osobny render: Footer (inner, 2), hover — Render

Focusniesprawdzony

Oryginalny Footer (inner, 2) na stronie, focus — Oryginał

Osobny render: Footer (inner, 2), focus — Render

Focus na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

desktop

Element główny height: 78px, na stronie 39px; Link y: 51px, na stronie 12px.

SpoczynekZgodność 100%Różne pomiary: 2 z 182

Oryginalny Footer (inner, 3) na stronie, spoczynek — Oryginał

Osobny render: Footer (inner, 3), spoczynek — Render

Focusniesprawdzony

Oryginalny Footer (inner, 3) na stronie, focus — Oryginał

Osobny render: Footer (inner, 3), focus — Render

Focus na linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

99% zgodność

desktop

Group height: 431px, na stronie 381px; Group height: 431px, na stronie 285px i jeszcze 29.

SpoczynekZgodność 99%Różne pomiary: 31 z 2279

Oryginalny Footer (landing) na stronie, spoczynek — Oryginał

Osobny render: Footer (landing), spoczynek — Render

Focusniesprawdzony

Oryginalny Footer (landing) na stronie, focus — Oryginał

Osobny render: Footer (landing), focus — Render

Focus na link 2Zgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na linkZgodność 99%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

SpoczynekZgodność 100%Zgodne pomiary: 201

Hoverniesprawdzony

Focusniesprawdzony

Focus na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

SpoczynekZgodność 100%Zgodne pomiary: 182

Focusniesprawdzony

Focus na linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

Element główny height: 155px, na stronie 116px; Inner height: 117px, na stronie 78px i jeszcze 4.

SpoczynekZgodność 100%Różne pomiary: 6 z 223

Hoverniesprawdzony

Focusniesprawdzony

Focus na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Hover na nav linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

100% zgodność

mobile

Inner height: 274px, na stronie 378px; List 2 height: 148px, na stronie 252px i jeszcze 7.

SpoczynekZgodność 100%Różne pomiary: 9 z 2279

Focusniesprawdzony

Focus na link 2Zgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Focus na linkZgodność 100%Zgodne pomiary: 18

Oryginał

Brak zapisanego obrazu

Render

Brak zapisanego obrazu

Receptura w DESIGN.md

Input1

94% zgodność

desktop

Zgodność renderu ze stroną to 94%, poniżej progu 97%.

SpoczynekZgodność 94%Zgodne pomiary: 22

Oryginalny Input na stronie, spoczynek — Oryginał

Osobny render: Input, spoczynek — Render

FocusZgodność 94%Zgodne pomiary: 18

Oryginalny Input na stronie, focus — Oryginał

Receptura w DESIGN.md

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.

Ten plik DESIGN.md jest po angielsku, bo w tym języku czytają go agenci AI do kodowania.

Wyodrębnione z publicznej strony Duolingo - The world’s most popular way to learn, to nie są oficjalne wytyczne marki. Sprawdź fonty innej strony

Podobne

Zobacz wszystkie

Narzędzia na co dzień · Browser Extensions & Small Utilities

Apple

Tokeny projektowe wyodrębnione z analizy częstotliwości CSSOM bez interpretacji przez LLM.

Podróże, transport i logistyka

Airbnb

Design system Airbnb opiera się na jednym zastrzeżonym zmiennym kroju pisma (Airbnb Cereal VF) i niemal monochromatycznej palecie neutralnych barw, z głębokim węglem (#222222) i jasnymi szarościami jako podstawą. Firmowy koral-róż „Rausch" (#ff385c) jest zarezerwowany wyłącznie dla głównych przycisków wezwania do działania i logo. Układ to responsywna siatka kart ze zdjęciami, z dużym udziałem obrazu w stosunku do tekstu, miękkimi, 20-pikselowymi zaokrągleniami rogów kart oraz wielowarstwowym systemem ambientowych cieni, który tworzy subtelną głębię bez ostrych kontrastów. Pasek wyszukiwania, w kształcie pigułki, jest wyraźnie wyeksponowany i łączy główną akcję użytkownika w jednym miejscu.

Handel i retail · E-commerce Store

IKEA

IKEA-owa globalna strona główna opiera się na odważnym, płaskim systemie projektowym, którego głównym elementem jest ikoniczny żółty IKEA (#ffdb00) jako powierzchnia najważniejszych działań, a niebieski IKEA (#0058a3) pełni rolę akcentu logo marki. Cały system typograficzny opiera się na jednym, autorskim kroju pisma – Noto IKEA – w wagach 400 i 700, w ściśle określonej skali, od 14px dla tekstu podstawowego po 51px dla nagłówków wyróżniających. Wyniesienie elementów nad tło osiągnięte jest wyłącznie dzięki kontrastowi barw i strukturze układu, bez cieni. Układ korzysta z kontenera o maksymalnej szerokości 90rem z odstępem siatki 1,5rem na desktopie oraz spójnego tokenu zaokrąglenia 8px stosowanego do elementów interaktywnych. Ciepłe, lekko kremowe tło (#fffefb) łagodzi surowość tekstu w kolorze #111111, tworząc czytelne, wysokokontrastowe i dostępne doświadczenie lektury.

Oprogramowanie i SaaS · Productivity & Notes

Notion

Strona główna marketingowa Notion łączy głęboko granatową sekcję hero (#02093a) z jasnym tłem treści (#f6f5f4), stosując niestandardowy krój pisma NotionInter we wszystkich rolach tekstowych. Układ opiera się na siatce 12-kolumnowej z odstępami 28px, a język zaokrągleń łączy dwie wartości: 8px dla kart i 9999px dla pigułek. Elementy pływające otrzymują wielowarstwowy, stopniowo narastający system cieni. Niebieski marki (#2537b1) wyznacza przyciski wezwania do działania i akcenty, a semantyczna skala szarości (od gray-200 do gray-900) porządkuje hierarchię tekstu i powierzchni.

Narzędzia deweloperskie i infrastruktura · Developer Tools & IDEs

Railway

Design system Railway to ciemne, nastawione na twórców platformy deweloperskiej. Opiera się na głęboko granatowo-czarnych powierzchniach (#13111c, #0b0b0f) i wysokokontrastowym, lekko kremowym tekście (#f7f7f8) oraz charakterystycznym fioletowym akcentem marki (#853bce / #553f83). Nagłówek sekcji hero używa kroju IBM Plex Serif, nadającego mu redakcyjny ciężar, podczas gdy Inter obsługuje całą treść interfejsu, a JetBrains Mono i SF Mono pełnią rolę w kontekstach kodu. Wyniesienie elementów osiągnięto za pomocą wewnętrznych, białych obramówek z łagodnym blaskiem (rgba(255,255,255,0.2), 1.5px inset) zamiast cieni, co nadaje interfejsowi estetykę szklanych paneli. System odstępów oparty jest na wielokrotnościach 4px z wyraźnym rytmem 8/12/16/24/32. Promienie zaokrągleń są małe, przy czym dominuje 4px, a dla kart i kontenerów hero stosowane są selektywnie 8px i 16px.

Usługi biznesowe i profesjonalne

Shopify

Strona główna marketingowa Shopify opiera się na dynamicznym, pełnoekranowym wideo w sekcji hero, z niemal czarnym tłem (#02090a), które wyraźnie kontrastuje z białym paskiem nawigacji nad nim. Główny akcent marki to intensywna miętowa zieleń (#36f4a4), używana oszczędnie do wyróżnień i stanów interaktywnych. Typografia łączy NeueHaasGrotesk w nagłówkach display i redakcyjnych z Inter-Variable w tekstach interfejsu. Przyciski CTA mają w pełni zaokrąglone kształty pigułki (border-radius: 9999px). Cały system jest pewny siebie, o wysokim kontraście i aspiracyjny, zaprojektowany tak, by zamieniać odwiedzających w sprzedawców.

Design system Duolingo - The world’s most popular way to learn

Komponenty

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

Podobne

Apple

Airbnb

IKEA

Notion

Railway

Shopify