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

duolingo.com

PROEngine v4

Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.

Sistem visual

100% keyakinan

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% keyakinan

button-ghost-3-padding-x
11px

section-padding-y
96px

footer-inner-inner-max-width
1048px

100% keyakinan

sm · 8px

md · 12px

lg · 16px

Komponen

Buttons4

100% kecocokan

ghost · desktop

Label y bernilai 16px, sedangkan situs memakai 14px; Label height bernilai 17px, sedangkan situs memakai 21px.

DiamKecocokan 100%2 dari 27 ukuran berbeda

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%40 ukuran cocok

Asli

Render

FocusKecocokan 100%18 ukuran cocok

Asli

Render

Resep di DESIGN.md

100% kecocokan

ghost · desktop

DiamKecocokan 100%28 ukuran cocok

Asli

Render

FocusKecocokan 100%22 ukuran cocok

Asli

Render

Resep di DESIGN.md

98% kecocokan

secondary · desktop

Hasil render-nya 98% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 98%22 ukuran cocok

Asli

Render

FocusKecocokan 98%19 ukuran cocok

Asli

Render

Resep di DESIGN.md

Cards5

100% kecocokan

desktop

Group 2 y bernilai 259px, sedangkan situs memakai 273px; Group 2 height bernilai 92px, sedangkan situs memakai 68px dan 4 lainnya.

DiamKecocokan 100%6 dari 153 ukuran berbeda

Render terpisah dari Card, diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card, hover — Render

FocusKecocokan 100%18 ukuran cocok

Render terpisah dari Card, focus — Render

Diam, instance 2Kecocokan 100%6 dari 153 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%6 dari 153 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%6 dari 153 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group y bernilai 139px, sedangkan situs memakai 0px; Link y bernilai 139px, sedangkan situs memakai 0px dan 1 lainnya.

DiamKecocokan 100%3 dari 97 ukuran berbeda

Render terpisah dari Card (2), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (2), hover — Render

FocusKecocokan 100%2 dari 18 ukuran berbeda

Render terpisah dari Card (2), focus — Render

Diam, instance 2Kecocokan 100%3 dari 97 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%3 dari 97 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%3 dari 97 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%3 dari 97 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%104 ukuran cocok

Render terpisah dari Card (3), diam — Render

FocusKecocokan 100%22 ukuran cocok

Render terpisah dari Card (3), focus — Render

Diam, instance 2Kecocokan 100%104 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%104 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%104 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 5Kecocokan 100%104 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 6Kecocokan 100%104 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Tidak dapat diverifikasi

desktop

Tidak dapat diverifikasi: foto, media, atau iklan yang dipasang halaman di dalamnya menutupi sebagian besar elemen dan tidak ada perbedaan lain, jadi perbandingan tidak mengatakan apa pun tentang resepnya.

DiamKecocokan 99%121 ukuran cocok

Render terpisah dari Card (4), diam — Render

HoverKecocokan 100%18 ukuran cocok

Render terpisah dari Card (4), hover — Render

FocusKecocokan 99%18 ukuran cocok

Render terpisah dari Card (4), focus — Render

Diam, instance 2Kecocokan 100%121 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 99%121 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%121 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Group 2 height bernilai 80px, sedangkan situs memakai 105px; Text 3 height bernilai 50px, sedangkan situs memakai 75px.

DiamKecocokan 100%2 dari 164 ukuran berbeda

Render terpisah dari Card (5), diam — Render

Diam, instance 2Kecocokan 100%2 dari 164 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%2 dari 164 ukuran berbeda

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Extras7

100% kecocokan

desktop

DiamKecocokan 100%94 ukuran cocok

Render terpisah dari Accordion, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

Icon x bernilai -9px, sedangkan situs memakai 16px.

DiamKecocokan 100%1 dari 102 ukuran berbeda

App store badge asli di situs, diam — Asli

Render terpisah dari App store badge, diam — Render

FocusKecocokan 100%22 ukuran cocok

App store badge asli di situs, focus — Asli

Render terpisah dari App store badge, focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%182 ukuran cocok

Footer navigation asli di situs, diam — Asli

Render terpisah dari Footer navigation, diam — Render

Resep di DESIGN.md

Tidak dicek

desktop

Tidak ada resep yang dibuat: elemen tidak dapat ditemukan di halaman.

