✦ClaudeDesign

Duolingo landing page clone (Vite)

A pixel-detailed spec to clone the Duolingo landing page, down to fonts and breakpoints.

Loading the original X post…

A pixel-detailed spec to clone the Duolingo landing page, down to fonts and breakpoints.

The prompt

✦Claude (AI builder)

1	Build a Duolingo landing page clone using Vite (vanilla JS, no framework). The page has the following sections in order:
2
3	FONTS
4	Primary font: Nunito from Google Fonts (weights: 400, 500, 600, 700, 800, 900)
5	Display/heading font: Feather Bold from https://db.onlinewebfonts.com/c/14936bb7a4b6575fd2eee80a3ab52cc2?family=Feather+Bold
6	CSS font stack fallback: 'Nunito', 'DIN Round Pro', -apple-system, BlinkMacSystemFont, sans-serif
7	CSS VARIABLES
8
9	--green: rgb(88, 204, 2)
10	--dark-blue: rgb(16, 15, 62)
11	--blue: rgb(28, 176, 246)
12	--gray-text: rgb(75, 75, 75)
13	--gray-light: rgb(119, 119, 119)
14	--border-color: rgb(229, 229, 229)
15	--nav-text: rgb(175, 175, 175)
16	--footer-green: #4EC604
17	--footer-header: rgb(215, 255, 184)
18	--footer-link: rgb(165, 237, 110)
19	VIDEOS (HLS via hls.js)
20	All videos use HLS streaming via hls.js loaded from CDN: https://cdn.jsdelivr.net/npm/hls.js@1.5.7
21	Videos are lazy-loaded using IntersectionObserver with 200px rootMargin. Each video is initialized only once. When out of viewport, videos pause. When back in viewport, they resume. HLS is configured with capLevelToPlayerSize: false, startLevel: -1, abrEwmaDefaultEstimate: 50000000, maxBufferLength: 60, maxMaxBufferLength: 120. On MANIFEST_PARSED, force the highest quality level.
22	Video sources (all .m3u8 HLS streams from Mux):
23	Hero video (heroVideo): https://stream.mux.com/ze00dOwsh5muXXj01EWSfdilcHjcGqlznBuFR5GEYlZe00.m3u8
24	Section 2 - "free. fun. effective." (section2Video): https://stream.mux.com/fZLc8HBCvnnsJ1Z021CzK00VDsaM2G01QaApokgnLiil6Q.m3u8
25	Section 3 - Super Duolingo (section3Video): https://stream.mux.com/JYOLW4tkLJJL4hOKcazRgJqjaV00AfQvh2Nca701vxUao.m3u8
26	Learn Anywhere background (learnAnywhereVideo): https://stream.mux.com/6xLBelbJrZGw00K2jPsZtGm8pkftvfezQ8rdAmHL9HoM.m3u8
27	Section 4 - English Test (section4Video): https://stream.mux.com/eEVujEMKUUknKhmJ6vtVeHuRtzS51401CFZM6pFp8yj00.m3u8
28	CTA bottom video (ctaVideo): https://stream.mux.com/1RSKj01UjpjdbxtOEtuQ01t1O00fqI5QQbn7mTW7UiTBy8.m3u8
29	All <video> elements have: autoplay muted loop playsinline.
30
31	SECTION 1: FIXED NAVIGATION BAR
32
33	Fixed to top, z-index 2, white background, bottom border 1px solid rgb(229,229,229)
34
35	Inner container: max-width 1440px, centered, height 70px, padding 0 24px, flex space-between
36	Left: Duolingo logo link to https://www.duolingo.com/, logo image: https://d35aaqx5ub95lt.cloudfront.net/images/splash/f92d5f2f7d56636846861c458c0d0b6c.svg (179x42px)
37	Right: "Site language: English" button with dropdown arrow icon https://d35aaqx5ub95lt.cloudfront.net/images/splash/c6eae48dd48246c89e415b89f9e55282.svg (14x14px), text is uppercase, font-weight 700, color rgb(175,175,175), font-size 16px
38	Favicon: https://d35aaqx5ub95lt.cloudfront.net/vendor/avatars/duo_original.svg
39	SECTION 2: HERO
40	Flex row, centered, gap 80px, padding 48px 80px, max-width 1200px, flex:1 to fill remaining header height
41	Header wraps nav + hero + lang-nav, has padding-top 70px (for fixed nav), min-height 100vh
42
43	Left column: Video (424x424px, aspect-ratio 1, object-fit contain, border-radius 16px, white background)
44	Right column:h1: "The free, fun, and effective way to learn a language!" - color rgb(75,75,75), font-size 32px, max-width 400px, text-align center, line-height 1.3
45	"Get started" button: green (rgb(88,204,2)), white text, height 50px, border-radius 12px, uppercase, font-weight 700, font-size 16px, full width, box-shadow 0 4px 0 #61B800, links to /register
46	"I ALREADY HAVE AN ACCOUNT" button: transparent bg, blue text (rgb(28,176,246)), 2px border #CFCFCF, height 50px, border-radius 12px, box-shadow 0 4px 0 #CFCFCF
47	Buttons container: max-width 330px, gap 12px, margin-top 40px on desktop (768px+)
48
49	SECTION 3: LANGUAGE NAVIGATION BAR
50	Full width, bordered top and bottom with 2px solid rgb(229,229,229)
51	Grid: 14px 1fr 14px, gap 30px, height 74px, max-width 1056px
52	Left/right: chevron SVG arrows (14x14px, stroke #afafaf). Right arrow rotated 180deg. Clickable - scrolls the list by 300px
53	Center: horizontal scrolling list (overflow-x auto, hidden scrollbar), gap 24px
54	Each language item: flex row, flag image (36x27.77px) + uppercase text (16px, font-weight 700, color rgb(119,119,119)), gap 6px, padding 4px, border-radius 8px, hover bg rgba(0,0,0,0.05)
55	38 languages total with their respective CloudFront flag SVG URLs (all from http://d35aaqx5ub95lt.cloudfront.net/vendor/):English: bbe17e16aa4a106032d8e3521eaed13e.svg
56	Spanish: 59a90a2cedd48b751a8fd22014768fd7.svg
57	French: 482fda142ee4abd728ebf4ccce5d3307.svg
58	German: c71db846ffab7e0a74bc6971e34ad82e.svg
59	Italian: 635a09df9323279d39934a991edd4510.svg
60	Portuguese: 27d253ae1272917fc9f4a79459aacd53.svg
61	Math: 395c8a6ee9783610b578b02fda405e85.svg
62	Dutch: de945d789e249dcd74333a6996472ef8.svg
63	Japanese: edea4fa18ff3e7d8c0282de3f102aaed.svg
64	Arabic: 9ab6930a263c981b57f9d578ac97cae7.svg
65	Czech: 828bf0fea457d3beaaab3d6c0bfcc975.svg
66	Welsh: f773f1b240623072e48843ecdf90d756.svg
67	Danish: 6af84a7cb8e99ea8a567c2b9c55b9926.svg
68	Greek: 8db373482261397a3159d3f370eed2f3.svg
69	Esperanto: 6de7e4731b2a82a6458268e1a3d67ce4.svg
70	Finnish: b4d0e4f6451f504e1441eb93efdbea5e.svg
71	Irish: ef0bfb96037b127473bd7bcbfde1a6ed.svg
72	Scottish Gaelic: 09eba3135efe8fe93a4662dba813b921.svg
73	Hebrew: f818f545a703ddaa046ca8786e781742.svg
74	Hindi: 73837fa39dbf1bcc4c95a17a58ed0ffb.svg
75	Haitian Creole: 8cb302b44c183c1a8ec3b90caf90d922.svg
76	Hungarian: 2ed8d0a73eab3c9cba0290e2b459684a.svg
77	High Valyrian: 2880099b038848abbfd11104097953ad.svg
78	Hawaiian: 312e21f793c555787d01a45e20ee8191.svg
79	Indonesian: 339c0413e542f19b234971d7740447e7.svg
80	Korean: ec5835ac9f465ff3dad4b1b8725d4314.svg
81	Latin: f7cee6cc09270371b097129faf792c2a.svg
82	Norwegian (Bokmal): 90b37d97edc66e830dc2286279548f67.svg
83	Navajo: bbc8ad0cfe2596d5193376ebdc3e969c.svg
84	Polish: f095084e6ec400e631d62c3d95fefaa2.svg
85	Romanian: 357e13bb10cf86fc06552d563957e2e6.svg
86	Russian: eadd7804652170c33814a89482f1f353.svg
87	Swedish: f578430c9b7ab617c107893afbb501c0.svg
88	Swahili: 335311988405b4354e1b6ae9037c02db.svg
89	Klingon: 76d654213a8282b0ebc25b4f535ee003.svg
90	Turkish: bc80a9518cd6d5af6ae14e8b22b8a1f4.svg
91	Ukrainian: 7c6e12bc57527843082f7f5bb77c9862.svg
92	Vietnamese: 2b077d42185bc45d4896ed55f15c4fea.svg
93	Yiddish: 55bad151fa6a8d9e2376fc9697c671c8.svg
94	Chinese: 9905aa3a86fcb9e351b0b3bfaf04d8b9.svg
95	Zulu: 112e1531d0ac198a9424bd1b0a7166e6.svg
96
97	SECTION 4: "free. fun. effective."
98	Flex row, centered, gap 102px, padding 96px 80px, max-width 1200px
99	Left: text content (max-width 480px)h2: "free. fun. effective." in Feather Bold, green (var(--green)), font-size 48px, line-height 1.1, white-space nowrap
100	Paragraph: gray (rgb(119,119,119)), 18px, line-height 1.6. Contains link "research shows that it works" to /efficacy in blue, font-weight 700
101	Full text: "Learning with Duolingo is fun, and research shows that it works! With quick, bite-sized lessons, you'll earn points and unlock new levels while gaining real-world communication skills."
102
103	Right: 530x530px video container (white bg, border-radius 16px)
104	SECTION 5: GRADIENT BAR + "LEARN ANYTIME, ANYWHERE"
105	Gradient bar: full width, 150px height, linear-gradient(to bottom, #ffffff, #DBF3FF)
106	Section: relative positioned, background #ddf0fa, flex, align-items flex-start, justify center, min-height 100vh, padding 60px 40px 120px, overflow hidden
107	Background video: absolute positioned, covers full section, object-fit cover, z-index 0, background-color #ddf0fa
108	Content (z-index 1):h2: "learn anytime, anywhere" (with <br> between comma and "anywhere"), color rgb(1,45,82), Feather Bold, 48px, line-height 1.15, text-align center
109
110	Two store buttons side by side (gap 16px):App Store button: Apple icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154356_13de5dda-6dfe-4f54-b3e2-251301254578.png&w=1280&q=85 (28x28px), "Download on the" + "App Store", links to Apple App Store
111	Google Play button: Play icon image https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260405_154325_6e98dcdb-51ba-446a-8c52-2d2f2675a575.png&w=1280&q=85 (28x28px), "Get it on" + "Google Play"
112	Both: white bg, 2px border #CFCFCF, border-radius 12px, padding 10px 20px, box-shadow 0 4px 0 #CFCFCF, hover bg #f0f0f0
113	Store label: 11px, font-weight 600, color rgb(75,75,75)
114	Store name: 16px, font-weight 700, color rgb(75,75,75)
115
116	SECTION 6: SUPER DUOLINGO (DARK)
117	Background: #121138, flex row centered, gap 40px, padding 186px 80px
118	Left: 530x530px video (bg matches dark section #121138)
119	Right:Super Duolingo logo (uses <picture> with <source> for SVG): https://d35aaqx5ub95lt.cloudfront.net/images/splash/3a733db6d6873e1a915f70cf72554ce3.svg (source) and https://d35aaqx5ub95lt.cloudfront.net/images/splash/dd7453522d3192d4df06d4652508b8bc.svg (img fallback), 605px wide
120	"Try 1 week free" button: white bg, dark text rgb(0,4,55), height 50px, border-radius 12px, uppercase, font-weight 700, min-width 162px, box-shadow 0 4px 0 #88879F, hover bg #c8f040
121
122	SECTION 7: DUOLINGO ENGLISH TEST
123	Same layout as Section 4 but with flex-direction: row-reverse (text on left, video on right... visually reversed)
124	h2: "duolingo english test" (with   between english and test), green, Feather Bold, 48px
125	Paragraph: "Our convenient, fast, and affordable English test integrates the latest assessment science and AI -- empowering anyone to accurately test their English where and when they're at their best."
126	Link button: "Certify your English" in blue, uppercase, 16px, font-weight 700, height 50px, border-radius 12px, hover bg rgba(28,176,246,0.08), links to https://englishtest.duolingo.com/en
127	SECTION 8: CTA - "LEARN A LANGUAGE WITH DUOLINGO"
128	Flex row with green side panels (var(--green)) on left and right that grow to fill, aligned to bottom
129	Center column:Top area: flex column centered, padding-top 40px, gap 48px
130	h1: "learn a language with duolingo" in Feather Bold, green, 64px, text-align center, max-width 800px, line-height 1.1
131	"Get started" green button (same style as hero but with width: auto, padding: 0 32px, margin-bottom: 8px)
132	Full-width video (100vw, white bg) below the CTA content
133
134	SECTION 9: FOOTER
135	Background: #4EC604, font-weight 700
136	Grid: 5 columns, gap 24px, padding 96px 64px 64px, max-width 1440px
137	Column headers: color rgb(215,255,184), 20px, font-weight 700
138	Links: color rgb(165,237,110), 16px, hover opacity 0.8 + underline
139	5 columns: "About us" (12 links), "Products" (8 links), "Apps" (2 links), "Help and support" (4 links), "Privacy and terms" (4 links) + "Social" sub-header with margin-top 32px (6 links)
140	Divider: 1px solid #A5ED6E
141	Site language section: padding 40px 64px 64px, "Site language:" label + flex-wrap list of 28 language links (14px, color rgb(165,237,110))
142	RESPONSIVE BREAKPOINTS
143	1200px and below:
144	Hero: padding 48px 40px, gap 40px
145	Content sections: padding 72px 40px, gap 60px
146	Animation wrapper: 400x400px
147	Footer grid: 3 columns, padding 64px 40px
148	900px and below:
149	Hero: column direction, padding 32px 24px, gap 32px, video 320px
150	Content sections: column direction, padding 48px 24px, gap 40px, text centered
151	Animation wrapper: 320x320px
152	Dark section: column, padding 80px 24px
153	Learn anywhere: padding 80px 24px, buttons stack vertically (max-width 280px)
154	CTA h1: 48px, green sides hidden, section becomes column
155	Footer: 2 columns, padding 48px 24px
156	Lang nav: padding 0 16px, gap 12px
157	600px and below:
158	Hero h1: 24px, video 280px
159	Text h2: 32px, paragraph 16px
160	Animation wrapper: 280x280px
161	Dark section: padding 60px 16px
162	Learn anywhere: padding 60px 16px, h2 32px
163	CTA h1: 32px, top padding 32px, gap 32px
164	Footer: single column, gap 32px
165	Lang nav: gap 16px, text 14px, flags 28px
166	Nav language button text hidden