<!--
ROLE: You are a senior product designer + frontend engineer pair.
TASK: Treat the DESIGN.md below as the SINGLE SOURCE OF TRUTH for visual style.
Every component you produce in this codebase must:
  • Reuse the color tokens declared in YAML frontmatter (no ad-hoc hex values)
  • Use the typography scale (display / h1 / h2 / body / label / mono) verbatim
  • Match the radius scale (button / card / pill) to the named tier
  • Honor the elevation table for shadows
  • Respect the motion section (durations, easings, reduced-motion)
  • Pass the contrast pairs in the accessibility section
INPUT: Project files at ${CWD}.
OUTPUT: Code, not paragraphs. Quote the relevant section number when you cite a token (e.g. "per §3 Typography Rules").
PRINCIPLE: A token used once is a one-off; a token used three times is a system. Prefer system fidelity over local cleverness.
-->

---
name: Babbel
tagline: Language selection made approachable through warm editorial type and
  compact pills.
spec: webdesignhot/0.2
profile: catalog
source_url: https://www.babbel.com/
quality: auto
published_at: 2026-09-12T05:46:26.448Z
updated_at: 2026-09-12T05:46:26.448Z
categories: [education]
tags: [light, orange, sans, learning]
preview_swatch: ["#f6f4ef", "#fe4d01", "#151515"]
x-webdesignhot:
  author: webdesignhot
  quality: auto
  featured: false
  published_at: 2026-09-12T05:46:26.448Z
  updated_at: 2026-09-12T05:46:26.448Z
  categories:
    - education
  tags:
    - light
    - orange
    - sans
    - learning
  preview_swatch:
    - "#f6f4ef"
    - "#fe4d01"
    - "#151515"
  related:
    - duolingo
    - quizlet
    - skillshare
  description: Babbel starts with a language choice, not a long explanation. A
    warm editorial headline and compact flag-and-label pills sit beside a lively
    photographic collage. Orange supplies identity and emphasis without
    replacing the neutral reading surface.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
colors:
  bg: "#f6f4ef"
  text: "#151515"
  brand: "#fe4d01"
  on-brand: "#151515"
  surface: "#ffffff"
typography:
  display:
    family: Feature Text LC, Georgia, serif
    weights:
      - 400
  body:
    family: Graphik Babbel LCG, Arial, sans-serif
    weights:
      - 400
      - 600
  scale:
    h1:
      fontSize: 40
      fontWeight: 400
      fontFamily: Feature Text LC, Georgia, serif
    body:
      fontSize: 16
      fontWeight: 400
      fontFamily: Graphik Babbel LCG, Arial, sans-serif
radius:
  action: 9999
components:
  button-primary:
    base:
      bg: brand
      text: on-brand
      radius: 9999
---

Scope: public homepage sampled at 1440px and 390px on 2026-09-12. Font names are observed CSS declarations, not redistributed font assets. Body size outside an explicitly measured role is a 16px implementation baseline; focus, validation, timing, and alternate themes below are recommendations, not audited source states. No transactional flow was submitted.

## 1. Visual Theme & Atmosphere

Babbel starts with a language choice, not a long explanation. A warm editorial headline and compact flag-and-label pills sit beside a lively photographic collage. Orange supplies identity and emphasis without replacing the neutral reading surface.

## 2. Color Palette & Roles

The page uses #f6f4ef warm white, #151515 ink, white choice surfaces, and #fe4d01 orange. The catalog action foreground uses dark ink for a safer derived pair; source white-on-orange campaign controls need independent contrast review.

## 3. Typography Rules

Feature Text LC supplies the 40px desktop and 32px mobile serif heading, including an orange italic emphasis. Graphik Babbel LCG supplies control labels and reading text. Do not import the browser default Times face or consent-dialog fallback into the design scale.

## 4. Component Stylings

Language controls are white outlined pills with both flag and written language. Keep regional variants explicit and preserve a separate more-languages path. The photographic collage is supporting evidence, not a selectable control grid.

## 5. Layout Principles

The desktop first section places language choice on the left and collage on the right. A narrow orange proof band separates it from the next centered section. Mobile prioritizes the two-column language selector before supporting imagery.

## 6. Shapes & Radius Scale

The measured language-option radius is effectively a full pill. Use this for short choices, not for every section. Image tiles may have distinct curved masks; avoid nesting the selector inside another decorative rounded card.

## 7. Depth & Elevation

Choice boundaries are subtle and the neutral canvas remains flat. Photography contributes contrast and texture. The Cookie settings panel is not part of the product component vocabulary and was excluded from token selection.

## 8. Interaction & Motion

A language selection should keep the selected locale visible and allow correction before purchase. No subscription or learning session was opened during the audit. Suggested validation and transitions should be presented as application behavior, not measured brand motion.

## 9. Accessibility & A11y

Flags cannot substitute for readable language names. Provide full labels for regional variants and keyboard-operable choices. Maintain adequate touch targets even when the visible pill is compact, and do not use orange text without a contrast test.

## 10. Responsive Behavior

At 390px the heading is 32px and language choices remain in two columns. Allow long language labels to wrap without shrinking the flag or causing horizontal overflow. Supplemental collage content should not displace the first choice.

## 11. Content & Voice

Use accessible learning language and concrete next actions. Learning-speed and effectiveness claims require their source and context; do not bake statistics into an evergreen design template.

## 12. Dark Mode & Theming

The observed theme is warm light. No dark learning interface was audited. An alternate theme should preserve choice legibility and the editorial serif/sans contrast rather than simply invert orange and cream.

## 13. Lineage & Influences

This entry describes the public language-selection homepage, not the lesson player or paid learning application. Serif editorial tone, regional language pills, and orange emphasis are the captured distinguishing features.

## 14. Do's and Don'ts

Keep written language labels, preserve regional differences, and make the next step reversible. Avoid using only flags, copying consent-panel styling, or declaring untested lesson interactions as part of this homepage extraction.

## 15. Agent Prompt Guide

Create a warm language-selection page with a serif question, white labeled language pills, and restrained orange identity. Test the longest regional labels at mobile width and keep purchase claims outside the design tokens.