Tidak ada yang dibandingkan untuk komponen ini.

100% kecocokan

desktop

DiamKecocokan 100%40 ukuran cocok

Language selector (2) asli di situs, diam — Asli

Render terpisah dari Language selector (2), diam — Render

FocusKecocokan 100%18 ukuran cocok

Language selector (2) asli di situs, focus — Asli

Render terpisah dari Language selector (2), focus — Render

Resep di DESIGN.md

100% kecocokan

desktop

Group width bernilai 1016px, sedangkan situs memakai 1002px; List width bernilai 1016px, sedangkan situs memakai 1002px.

DiamKecocokan 100%2 dari 496 ukuran berbeda

Language tabs asli di situs, diam — Asli

Render terpisah dari Language tabs, diam — Render

Resep di DESIGN.md

100% kecocokan

desktop

Hasil render-nya 100% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 100%24 ukuran cocok

Step list item asli di situs, diam — Asli

Render terpisah dari Step list item, diam — Render

HoverKecocokan 100%18 ukuran cocok

Step list item asli di situs, hover — Asli

Render terpisah dari Step list item, hover — Render

FocusKecocokan 100%18 ukuran cocok

Step list item asli di situs, focus — Asli

Render terpisah dari Step list item, focus — Render

Diam, instance 2Kecocokan 100%24 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 3Kecocokan 100%24 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Diam, instance 4Kecocokan 100%24 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Headers10

99% kecocokan

desktop

DiamKecocokan 99%156 ukuran cocok

Header (inner) asli di situs, diam — Asli

Render terpisah dari Header (inner), diam — Render

Focustidak dicek

Header (inner) asli di situs, focus — Asli

Render terpisah dari Header (inner), focus — Render

Focus pada link 2Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

89% kecocokan

desktop

Root height bernilai 128px, sedangkan situs memakai 70px; Inner y bernilai 18px, sedangkan situs memakai 0px dan 12 lainnya.

DiamKecocokan 89%14 dari 216 ukuran berbeda

Header (inner, 2) asli di situs, diam — Asli

Render terpisah dari Header (inner, 2), diam — Render

Focustidak dicek

Header (inner, 2) asli di situs, focus — Asli

Render terpisah dari Header (inner, 2), focus — Render

Focus pada cta 2Kecocokan 89%19 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada cta 3Kecocokan 89%19 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada ctaKecocokan 89%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 89%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

DiamKecocokan 100%114 ukuran cocok

Header (inner, 3) asli di situs, diam — Asli

Render terpisah dari Header (inner, 3), diam — Render

Focustidak dicek

Header (inner, 3) asli di situs, focus — Asli

Render terpisah dari Header (inner, 3), focus — Render

Focus pada buttonKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

86% kecocokan

desktop

Hasil render-nya 86% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 86%119 ukuran cocok

Header (inner, 4) asli di situs, diam — Asli

Render terpisah dari Header (inner, 4), diam — Render

Focustidak dicek

Header (inner, 4) asli di situs, focus — Asli

Render terpisah dari Header (inner, 4), focus — Render

Focus pada logoKecocokan 86%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

94% kecocokan

desktop

Text y bernilai 25px, sedangkan situs memakai 23px; Text height bernilai 17px, sedangkan situs memakai 21px.

DiamKecocokan 95%2 dari 99 ukuran berbeda

Header (landing) asli di situs, diam — Asli

Render terpisah dari Header (landing), diam — Render

Hovertidak dicek

Header (landing) asli di situs, hover — Asli

Render terpisah dari Header (landing), hover — Render

Focustidak dicek

Header (landing) asli di situs, focus — Asli

Render terpisah dari Header (landing), focus — Render

Focus pada ctaKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada ctaKecocokan 94%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada logoKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

93% kecocokan

mobile

Root height bernilai 128px, sedangkan situs memakai 70px; Inner y bernilai 18px, sedangkan situs memakai 0px dan 9 lainnya.

DiamKecocokan 93%11 dari 145 ukuran berbeda

Focustidak dicek

Focus pada logoKecocokan 93%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%57 ukuran cocok

Focustidak dicek

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

95% kecocokan

mobile

Hasil render-nya 95% mirip dengan situs, di bawah ambang 96%.

