# Babbel — Marketing Site Design Spec

> Source: babbel.com (live DOM, computed styles via scripts/extract.js), 2026-08-05 (desktop 1514px, American English). sheetsBlocked: 0 — full stylesheet coverage.
> Coverage: marketing home. Logged-in lesson app behind login (`needs-dashboard`). Captured as the distinct 4th this run after **#165 Wise turned out to be a duplicate** (already Done as #28); Babbel fills the under-represented education gap.
> Reality check: hint said "minimalist conversation-first interface … calm minimalist edtech." Accurate register, but the real signature it misses is a **high-contrast display SERIF** (Feature Text) paired with a bespoke Graphik grotesque, on a warm cream canvas, with a single italic ORANGE accent word inside otherwise near-black headlines. Genuinely distinct from Duolingo (gamified mascot maximalism) and Brilliant (warm bookish sans) — Babbel is editorial, serif-led and quiet.

## 1. Visual Theme & Atmosphere

Warm, calm and editorial language-learning. The canvas is a soft cream #f6f4ef, not white; headlines are a high-contrast display serif (Feature Text) set large at weight 400, with a single word dropped into orange italic ("Which *language* do you want to learn?") as the one flash of colour in otherwise near-black type. Body and UI switch to a bespoke Graphik grotesque, keeping the interface quiet and legible. Controls are friendly full pills (radius 4000px) with a flag-circle language picker; the single brand accent, Babbel orange #fe4d01, owns the primary CTA and the marketing banner, while links stay classic-web blue #0000ee and small secondary accents (yellow #ffd966, blue #3860be, mint) appear only in illustrations. Feels: warm, editorial, calm, approachable.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#151515` | Primary text, serif headlines |
| black | `#000000` | Deepest text |
| warm-gray | `#46443f` | Secondary text |
| gray-2 | `#555555` | Tertiary text |
| gray-3 | `#767676` | Muted labels, captions |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| cream | `#f6f4ef` | Page background |
| white | `#ffffff` | Cards, picker pills |
| light-gray | `#f4f4f4` | Inset fill |
| warm-border | `#e7e5e2` | 2px hairline borders |
| cream-border | `#d7d4cf` | Soft dividers |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| babbel-orange | `#fe4d01` | Primary CTA fill, banner, italic accent word |
| orange-hover | `#e54501` | CTA hover fill |
| link-blue | `#0000ee` | Text links (classic-web blue) |
| blue | `#3860be` | Secondary info accent |
| yellow | `#ffd966` | Illustration highlight / section block |
| pale-yellow | `#ffeeba` | Soft yellow tint |
| mint | `#f9fffa` | Info panel tint |

Rule: Babbel orange `#fe4d01` is the one brand accent — CTA, banner, and the italic display word. Rule: links are classic-web blue `#0000ee`; the other colours are illustration-only.

## 3. Typography Rules

- Faces: **Feature Text LC** (high-contrast display serif, 19× — headlines) + **Graphik Babbel LCG** (bespoke grotesque, 289× — body/UI). (Times appears as the serif fallback.) Specimen stand-ins: Feature Text → **Fraunces**; Graphik → **Inter**.
- Body: 16px / 24px / 400 / `#151515`, Graphik.

| Role | Font | Size/Line | Weight | Case |
|---|---|---|---|---|
| Display (h1) | Feature Text (serif) | 40 / 44 | 400 | none |
| Section (h2) | Feature Text (serif) | 40 / 44 | 400 | none |
| Sub (h3) | Feature Text (serif) | 32 / 40 | 400 | none |
| Body | Graphik (grotesque) | 16 / 24 | 400 | none |
| Nav / button | Graphik (grotesque) | 16 / 20 | 400–600 | none |

Patterns: the display serif runs at weight 400 (its contrast, not its weight, carries impact), normal tracking, no uppercase; a single italic accent word is set in orange. Grotesque handles everything functional.

## 4. Component Stylings

### Buttons
- **Primary (CTA)**: bg `#fe4d01` orange, text `#ffffff`, radius **4000px (full pill)**, h 36–44px, pad `6px 16px` / `10px 24px`, border 1px `#fe4d01`, Graphik 16px. Hover: bg → `#e54501`.
- **Dark pill**: bg `#151515`, text `#ffffff`, pill, h 44px, pad `10px 24px` ("Start learning").
- **Ghost**: transparent, text `#151515`, pill, 1px transparent border ("Watch").
- **Language link**: text `#0000ee`, classic-web blue.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | bg `#fe4d01` / white, pill | bg `#e54501`, border `#e54501` | white `0 0 0 2px` + 2px `#151515` outline, +2px offset | — | not captured |
| Dark pill | bg `#151515` / white | darkens | same ring | — | — |
| Link | `#0000ee` | (underline / darken) | outline | — | — |

### Inputs
- No text field captured on the home page — the hero is a language picker, not a form. Standard fields elsewhere follow the pill/rounded system.

### Cards / picker
- Language picker: white full pills, flag-circle icon (50%) + label, warm 2px `#e7e5e2` hairline, soft neumorphic-ish shadow (`rgb(199,197,199) 0 0 12px 2px`).
- Cards: white / cream, radius 16px, soft `rgba(0,0,0,.2) 0 0 18px` shadow.

