---
version: alpha
name: "Babbel"
description: "Language selection made approachable through warm editorial type and compact pills."
colors:
  bg: "#f6f4ef"
  text: "#151515"
  brand: "#fe4d01"
  on-brand: "#151515"
  surface: "#ffffff"
typography:
  display:
    fontFamily: "Feature Text LC"
    fontSize: "72px"
    lineHeight: 1.6
    letterSpacing: "-0.025em"
  body:
    fontFamily: "Graphik Babbel LCG"
    fontSize: "16px"
    lineHeight: 1.6
  mono:
    fontFamily: "JetBrains Mono"
rounded:
  button: "8px"
  card: "14px"
  pill: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "32px"
  xl: "64px"
---

## Overview

## Overview

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.

## Colors

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.

## Typography

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.

## Layout

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.

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.

## Elevation & Depth

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.

## Shapes

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.

## Components

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.

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.

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.

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.

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.

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.

## 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.

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.