DiamKecocokan 95%101 ukuran cocok

Focustidak dicek

Focus pada logoKecocokan 95%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%113 ukuran cocok

Focustidak dicek

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada menu toggleKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%57 ukuran cocok

Focustidak dicek

Focus pada logoKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Footers8

100% kecocokan

desktop

DiamKecocokan 100%223 ukuran cocok

Footer (inner) asli di situs, diam — Asli

Render terpisah dari Footer (inner), diam — Render

Hovertidak dicek

Footer (inner) asli di situs, hover — Asli

Render terpisah dari Footer (inner), hover — Render

Focustidak dicek

Footer (inner) asli di situs, focus — Asli

Render terpisah dari Footer (inner), focus — Render

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Root height bernilai 118px, sedangkan situs memakai 79px; Nav height bernilai 78px, sedangkan situs memakai 39px dan 1 lainnya.

DiamKecocokan 100%3 dari 201 ukuran berbeda

Footer (inner, 2) asli di situs, diam — Asli

Render terpisah dari Footer (inner, 2), diam — Render

Hovertidak dicek

Footer (inner, 2) asli di situs, hover — Asli

Render terpisah dari Footer (inner, 2), hover — Render

Focustidak dicek

Footer (inner, 2) asli di situs, focus — Asli

Render terpisah dari Footer (inner, 2), focus — Render

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

desktop

Root height bernilai 78px, sedangkan situs memakai 39px; Link y bernilai 51px, sedangkan situs memakai 12px.

DiamKecocokan 100%2 dari 182 ukuran berbeda

Footer (inner, 3) asli di situs, diam — Asli

Render terpisah dari Footer (inner, 3), diam — Render

Focustidak dicek

Footer (inner, 3) asli di situs, focus — Asli

Render terpisah dari Footer (inner, 3), focus — Render

Focus pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

99% kecocokan

desktop

Group height bernilai 431px, sedangkan situs memakai 381px; Group height bernilai 431px, sedangkan situs memakai 285px dan 29 lainnya.

DiamKecocokan 99%31 dari 2279 ukuran berbeda

Footer (landing) asli di situs, diam — Asli

Render terpisah dari Footer (landing), diam — Render

Focustidak dicek

Footer (landing) asli di situs, focus — Asli

Render terpisah dari Footer (landing), focus — Render

Focus pada link 2Kecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 99%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%201 ukuran cocok

Hovertidak dicek

Focustidak dicek

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

DiamKecocokan 100%182 ukuran cocok

Focustidak dicek

Focus pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

Root height bernilai 155px, sedangkan situs memakai 116px; Inner height bernilai 117px, sedangkan situs memakai 78px dan 4 lainnya.

DiamKecocokan 100%6 dari 223 ukuran berbeda

Hovertidak dicek

Focustidak dicek

Focus pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Hover pada nav linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

100% kecocokan

mobile

Inner height bernilai 274px, sedangkan situs memakai 378px; List 2 height bernilai 148px, sedangkan situs memakai 252px dan 7 lainnya.

DiamKecocokan 100%9 dari 2279 ukuran berbeda

Focustidak dicek

Focus pada link 2Kecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Focus pada linkKecocokan 100%18 ukuran cocok

Asli

Tidak ada gambar tersimpan

Render

Tidak ada gambar tersimpan

Resep di DESIGN.md

Input1

94% kecocokan

desktop

Hasil render-nya 94% mirip dengan situs, di bawah ambang 97%.

DiamKecocokan 94%22 ukuran cocok

Render terpisah dari Input, diam — Render

FocusKecocokan 94%18 ukuran cocok

Render terpisah dari Input, focus — Render

Resep di 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.

File DESIGN.md ini berbahasa Inggris, bahasa yang dibaca oleh agen coding AI.

Diekstrak dari website publik Duolingo - The world’s most popular way to learn, bukan pedoman brand resmi. Cek font situs lain

Serupa dengan ini

Lihat semua

Utilitas & Alat Sehari-hari · Browser Extensions & Small Utilities

Apple

Token desain yang diekstrak dari analisis frekuensi CSSOM tanpa interpretasi LLM.

Perjalanan, Transportasi & Logistik

Airbnb

