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

duolingo.com

PROEngine v4

Visual system

100% confidence

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

button-ghost-3-padding-x
11px

section-padding-y
96px

footer-inner-inner-max-width
1048px

100% confidence

sm · 8px

md · 12px

lg · 16px

Components

Button4

100% match

ghost · desktop

Label y is 16px, the site has 14px; Label height is 17px, the site has 21px.

At rest100% match2 of 27 measurements differ

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match40 measurements match

Original

Render

Focus100% match18 measurements match

Original

Render

Recipe in DESIGN.md

100% match

ghost · desktop

At rest100% match28 measurements match

Original

Render

Focus100% match22 measurements match

Original

Render

Recipe in DESIGN.md

98% match

secondary · desktop

It renders 98% like the site, below the 97% bar.

At rest98% match22 measurements match

Original

Render

Focus98% match19 measurements match

Original

Render

Recipe in DESIGN.md

Card5

100% match

desktop

Group 2 y is 259px, the site has 273px; Group 2 height is 92px, the site has 68px and 4 more.

At rest100% match6 of 153 measurements differ

Original Card on the site, at rest — Original

Isolated render of Card, at rest — Render

Hover100% match18 measurements match

Original Card on the site, hover — Original

Focus100% match18 measurements match

Original Card on the site, focus — Original

At rest, instance 2100% match6 of 153 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match6 of 153 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 4100% match6 of 153 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Group y is 139px, the site has 0px; Link y is 139px, the site has 0px and 1 more.

At rest100% match3 of 97 measurements differ

Original Card (2) on the site, at rest — Original

Isolated render of Card (2), at rest — Render

Hover100% match18 measurements match

Original Card (2) on the site, hover — Original

Isolated render of Card (2), hover — Render

Focus100% match2 of 18 measurements differ

Original Card (2) on the site, focus — Original

Isolated render of Card (2), focus — Render

At rest, instance 2100% match3 of 97 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match3 of 97 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 4100% match3 of 97 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 5100% match3 of 97 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match104 measurements match

Original Card (3) on the site, at rest — Original

Isolated render of Card (3), at rest — Render

Focus100% match22 measurements match

Original Card (3) on the site, focus — Original

Isolated render of Card (3), focus — Render

At rest, instance 2100% match104 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match104 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match104 measurements match

Original

No image stored

Render

No image stored

At rest, instance 5100% match104 measurements match

Original

No image stored

Render

No image stored

At rest, instance 6100% match104 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

The check failed without a recorded difference.

At rest99% match121 measurements match

Original Card (4) on the site, at rest — Original

Isolated render of Card (4), at rest — Render

Hover100% match18 measurements match

Original Card (4) on the site, hover — Original

Isolated render of Card (4), hover — Render

Focus99% match18 measurements match

Original Card (4) on the site, focus — Original

Isolated render of Card (4), focus — Render

At rest, instance 2100% match121 measurements match

Original

No image stored

Render

No image stored

At rest, instance 399% match121 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match121 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Group 2 height is 80px, the site has 105px; Text 3 height is 50px, the site has 75px.

At rest100% match2 of 164 measurements differ

Original Card (5) on the site, at rest — Original

Isolated render of Card (5), at rest — Render

At rest, instance 2100% match2 of 164 measurements differ

Original

No image stored

Render

No image stored

At rest, instance 3100% match2 of 164 measurements differ

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Extra7

100% match

desktop

At rest100% match94 measurements match

Original Accordion on the site, at rest — Original

Isolated render of Accordion, at rest — Render

Recipe in DESIGN.md

100% match

desktop

Icon x is -9px, the site has 16px.

At rest100% match1 of 102 measurements differ

Original App store badge on the site, at rest — Original

Isolated render of App store badge, at rest — Render

Focus100% match22 measurements match

Original App store badge on the site, focus — Original

Isolated render of App store badge, focus — Render

Recipe in DESIGN.md

100% match

desktop

At rest100% match182 measurements match

Original Footer navigation on the site, at rest — Original

Isolated render of Footer navigation, at rest — Render

Recipe in DESIGN.md

Not checked

desktop

No recipe was made: the element could not be found on the page.

Nothing was compared for this component.

100% match

desktop

At rest100% match40 measurements match

Original Language selector (2) on the site, at rest — Original

Isolated render of Language selector (2), at rest — Render

Focus100% match18 measurements match

Original Language selector (2) on the site, focus — Original

Isolated render of Language selector (2), focus — Render

Recipe in DESIGN.md

100% match

desktop

Group width is 1016px, the site has 1002px; List width is 1016px, the site has 1002px.

At rest100% match2 of 496 measurements differ

Original Language tabs on the site, at rest — Original

Isolated render of Language tabs, at rest — Render

Recipe in DESIGN.md

100% match

desktop

It renders 100% like the site, below the 96% bar.

At rest100% match24 measurements match

Original Step list item on the site, at rest — Original

Isolated render of Step list item, at rest — Render

