Learning & Reference / iOS / Android / Web

Babbel

Babbel talks like a warm, well-set book: serif headlines on cream, one word lit in orange, and sunny bands between the chapters.

Download
  • #FE4D01
  • #151515
  • #F6F4EF
  • #FFD966
  • #FFD6C4
  • #733030

Color

Every color token in the file, grouped by role.

Brand

  • primary#FE4D01
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#151515
  • ink muted#46443F
  • disabled#DFDDD8
  • on disabled#9D998E

Lines

  • border#D7D4CF
  • hairline#E7E5E2

More

  • cream#F6F4EF
  • yellow#FFD966
  • peach#FFD6C4
  • maroon#733030
  • stone#EFEEEB

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Feature Text LCFeature Text LC is private and not available in open fonts. Shown in PT Serif, the closest open match.
  • Graphik Babbel LCGGraphik Babbel LCG is private and not available in open fonts. Shown in Inter, the closest open match.
  • display64px / 400 / 72px

    Babbel

  • headline40px / 400 / 44px

    Babbel

  • title32px / 400 / 40px

    Babbel

  • lead24px / 400 / 32px

    Pack my box with five dozen liquor jugs

  • question20px / 600 / 28px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • label16px / 600 / 20px

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md16px
  • pill4000px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button signup
    button-signup
  • button dark
    button-dark
  • button outline
    button-outline
  • button disabled
    button-disabled
  • input
    input
  • yellow band
    yellow-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 118 lines
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

RoleValueWhere
Orange#fe4d01 with white textLogo, Sign up, top banner, emphasized headline words [Measured]
Ink#151515Text, the Start learning pill, outlines [Measured]
Muted text#46443fSecondary copy [Measured]
Cream#f6f4efPage background [Measured]
Canvas#ffffffCards, fields [Measured]
Yellow#ffd966Method and testimonial bands [Measured]
Peach#ffd6c4Course page bands [Measured]
Maroon#733030A full-width call to action band on the course page [Measured]
Warm grays#efeeeb, #e7e5e2, #d7d4cfFills, rules, field borders [Measured]
Disabled#dfddd8 with #9d998e textContinue before the form is filled [Measured]

Typography

RoleDesktopMobileFace and weight
Course display64 on 72not measuredFeature Text 400 [Measured]
Log in title48 on 5632 on 40Feature Text 400 [Measured]
Headline40 on 4424 to 32 on 32 to 40Feature Text 400 [Measured]
Title32 on 4024 on 32Feature Text 400 [Measured]
Lead24 on 32not measuredGraphik 400 [Measured]
FAQ question20 on 2816 on 24Graphik 600 [Measured]
Body16 on 2414 on 20Graphik 400 [Measured]
Label16 on 20sameGraphik 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.