# Lpalo · Design system migration spec

> Source: https://lpalo.com  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using extreme typography and bold, flat illustration to create a highly memorable and whimsical brand identity for a niche audience.

## 1. Identity DNA

Lpalo's design system begins not with a grid, but with the open page of a storybook. It takes the analogue warmth of a child's picture book—its generous whitespace, its bold ink lines, its playful disregard for rigid columns—and translates it into a functional digital framework.

**One-liner:** A whimsical, typography-forward platform for offbeat children's podcasts.
**Keywords:** Children · Podcasts · Storytelling · Whimsy · Education
**Analogy:** A playful children's storybook mixed with modern digital illustration.

## 2. Color

The color system is built on contrast and warmth. A soft pink ground provides a constant, friendly stage for the true actors: heavy black type and vibrant, flat color accents that pop like stickers on a page.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FDDFE1` | main background |
| `--ink` | `#151515` | body text |
| `--muted` | `#4A4A4A` | placeholder |
| `--accent` | `#EF724F` | single accent |
| `--line` | `rgba(0, 0, 0, 0.8)` | divider |

**Color principle:** Warm, pastel backgrounds with high-contrast black typography and playful, flat-colored accents.

The guiding principle is warmth first; every palette choice ensures the interface feels welcoming and playful, never sterile or corporate.

## 3. Typography

Typography is the primary voice of the system, deployed with deliberate extremes. Display faces are chosen for their weight and personality, while a clean humanist sans-serif ensures body text remains highly legible and approachable.

- **Display:** slab-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.95 | 800 | -2px | Hero headlines and primary callouts |
| body | 16px | 1.6 | 400 | 0 | General reading text and navigation items |
| label | 12px | 1.4 | 500 | 0.5px | Small UI labels and secondary navigation |

**Type rules:**
- Display type is exclusively used for massive, attention-grabbing headlines.
- Body text maintains a clean, neutral sans-serif for readability.
- Navigation items use a mix of capsule buttons and standard links.

## 4. Spacing

Spacing is governed by a generous, open rhythm. The layout breathes, allowing massive type and scattered illustrations room to coexist without crowding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous, open spacing that allows the large typography to breathe.

## 5. Surfaces

Surfaces are defined by bold, graphic borders rather than subtle shadows. Depth is suggested through overlapping elements and thick, playful outlines, creating a flat, illustrative feel with a tangible sense of layering.

- **Radius:** sm 4px · md 8px · lg 48px · pill 999px
- **Borders:** Bold 2px solid black outlines on buttons and illustrations

## 6. Layout

The layout skeleton is deliberately asymmetrical, rejecting rigid grids for a more dynamic, collage-like composition. Elements are positioned to feel scattered and overlapping, with illustrations floating freely around core content blocks.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric, playful layout with overlapping elements and scattered illustrations.

## 7. Motion & Interaction

Motion philosophy is rooted in physicality and delight. Interactions are given weight and bounce through spring-based animations, making the interface feel tactile and responsive rather than merely transitional.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.68, -0.6, 0.32, 1.6)`
- **Patterns:**
  - Bouncy spring transitions for UI elements.
  - Subtle floating animations for background illustrations.

- **Hover:** Color shifts and subtle scaling on buttons.
- **Click:** Springy, tactile feedback via custom bouncy easing.
- **Transition:** Smooth, playful transitions between states.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is an extension of the visual tone: playful, whimsical, and direct. Headlines are bold and offbeat, while calls to action are clear, actionable, and presented with the same pill-shaped confidence as the buttons.

- **Tone:** Playful, whimsical, and highly energetic.
- **Headline style:** Bold, offbeat, and large-scale.
- **CTA style:** Clear, actionable, and presented in pill-shaped buttons.
- **Avoid:** Corporate / Stiff / Minimalist / Serious / Jargon

### Don'ts
- ❌ Don't use standard system fonts — screenshot shows a bold slab-serif and humanist sans.
- ❌ Don't use subtle shadows — screenshot shows flat design with thick 2px black outlines.
- ❌ Don't use a white background — screenshot uses a consistent warm pastel pink background.
- ❌ Don't use thin, delicate typography — screenshot features extremely bold, heavy font weights.
- ❌ Don't use rigid, strictly aligned grids — screenshot shows a playful, overlapping, and asymmetrical layout.
- ❌ Don't use muted, greyish colors — screenshot uses vibrant, saturated accents like orange and teal.

The system deliberately avoids corporate minimalism, grey palettes, and thin, delicate typography in favor of a robust, joyful, and unmistakably hand-crafted aesthetic.

## System Prompt (paste into AI tool)

```
This is a playful, typography-forward design system for a children's podcast platform. The core identity is built around massive, high-contrast slab-serif headlines and a warm, pastel aesthetic. The palette centers on a soft pink background (#FDDFE1) with bold black (#151515) text and vibrant orange (#EF724F) accents. Layouts are asymmetrical and energetic, featuring scattered line-art illustrations and pill-shaped buttons with thick black borders. Critical design rules: 1) Never use a white background or subtle shadows; 2) Typography must be bold and heavy, avoiding thin or corporate styles; 3) Embrace overlapping elements and asymmetrical compositions to maintain a sense of whimsy and playfulness.
```