---
title: "La puce à l'oreille design system"
variant: extended
source: https://lpalo.com/
captured_at: 2026-10-12
theme: light
industry: entertainment
generator: Design DNA (https://four.wiralomi.com/style/lpalo-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# La puce à l'oreille · Design System

> Playful podcasts for curious young minds

**Theme:** light · **Industry:** entertainment · **Source:** https://lpalo.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A playful children’s podcast homepage led by an oversized typographic hero and a soft pink canvas. Hand-drawn subject-themed doodles and outlined pill navigation give the page a warm, approachable character.

## North star

Give oversized, confident typography center stage on soft color fields, then surround it with sparse hand-drawn details.

## Overview

The visual identity balances a soft, warm canvas with assertive black typography. The hero uses pale pink (#f6e0db) as a full-width backdrop, giving the oversized centered headline room to dominate without feeling severe. Manrope carries the logo-like display, navigation, and bold sans-serif headings; Alfa Slab One adds a distinctive editorial voice to selected headings and body text. Navigation is built from white pill shapes with fine black outlines, while small coral details add a lively cue. Hand-drawn science, reading, and audio motifs sit around the headline, with a tilted aqua text panel entering at the bottom of the viewport. The measured palette also includes yellow, lime, purple, and blue; reserve these for section accents or small illustrative details rather than treating them as equally prominent blocks. Keep composition airy, central, and playful, with clean black-on-light contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Story Ink | `#000000` | `--color-story-ink` | neutral | Headline, body copy, logo, and thin outlines around navigation pills and content cards. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Page canvas and the fill of outlined pill navigation controls. |
| Curious Yellow | `#e7db4c` | `--color-curious-yellow` | accent | Bright accent for selected colored section backgrounds and small graphic details. |
| Ear Coral | `#ef724f` | `--color-ear-coral` | accent | Coral accent in navigation details, footer areas, and selected section backgrounds. |
| Play Lime | `#6ed311` | `--color-play-lime` | accent | High-energy accent used in a section band or small decorative graphic. |
| Blush Canvas | `#f6e0db` | `--color-blush-canvas` | surface | Dominant hero background, supporting the black headline and playful doodle illustrations. |
| Plum Spark | `#981082` | `--color-plum-spark` | accent | Secondary accent appearing in navigation and footer details; use sparingly. |
| Aqua Note | `#ace2df` | `--color-aqua-note` | surface | A tilted aqua panel and occasional contrasting surface detail within the hero artwork. |
| Sky Scribble | `#84bfff` | `--color-sky-scribble` | accent | Small illustrative blue detail only; not a defining page background or text color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f6e0db` (Blush Canvas) · `--color-surface-2` → `#ace2df` (Aqua Note) · `--color-text` → `#000000` (Story Ink) · `--color-border` → `#000000` (Story Ink) · `--color-accent` → `#e7db4c` (Curious Yellow) · `--color-accent-2` → `#ef724f` (Ear Coral) · `--color-accent-3` → `#6ed311` (Play Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f6e0db` | 16.6:1 | AAA |
| `#000000` | `#ace2df` | 14.7:1 | AAA |
| `#e7db4c` | `#ffffff` | 1.43:1 | fail |
| `#e7db4c` | `#f6e0db` | 1.13:1 | fail |
| `#e7db4c` | `#ace2df` | 1:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope | `--font-display` | webfont | 800, 500, 400, 700 | Display, navigation, bold headings, and captions. | Plus Jakarta Sans |
| Alfa Slab One | `--font-body` | webfont | 400 | Editorial headings and selected body or card text. | Bree Serif |

- **Manrope:** Use strong weights for the oversized display and navigation; keep text case natural and tracking neutral.
- **Alfa Slab One:** Distinctive slab display character; use at regular weight for contrast with Manrope’s heavy sans forms.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 119.5px | 800 | 1 | 0 | — | Manrope | Oversized hero display lettering, visually dominant above the fold. |
| h1 | 46px | 400 | 1.09 | 0 | — | Alfa Slab One | Editorial-style primary heading where slab-serif character is used. |
| h2 | 35px | 400 | 1.09 | 0 | — | Alfa Slab One | Section-level editorial headings. |
| h3 | 34px | 800 | 1.24 | 0 | — | Manrope | Strong sans-serif headings within page content. |
| h4 | 25px | 500 | 1.6 | 0 | — | Manrope | Supporting subheadings and introductory text. |
| body | 16px | 400 | normal | 0 | — | Alfa Slab One | Editorial body and podcast card copy. |
| caption | 12px | 700 | 1.5 | 0 | — | Manrope | Compact labels and supporting metadata. |
| nav | 25px | 800 | 1.12 | 0 | — | Manrope | Large, bold primary navigation labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 5, 8, 10, 15, 16, 20, 24, 25, 30, 38, 46, 80 px.
- Section rhythm 80px · element gap 5px · card padding — · max content width 864px.

The measured content max width is 864px, with a comfortable overall density and a section rhythm of 80px. In the hero screenshot, the headline is centered within a full-width blush field, while the horizontal navigation spans the upper edge. Let the headline occupy the central visual axis and leave generous open space around it. Use smaller outlined navigation pills at the right and distribute decorative drawings around, rather than over, the main copy. The measured page section is tall and single-column.

## Shape & elevation

- Radius: card `10px` · nav `9999px` · xs `10px` · sm `47px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease-out` on interactive elements.

The page reads as mostly flat: no measured shadows, with contrast created by colored section fields and thin black outlines. Navigation uses white, pill-shaped fills with black borders; content cards have a measured 2px black border and 10px radius. Keep layering limited to overlapping or tilted illustrated panels.

## Imagery

The first viewport uses hand-drawn, outlined doodles—an atom, headphones, a book, and a small robot—rather than photography. Keep illustrations light, playful, and scattered around the headline, with occasional colored fills. A skewed aqua text panel is partly visible near the hero’s lower edge. The artwork should feel like supporting marginalia, not a competing focal point.

## Components

### Primary pill navigation

Large white rounded pills with black outlines and bold Manrope labels; the Explorer item includes a small coral downward marker.

### Secondary navigation

Small white capsule links with black outlines, aligned after the main navigation items.

### Hero headline

Oversized, centered black multi-line text on a full-width blush field, with surrounding open space.

### Decorative doodles

Sparse, fine black line illustrations of science, reading, and audio subjects, accented with small palette colors.

### Podcast content card

Measured cards use a 2px black outline, 10px radius, and 16px Alfa Slab One text.

### Tilted aqua panel

Aqua text panel enters at an angle from the lower hero edge as a secondary visual layer.

### Measured component styles

- **Link** (“Sciences & nature Terre Académie \| Biosp”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Alfa Slab One
- **Card** (“Sciences & nature Terre Académie \| Biosp”): transparent background · text #000000 · border 2px solid #000000 · radius 10px · padding 0px · 400 16px Alfa Slab One
- **Navigation item** (“Balados Collaborations Durée Thématiques”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Alfa Slab One

## Do

- Use Blush Canvas (#f6e0db) as the hero’s dominant field.
- Keep the main headline large, black, and centrally aligned.
- Build navigation from white pills with black outlines.
- Use hand-drawn doodles as sparse supporting details.
- Contrast heavy Manrope with selective Alfa Slab One.
- Reserve bright palette colors for accents and illustrated details.

## Don't

- Don’t replace the airy hero with a dense grid.
- Don’t let decorative artwork obscure the headline.
- Don’t add shadows as a default elevation treatment.
- Don’t use bright accents as the primary text color.
- Don’t make navigation look like filled rectangular buttons.
- Don’t introduce photography where simple line illustrations fit.

## Agent prompt

Create a new page in the La puce à l'oreille visual style. Use Blush Canvas (#f6e0db) for a broad hero field, Story Ink (#000000) for high-contrast text and outlines, and Paper White (#ffffff) for pill navigation fills. Set the main message in oversized, centered Manrope, mixing in Alfa Slab One for editorial contrast. Place outlined white capsule navigation along the top and surround the hero message with a few fine, hand-drawn subject-related doodles. Introduce Aqua Note (#ace2df), Ear Coral (#ef724f), Curious Yellow (#e7db4c), or Play Lime (#6ed311) only as restrained accents. Keep the page comfortable and open, use the measured 864px content maximum and 80px section rhythm, and favor flat surfaces, thin black borders, and rounded cards over shadows or complex effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, full-width blush hero with centered headline, top navigation, and scattered illustrations. | Prominent primary navigation, Clear headline hierarchy, Illustrative visual cues | Outlined pill navigation, Oversized black typography, Pastel hero field, Hand-drawn doodles |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/lpalo-com