--- version: alpha name: Babbel-design-analysis description: "A language learning app on warm cream (#f6f4ef) with near-black ink, a serif Feature Text headline voice where key words turn Babbel orange (#fe4d01), Graphik for text, sunny yellow and peach bands, and pill buttons in orange or black." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#fe4d01" on-primary: "#ffffff" ink: "#151515" ink-muted: "#46443f" canvas: "#ffffff" cream: "#f6f4ef" yellow: "#ffd966" peach: "#ffd6c4" maroon: "#733030" stone: "#efeeeb" border: "#d7d4cf" hairline: "#e7e5e2" disabled: "#dfddd8" on-disabled: "#9d998e" typography: # Font note: "Feature Text LC" is a private font and is not available in open fonts. Closest open alternative: "PT Serif". # Font note: "Graphik Babbel LCG" is a private font and is not available in open fonts. Closest open alternative: "Inter". display: fontFamily: "'Feature Text LC', Georgia, serif" fontSize: 64px fontWeight: 400 lineHeight: 72px headline: fontFamily: "'Feature Text LC', Georgia, serif" fontSize: 40px fontWeight: 400 lineHeight: 44px title: fontFamily: "'Feature Text LC', Georgia, serif" fontSize: 32px fontWeight: 400 lineHeight: 40px lead: fontFamily: "'Graphik Babbel LCG', Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 32px question: fontFamily: "'Graphik Babbel LCG', Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 28px body: fontFamily: "'Graphik Babbel LCG', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px label: fontFamily: "'Graphik Babbel LCG', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 20px rounded: xs: 4px sm: 8px md: 16px pill: 4000px spacing: sm: 8px md: 12px base: 16px lg: 24px xl: 32px components: button-signup: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 44px padding: 10px 24px button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 44px padding: 10px 24px button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 44px padding: 10px 24px button-disabled: backgroundColor: "{colors.disabled}" textColor: "{colors.on-disabled}" typography: "{typography.body}" rounded: "{rounded.pill}" height: 44px padding: 10px 24px input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" height: 44px padding: 12px 12px 12px 40px yellow-band: backgroundColor: "{colors.yellow}" textColor: "{colors.ink}" typography: "{typography.headline}" padding: 32px --- ## Overview Babbel is a language learning app with lessons, live classes and podcasts. Its site is warm cream with near-black type, a serif headline voice in Feature Text where single words turn Babbel orange, Graphik for everything else, and broad yellow and peach bands. Buttons are pills in orange (sign up) or black (start learning). [Observed] What defines the look: 1. **A serif voice.** Headlines are Feature Text at regular weight, 40 to 64 on desktop. Key words inside a headline are set in orange `#fe4d01` as emphasis. [Measured] 2. **Warm cream, not white.** The page is `#f6f4ef`, with white cards and warm grays `#e7e5e2` and `#d7d4cf` for lines. [Measured] 3. **Babbel orange.** `#fe4d01` fills the logo, the Sign up pill and the top banner, and colors emphasized words. [Measured] 4. **Sunny bands.** Yellow `#ffd966` and peach `#ffd6c4` fill whole sections. [Measured] 5. **Pills, square fields.** Buttons are full pills, 36 to 44 high. Fields keep a small 4px corner. [Measured] Source for this file: the home page, the learn Spanish page and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. Babbel does not publish its design system. Lessons sit behind an account. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Orange | `#fe4d01` with white text | Logo, Sign up, top banner, emphasized headline words [Measured] | | Ink | `#151515` | Text, the Start learning pill, outlines [Measured] | | Muted text | `#46443f` | Secondary copy [Measured] | | Cream | `#f6f4ef` | Page background [Measured] | | Canvas | `#ffffff` | Cards, fields [Measured] | | Yellow | `#ffd966` | Method and testimonial bands [Measured] | | Peach | `#ffd6c4` | Course page bands [Measured] | | Maroon | `#733030` | A full-width call to action band on the course page [Measured] | | Warm grays | `#efeeeb`, `#e7e5e2`, `#d7d4cf` | Fills, rules, field borders [Measured] | | Disabled | `#dfddd8` with `#9d998e` text | Continue before the form is filled [Measured] | ### Typography | Role | Desktop | Mobile | Face and weight | |------|---------|--------|-----------------| | Course display | 64 on 72 | not measured | Feature Text 400 [Measured] | | Log in title | 48 on 56 | 32 on 40 | Feature Text 400 [Measured] | | Headline | 40 on 44 | 24 to 32 on 32 to 40 | Feature Text 400 [Measured] | | Title | 32 on 40 | 24 on 32 | Feature Text 400 [Measured] | | Lead | 24 on 32 | not measured | Graphik 400 [Measured] | | FAQ question | 20 on 28 | 16 on 24 | Graphik 600 [Measured] | | Body | 16 on 24 | 14 on 20 | Graphik 400 [Measured] | | Label | 16 on 20 | same | Graphik 600 [Measured] | ### Shape and spacing Buttons are pills (4000), cards 16 on desktop and 8 on mobile, fields 4. [Measured] FAQ rows carry 24 by 32 padding and are 76 high. Buttons carry 10 by 24. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes Light only. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the Babbel iOS app looks and behaves was not captured. Babbel does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A bottom tab bar for today's lesson, practice, live classes and the profile is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A prominent button to start or continue a lesson. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the orange, the cream and the serif headline voice with the web. [Inferred] ## Platform: Android How the Babbel Android app looks and behaves was not captured. Babbel does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A bottom navigation bar for today's lesson, practice, live classes and the profile is expected. [Inferred] ### Main action Expected on Android: Floating action button. A prominent button to start or continue a lesson. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the orange, the cream and the serif headline voice with the web. [Inferred] ## Platform: Web The home page, a course page and the log in page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A header with a display language menu (48 high), Log in as an outlined pill and an orange Sign up pill (36 to 44 high). Course pages add a row of text tabs (Spanish Levels, Grammar, Vocab Guide, Travel), 40 high. [Measured] ### Main action Expected on Web: Page-level button. An orange `#fe4d01` pill with white text for signing up, and a black pill for "Start learning", 44 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. The log in field is 44 high, white, with a 1px `#d7d4cf` border, a 4px corner and room for a leading icon. The Continue pill stays `#dfddd8` with `#9d998e` text until the field is filled. FAQ items are full-width accordion rows. [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down at the mobile width. [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons and fields are 44 high, FAQ rows 56 to 80, the header Sign up pill 36. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. The log in page starts with an email field and a Continue button. Other options were not checked. [Observed] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. A conventional responsive site that keeps the serif headlines and pill buttons at every width. [Measured] ## Cross-platform consistency Consistent across platforms: the orange, the cream, the serif headlines and pill buttons. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Set headlines in the serif at regular weight, and color one key word orange. - Use warm cream as the page and white for cards and fields. - Use orange for signing up and black for starting to learn. - Break long pages with full yellow or peach bands. ### Don't - Don't set headlines bold. - Don't use cool grays. - Don't use orange for whole sentences. ## Known Gaps - Lessons, practice, live classes and the account sit behind an account and were not measured. - The iOS and Android apps were not captured, and Babbel publishes no design system, so every mobile topic is inferred. - Icons, motion and modals were not measured. - White text on orange `#fe4d01` measures 3.35 to 1, below the 4.5 to 1 minimum for normal text. That is the shipped pairing and was kept. The disabled Continue pill measures 2.1 to 1, which is normal for a disabled state. - Feature Text and Graphik are private. PT Serif (within 1 percent at 40px) and Inter (within 1 percent at 16px) were chosen by comparing the same line side by side. Gelasio and Space Grotesk were close seconds. - Account deletion and store policy rules were not verified.