Hover100% match18 measurements match

Original Step list item on the site, hover — Original

Isolated render of Step list item, hover — Render

Focus100% match18 measurements match

Original Step list item on the site, focus — Original

Isolated render of Step list item, focus — Render

At rest, instance 2100% match24 measurements match

Original

No image stored

Render

No image stored

At rest, instance 3100% match24 measurements match

Original

No image stored

Render

No image stored

At rest, instance 4100% match24 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Header10

99% match

desktop

At rest99% match156 measurements match

Original Header (inner) on the site, at rest — Original

Isolated render of Header (inner), at rest — Render

Focusnot checked

Original Header (inner) on the site, focus — Original

Isolated render of Header (inner), focus — Render

Focus on link 299% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link99% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

89% match

desktop

Root height is 128px, the site has 70px; Inner y is 18px, the site has 0px and 12 more.

At rest89% match14 of 216 measurements differ

Original Header (inner, 2) on the site, at rest — Original

Isolated render of Header (inner, 2), at rest — Render

Focusnot checked

Original Header (inner, 2) on the site, focus — Original

Isolated render of Header (inner, 2), focus — Render

Focus on cta 289% match19 measurements match

Original

No image stored

Render

No image stored

Focus on cta 389% match19 measurements match

Original

No image stored

Render

No image stored

Focus on cta89% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo89% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

At rest100% match114 measurements match

Original Header (inner, 3) on the site, at rest — Original

Isolated render of Header (inner, 3), at rest — Render

Focusnot checked

Original Header (inner, 3) on the site, focus — Original

Isolated render of Header (inner, 3), focus — Render

Focus on button100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

86% match

desktop

It renders 86% like the site, below the 96% bar.

At rest86% match119 measurements match

Original Header (inner, 4) on the site, at rest — Original

Isolated render of Header (inner, 4), at rest — Render

Focusnot checked

Original Header (inner, 4) on the site, focus — Original

Isolated render of Header (inner, 4), focus — Render

Focus on logo86% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

94% match

desktop

Text y is 25px, the site has 23px; Text height is 17px, the site has 21px.

At rest95% match2 of 99 measurements differ

Original Header (landing) on the site, at rest — Original

Isolated render of Header (landing), at rest — Render

Hovernot checked

Original Header (landing) on the site, hover — Original

Isolated render of Header (landing), hover — Render

Focusnot checked

Original Header (landing) on the site, focus — Original

Isolated render of Header (landing), focus — Render

Focus on cta95% match18 measurements match

Original

No image stored

Render

No image stored

Hover on cta94% match18 measurements match

Original

No image stored

Render

No image stored

Focus on logo95% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

93% match

mobile

Root height is 128px, the site has 70px; Inner y is 18px, the site has 0px and 9 more.

At rest93% match11 of 145 measurements differ

Focusnot checked

Focus on logo93% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match57 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

95% match

mobile

It renders 95% like the site, below the 96% bar.

At rest95% match101 measurements match

Focusnot checked

Focus on logo95% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match113 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on menu toggle100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match57 measurements match

Focusnot checked

Focus on logo100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Footer8

100% match

desktop

At rest100% match223 measurements match

Original Footer (inner) on the site, at rest — Original

Isolated render of Footer (inner), at rest — Render

Hovernot checked

Original Footer (inner) on the site, hover — Original

Isolated render of Footer (inner), hover — Render

Focusnot checked

Original Footer (inner) on the site, focus — Original

Isolated render of Footer (inner), focus — Render

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Root height is 118px, the site has 79px; Nav height is 78px, the site has 39px and 1 more.

At rest100% match3 of 201 measurements differ

Original Footer (inner, 2) on the site, at rest — Original

Isolated render of Footer (inner, 2), at rest — Render

Hovernot checked

Original Footer (inner, 2) on the site, hover — Original

Isolated render of Footer (inner, 2), hover — Render

Focusnot checked

Original Footer (inner, 2) on the site, focus — Original

Isolated render of Footer (inner, 2), focus — Render

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

desktop

Root height is 78px, the site has 39px; Link y is 51px, the site has 12px.

At rest100% match2 of 182 measurements differ

Original Footer (inner, 3) on the site, at rest — Original

Isolated render of Footer (inner, 3), at rest — Render

Focusnot checked

Original Footer (inner, 3) on the site, focus — Original

Isolated render of Footer (inner, 3), focus — Render

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

99% match

desktop

Group height is 431px, the site has 381px; Group height is 431px, the site has 285px and 29 more.

At rest99% match31 of 2279 measurements differ

Original Footer (landing) on the site, at rest — Original

Isolated render of Footer (landing), at rest — Render

Focusnot checked

Original Footer (landing) on the site, focus — Original

Isolated render of Footer (landing), focus — Render

Focus on link 299% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link99% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match201 measurements match

Hovernot checked

Focusnot checked

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

At rest100% match182 measurements match

Focusnot checked

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Root height is 155px, the site has 116px; Inner height is 117px, the site has 78px and 4 more.