### Nav / banner
- White nav, Babbel wordmark (orange "+B" mark) left; locale + Log in + orange Sign-up pill right.
- Full-width orange `#fe4d01` promo banner with white centered text.

## 5. Layout Principles

- Two-column hero: serif headline + language-picker pills.
- Warm cream canvas throughout; sections alternate cream / white / occasional yellow block.
- Generous rounded pills and flag-circle iconography give a friendly, tactile feel.
- Section headlines are big display serif, centered or left, with an italic orange accent word.

## 6. Depth & Elevation

- Radii: pills `4000px` (dominant, 30×), cards `16px`, small `3–4px`, some `20px`/`24px`, `69px` from percentage rounding.
- Shadows are soft: `rgba(0,0,0,.2) 0 0 18px`, a neumorphic dual `rgb(199,197,199) -3px -3px 5px` + `0 0 12px 2px` on picker pills. Borders: 2px `#e7e5e2` (warm), 1px `#151515`, 1px `#fe4d01`, 1px `#d7d4cf`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.1s | ease-in-out | links, text (house transition, 48×) |
| all | 0.1s | ease-out | buttons, hovers |
| transform | 0.3s | ease | reveals, picker |
| all | 0.2s | ease-in | misc |

- House transition: fast `color 0.1s ease-in-out`. Keyframes: `fade-in` (+ OneTrust consent). No third-party animation library.
- **Anti-pattern: no `prefers-reduced-motion` block** (reducedMotionBlocks 0) — recommend adding one.

## 8. Backgrounds, Effects & WebGL

- Flat warm surfaces: no CSS gradients, no canvas/WebGL, no background video, no grain (rasterLayers 1 — a single decorative image; canvases 0, three false, videos 0).
- No `backdrop-filter`. Atmosphere is warm colour + friendly illustration, not effects.

## 9. Do's and Don'ts

### Do
- Use a warm cream canvas `#f6f4ef`, not white.
- Set headlines in a high-contrast display serif at weight 400, with ONE italic orange accent word.
- Switch to a grotesque (Graphik / Inter) for all body and UI.
- Make Babbel orange `#fe4d01` the single brand accent (CTA + banner + accent word); links classic-web blue `#0000ee`.
- Round controls to full pills (4000px); use flag-circle iconography in the language picker.
- Keep shadows soft and warm; use 2px `#e7e5e2` hairlines.

### Don't
- Don't set the display serif bold — contrast, not weight, carries it.
- Don't use a cool-white or gray canvas; the neutral is warm cream.
- Don't add a second brand accent beside orange (yellow/blue/mint are illustration-only).
- Don't make the interface loud or gamified — it stays calm and editorial.
- Don't ship without a reduced-motion block.

## 10. Responsive Behavior

- Dense bespoke ladder: 360, 400, 425, 530, 550, 600, 640, 720, 768, 896, 1032, 1440, 1600px.

| Breakpoint | What changes |
|---|---|
| ~768px | hero stacks: picker drops below the headline; nav collapses |
| 1032 / 1440 / 1600px | max content width caps, display serif scales up |

- Light-only (`darkSchemeBlocks` 0), minimal container-query use (1). No dark theme.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f6f4ef` · Text `#151515` · Muted `#46443f` · Border `#e7e5e2` · Accent `#fe4d01` · Link `#0000ee`
- Faces: Feature Text (display serif, Fraunces stand-in) + Graphik (grotesque, Inter stand-in) · Body 16px · Radius: 4000px pill / 16px card · Control height: 36–44px
- Focus: white `0 0 0 2px` + 2px `#151515` outline, +2px offset · CTA hover: `#e54501`

<babbel-marketing_design_language>
Use the Babbel design language: warm, calm, editorial language-learning. Canvas is soft cream #f6f4ef (never white or cool-gray). Headlines are a high-contrast display SERIF (Feature Text; Fraunces stand-in) set large at weight 400 with normal tracking, near-black #151515, and ONE italic accent word dropped into Babbel orange #fe4d01 as the single flash of colour. All body and UI use a bespoke grotesque (Graphik; Inter stand-in) at 16px/400. Orange #fe4d01 is the one brand accent (primary CTA and full-width promo banner, hover #e54501); links are classic-web blue #0000ee; secondary yellow #ffd966, blue #3860be and mint appear only in illustration. Controls are friendly full pills (radius 4000px, h36-44) — orange primary, near-black #151515 pill, or ghost — with a flag-circle language picker in white pills (2px #e7e5e2 hairline, soft neumorphic shadow). Cards round to 16px with soft rgba(0,0,0,.2) 0 0 18px shadows. Motion is fast and quiet (color 0.1s ease-in-out, transform 0.3s ease); focus draws a white 0 0 0 2px inner plus a 2px #151515 outline at 2px offset. Feels: warm, editorial, calm, approachable. Avoid: a bold display serif, a white/cool-gray canvas, a second brand accent beside orange, a loud gamified tone, and shipping without a reduced-motion block.
</babbel-marketing_design_language>