Sistem desain Airbnb dibangun di sekitar satu font variabel milik sendiri (Airbnb Cereal VF), dengan palet netral hampir monokrom yang berpusat pada abu-abu arang tua (#222222) dan abu-abu terang. Warna coral-pink khas merek, "Rausch" (#ff385c), hanya digunakan untuk CTA utama dan logo. Tata letaknya berupa grid kartu foto yang responsif, dengan rasio gambar terhadap teks yang lega, sudut kartu membulat 20px yang lembut, serta sistem bayangan ambient berlapis banyak yang menciptakan kedalaman halus tanpa kontras yang keras. Bilah pencarian berbentuk pil yang menonjol menyatukan aksi utama pengguna.

Perdagangan & Ritel · E-commerce Store

IKEA

IKEA-Yellow (#ffdb00) berfungsi sebagai permukaan aksi utama dan IKEA Blue (#0058a3) sebagai aksen logo merek, dalam sistem desain IKEA yang tegas dan datar pada beranda globalnya. Seluruh sistem tipografi dibangun dengan satu huruf kustom, Noto IKEA, dengan bobot 400 dan 700 pada skala yang ketat, dari teks isi 14px hingga judul display 51px. Elevasi dibentuk sepenuhnya lewat kontras warna dan struktur tata letak, bukan bayangan. Tata letak memakai kontainer lebar maksimum 90rem dengan jarak grid desktop 1.5rem, serta token radius sudut 8px yang konsisten untuk elemen interaktif. Latar belakang off-white #fffefb memberi kesan hangat di samping teks #111111 yang tegas, sehingga pengalaman membaca tetap berkontras tinggi dan mudah diakses.

Software & SaaS · Productivity & Notes

Notion

Halaman beranda pemasaran Notion memadukan bagian hero navy tua (#02093a) dengan badan halaman yang terang (#f6f5f4), dan menggunakan tipografi kustom (NotionInter) untuk semua peran teks. Desainnya memakai grid 12 kolom dengan gutter 28px, serta bahasa radius ganda: 8px untuk kartu dan 9999px untuk pill. Sistem bayangan progresif berlapis banyak diterapkan pada elemen UI yang tampak melayang. Warna biru merek (#2537b1) menjadi penggerak CTA dan sorotan aksen, sementara tangga skala abu-abu semantik (gray-200 hingga gray-900) menata hierarki teks dan permukaan.

Developer & Infrastruktur · Developer Tools & IDEs

Railway

Sistem desain Railway adalah antarmuka platform pengembang yang mengutamakan mode gelap, berakar pada permukaan biru laut hampir hitam yang pekat (#13111c, #0b0b0f), teks off-white berkontras tinggi (#f7f7f8), dan aksen merek ungu yang khas (#853bce / #553f83). Bagian hero menggunakan IBM Plex Serif untuk kesan editorial yang tegas, sedangkan Inter menangani seluruh teks antarmuka dan JetBrains Mono / SF Mono digunakan untuk konteks kode. Elevasi dicapai melalui border dengan cahaya putih di bagian dalam (rgba(255,255,255,0.2) 1.5px inset), bukan bayangan jatuh, sehingga antarmuka memiliki nuansa panel kaca. Sistem spasinya berbasis kelipatan 4px dengan ritme 8/12/16/24/32 yang kuat. Radius sudutnya rapat (dominan 4px), dengan 8px dan 16px yang digunakan secara selektif untuk kartu dan wadah hero.

Bisnis & Layanan Profesional

Shopify

Halaman beranda pemasaran Shopify menggunakan hero video layar penuh yang dramatis dengan latar belakang hampir hitam (#02090a) yang kontras tajam dengan bilah navigasi putih di atasnya. Aksen merek utamanya adalah hijau mint cerah (#36f4a4) yang digunakan secara hemat untuk sorotan dan status interaktif. Tipografinya terbagi antara NeueHaasGrotesk untuk judul display dan editorial, serta Inter-Variable untuk teks isi UI. CTA menggunakan bentuk pill dengan sudut membulat penuh (border-radius: 9999px). Secara keseluruhan, sistem ini terkesan percaya diri, berkontras tinggi, dan aspiratif, dirancang untuk mengubah pengunjung menjadi pedagang.

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

Komponen

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

Serupa dengan ini

Apple

Airbnb

IKEA

Notion

Railway

Shopify