At rest100% match6 of 223 measurements differ

Hovernot checked

Focusnot checked

Focus on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Hover on nav link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

100% match

mobile

Inner height is 274px, the site has 378px; List 2 height is 148px, the site has 252px and 7 more.

At rest100% match9 of 2279 measurements differ

Focusnot checked

Focus on link 2100% match18 measurements match

Original

No image stored

Render

No image stored

Focus on link100% match18 measurements match

Original

No image stored

Render

No image stored

Recipe in DESIGN.md

Input1

94% match

desktop

It renders 94% like the site, below the 97% bar.

At rest94% match22 measurements match

Original Input on the site, at rest — Original

Isolated render of Input, at rest — Render

Focus94% match18 measurements match

Original Input on the site, focus — Original

Isolated render of Input, focus — Render

Recipe in 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.

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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.

Extracted from Duolingo - The world’s most popular way to learn’s public website, not official brand guidelines.

More like this

Browse all

Utilities & Everyday Tools · Browser Extensions & Small Utilities

Apple

Design tokens extracted from CSSOM frequency analysis without LLM interpretation.

Travel, Transport & Logistics

Airbnb

Airbnb's design system is built around a single proprietary variable font (Airbnb Cereal VF), a near-monochrome neutral palette anchored by deep charcoal (#222222) and light grays, with the brand's signature "Rausch" coral-pink (#ff385c) reserved exclusively for primary CTAs and the logo. The layout is a responsive photo-card grid with generous image-to-text ratios, soft 20px rounded corners on cards, and a multi-layer ambient shadow system that creates subtle depth without harsh contrast. The search bar is a prominent pill-shaped container that unifies the core user action.

Commerce & Retail · E-commerce Store

IKEA

IKEA's global homepage uses a bold, flat design system anchored by the iconic IKEA Yellow (#ffdb00) as the primary action surface and IKEA Blue (#0058a3) as the brand logo accent. The entire typographic system is built on a single custom typeface — Noto IKEA — spanning weights 400 and 700 across a tightly defined scale from 14px body text to 51px display headings. Elevation is conveyed entirely through color contrast and layout structure rather than shadows. The layout uses a max-width container of 90rem with a 1.5rem desktop grid gap, and a consistent 8px border-radius token applied to interactive elements. The off-white background (#fffefb) provides warmth against the stark #111111 text, creating a high-contrast, accessible reading experience.

Software & SaaS · Productivity & Notes

Notion

Notion's marketing homepage pairs a deep navy (#02093a) hero section with a light (#f6f5f4) body, using a custom typeface (NotionInter) across all text roles. The design employs a 12-column grid with 28px gutters, a dual-radius language (8px for cards, 9999px for pills), and a multi-layer progressive shadow system for floating UI elements. Brand blue (#2537b1) drives CTAs and accent highlights, while a semantic gray-scale ladder (gray-200 through gray-900) structures all text and surface hierarchy.

Developer & Infrastructure · Developer Tools & IDEs

Railway

Railway's design system is a dark-first developer platform UI anchored in deep near-black navy surfaces (#13111c, #0b0b0f), high-contrast off-white text (#f7f7f8), and a distinctive purple brand accent (#853bce / #553f83). The hero uses IBM Plex Serif for editorial weight, while Inter handles all UI copy and JetBrains Mono / SF Mono serve code contexts. Elevation is achieved through inset white-glow borders (rgba(255,255,255,0.2) 1.5px inset) rather than drop shadows, giving the UI a glass-panel aesthetic. The spacing system is 4px-based with a strong 8/12/16/24/32 rhythm. Border radii are tight (4px dominant) with selective 8px and 16px for cards and hero containers.

Business & Professional Services

Shopify

Shopify's marketing homepage uses a dramatic full-bleed video hero with a near-black (#02090a) background that contrasts sharply with the white navigation bar above. The primary brand accent is a vivid mint green (#36f4a4) used sparingly for highlights and interactive states. Typography is split between NeueHaasGrotesk for display/editorial headings and Inter-Variable for UI body copy. CTAs use fully-rounded pill shapes (border-radius: 9999px). The overall system is confident, high-contrast, and aspirational — built to convert visitors into merchants.

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

Button4

Card5

Extra7

Header10

Footer8

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

Button, ghost

Card

Language tabs

App store badge

Header (landing)

Footer (landing)

Card (2)

Footer navigation

Header (inner)

Footer (inner)

Button, secondary

Button, ghost (2)

Card (3)

Header (inner, 2)

Button, ghost (3)

Card (4)

Accordion

Language selector (2)

Header (inner, 3)

Footer (inner, 2)

Input

Card (5)

Step list item

Header (inner, 4)

Footer (inner, 3)

Do's and Don'ts

Do

Don't

Responsive Behavior

What changes on mobile

Touch targets

Iteration Guide

Known Gaps

More like this

Apple

Airbnb

IKEA

Notion

Railway

Shopify