Warm, calm, editorial language-learning — captured as the distinct 4th this run after #165 Wise turned out to be a duplicate (already Done as #28), filling the under-represented education gap. The hint’s "minimalist conversation-first" register is right, but the real signature it misses is a high-contrast display SERIF (Feature Text LC, 19 uses, Fraunces stand-in) paired with a bespoke Graphik grotesque (Graphik Babbel LCG, 289 uses, Inter stand-in), on a warm cream canvas #f6f4ef (never white), with a single italic ORANGE word dropped inside otherwise near-black #151515 headlines ("Which language do you want to learn?"). The display serif runs at weight 400 (contrast, not weight, carries it) with normal tracking, while the grotesque handles all 16px body/UI. Babbel orange #fe4d01 is the one brand accent — primary CTA (hover #e54501) and a full-width promo banner — while links stay classic-web blue #0000ee and 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. There are no CSS gradients, canvas or video (a single decorative raster; atmosphere is warm colour + friendly illustration). Motion is fast and quiet (color 0.1s ease-in-out, transform 0.3s ease) with a fade-in keyframe and no animation library; focus draws a white inner 0 0 0 2px plus a 2px #151515 outline at 2px offset. One anti-pattern: no prefers-reduced-motion block. Dense bespoke breakpoint ladder (360–1600px), light-only. Feature Text and Graphik Babbel are licensed, so the preview stands in with Fraunces and Inter.
⚠ needs-dashboard
Browse Babbel in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.