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

# Le Puzz · Design System

> Vintage puzzle-shop energy, bright yellow and unapologetically odd

**Theme:** light · **Industry:** ecommerce · **Source:** https://lepuzz.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._

Le Puzz pairs a dense, collectible puzzle catalog with a muted gray canvas, signature yellow accents, and expressive serif typography. Its playful editorial imagery and straightforward shopping controls make the homepage feel like a lively print catalog brought online.

## North star

Let a calm gray canvas and tightly repeated catalog structure make the signature yellow, oddball puzzle artwork, and editorial serif moments stand out.

## Overview

The page is anchored by a cool gray canvas (#c8cbcd), creating a quiet backdrop for the bright yellow (#ffd931) header, navigation, product packaging, and quick-add controls. Near-black (#231f20) provides the main branded ink for navigation, buttons, and dark callouts, while black (#000000) appears in some text and product-card treatments; white (#ffffff) is a secondary surface rather than the dominant page background. Typography mixes expressive Times Now serif headings and body copy with Helvetica and Helvetica Neue for navigation, labels, and compact uppercase actions. A narrow centered introductory headline gives way to a long, dense product catalog with repeated puzzle-cover images and yellow pill-shaped buttons. Editorial interludes, customer imagery, press marks, and social tiles interrupt the grid, keeping the scroll varied without abandoning the catalog-first structure. The product artwork supplies many additional colors, but the brand system itself stays restrained and consistent.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#231f20` | `--color-soft-ink` | brand | Near-black branded ink for navigation, dark promotional callouts, button text, and hairline borders. |
| Puzzle Gray | `#c8cbcd` | `--color-puzzle-gray` | neutral | Dominant page canvas behind the product catalog, editorial blocks, and social section. |
| Puzz Yellow | `#ffd931` | `--color-puzz-yellow` | accent | Signature header and navigation bands, puzzle-cover framing, quick-add controls, and highlight pills. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Secondary light surface; present in select canvas and content areas rather than the main page background. |
| Print Black | `#000000` | `--color-print-black` | semantic | Text and occasional card or button content, including product information and cart details. |

### Semantic aliases

`--color-canvas` → `#c8cbcd` (Puzzle Gray) · `--color-surface` → `#ffffff` (Paper White) · `--color-text` → `#000000` (Print Black) · `--color-text-muted` → `#231f20` (Soft Ink) · `--color-border` → `#231f20` (Soft Ink) · `--color-accent` → `#ffd931` (Puzz Yellow) · `--color-on-accent` → `#231f20` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#c8cbcd` | 12.88:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#231f20` | `#c8cbcd` | 10:1 | AAA |
| `#231f20` | `#ffffff` | 16.3:1 | AAA |
| `#ffd931` | `#c8cbcd` | 1.18:1 | fail |
| `#ffd931` | `#ffffff` | 1.38:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-display` | webfont | 400, 300, 100 | Light navigation, body copy, and larger lightweight headings. | Inter |
| Times Now | `--font-body` | webfont | 400, 100 | Expressive page headings, product names, and editorial body copy. | Bodoni Moda |
| Helvetica Neue | `--font-helvetica-neue` | webfont | 400, 100 | Compact uppercase buttons, eyebrow labels, and utility text. | Inter |

- **Helvetica:** Use light weights for navigation and large headings; navigation has loose tracking, while body copy stays compact.
- **Times Now:** Regular serif with a distinctive, print-like character; use for the welcome line, product labels, and editorial statements.
- **Helvetica Neue:** Small uppercase controls use noticeable letter spacing; keep these utility labels crisp and restrained.

### Type scale — Perfect Fourth (ratio ≈ 1.309, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 47px | 400 | 0.9 | 0 | — | Times Now | Main welcome headline above the product catalog. |
| h2 | 40px | 100 | 0.9 | 0 | — | Helvetica | Large lightweight section titles and editorial headings. |
| h3 | 27px | 400 | 1.93 | 0 | — | Times Now | Prominent serif titles for promotional blocks and stories. |
| h4 | 23px | 400 | 1.15 | 0 | — | Times Now | Smaller serif subheads and supporting editorial titles. |
| body | 16px | 400 | 1.15 | 0 | — | Times Now | Product descriptions, story copy, and other reading text. |
| caption | 11px | 400 | 1.15 | 0.091em | — | Helvetica | Compact, tracked labels and image or product captions. |
| button | 11px | 400 | 2.27 | 0.073em | uppercase | Helvetica Neue | Small uppercase quick-add and shopping actions. |
| nav | 16px | 300 | 2.63 | 0.063em | — | Helvetica | Primary navigation and header utility links. |
| eyebrow | 11px | 400 | 1.15 | 0.073em | uppercase | Helvetica Neue | Small uppercase introductory labels and overlines. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 5, 10, 11, 15, 20, 25, 30, 40, 50, 70 px.
- Section rhythm 70px · element gap 50px · card padding — · max content width 615px.

The homepage uses a full-width header and a centered catalog region measured at a 615px page max width, with the screenshot showing product groups spread broadly across the canvas. A short centered welcome statement sits above a dense, repeated product grid; editorial images and feature copy occasionally span multiple grid cells. The long catalog scroll is broken up by review, press, social, and image-led sections. Spacing is spacious between major sections, while product cards themselves are compact and repetitive.

## Shape & elevation

- Radius: button `9999px` · card `10px` · media `10px` · xs `10px` · sm `55px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease` on interactive elements.

The interface is mostly flat: broad gray and yellow color fields do the structural work, with no measured shadow system. Product images and cards sit directly on the canvas. Fine dark rules divide header navigation cells, while rounded corners are reserved for buttons, select media, and occasional cards rather than being used as a universal treatment.

## Imagery

Puzzle box covers and product photographs dominate, often shown as upright rectangular cards with bright yellow packaging. Large lifestyle photographs and editorial collages punctuate the catalog, with playful captions placed over images in rounded yellow or dark pills. Artwork inside puzzle products is intentionally colorful and varied; it is product content, not a reason to expand the core brand palette.

## Components

### Header and navigation

A yellow announcement and brand area sits above a yellow segmented navigation row. Use near-black text and thin dark dividers between links.

### Puzzle product card

A compact catalog item pairs an upright puzzle-cover image with a serif product name, concise price and piece-count details, and a yellow quick-add action.

### Quick-add button

Small uppercase Helvetica Neue label on a yellow pill with near-black text; repeated consistently beneath available products.

### Promotional image block

Large puzzle or lifestyle image with a centered rounded caption pill, supported by a short editorial explanation.

### Editorial review block

A large portrait, oversized serif quotation, attribution, and compact review link sit alongside a checkerboard-backed product-story graphic.

### Social tiles

Four image-led social previews appear in a row with prominent platform labels beneath them, against the continuing gray canvas.

### Measured component styles

- **Primary button** (“QUICK ADD”): background #ffd931 · text #231f20 · radius 12px · padding 0px 15px · 400 11px Helvetica Neue · uppercase
- **Secondary button** (“New Puzzles Have Landed!”): background #231f20 · text #ffd931 · radius 25px · padding 0px 20px · 400 27px Times Now
- **Link**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman
- **Input**: transparent background · text #000000 · radius 0px · padding 1px 2px · 400 16px Helvetica
- **Card** (“SOLD OUT”): background #a6a8aa · text #000000 · radius 10px · padding 0px · 400 11px Helvetica Neue · uppercase
- **Navigation item** (“Enter email to sign up + get 10% OFF!”): transparent background · text #231f20 · radius 0px · padding 0px · 300 16px Helvetica

## Do

- Keep the cool gray canvas as the dominant field.
- Use signature yellow for primary shopping actions and key highlights.
- Make the product catalog repetitive and image-led.
- Use serif display and editorial text for a print-catalog feel.
- Keep utility buttons small, uppercase, and clearly legible.
- Break up long product runs with occasional editorial imagery.

## Don't

- Do not turn product-art colors into the core brand palette.
- Do not add gradients or ornamental shadows.
- Do not replace the catalog with oversized minimalist product cards.
- Do not make every heading use the same typeface.
- Do not use rounded corners indiscriminately.
- Do not hide pricing or quick-add actions beneath decorative imagery.

## Agent prompt

Build a new Le Puzz-style ecommerce page with a muted Puzzle Gray (#c8cbcd) canvas and a strong Puzz Yellow (#ffd931) header, navigation, and primary shopping actions. Use Soft Ink (#231f20) for branded text, dark callouts, and thin dividers; reserve Paper White (#ffffff) for occasional light surfaces and Print Black (#000000) for clear product text. Pair expressive serif editorial typography with clean sans-serif navigation and compact uppercase utility labels. Make the main content a dense, consistent puzzle product grid with prominent cover art, simple product details, and repeated quick-add pills. Add a few image-led editorial or customer-story blocks to vary the long scroll, but keep the catalog dominant. Keep the interface flat, avoid shadows and gradients, and use rounded corners selectively.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-grid | Long gray-canvas catalog with repeated product cards, occasional multi-column promotional images, and yellow quick-add controls. | quick add, price and piece count, sold-out status, editorial interruptions | yellow product packaging, gray canvas, serif product labels, yellow pill actions |
| 2 | feature-split | Two-column editorial section pairing a portrait and customer quote with a puzzle-piece feature graphic. | customer testimonial, review link, product quality explanation | serif quotation, portrait image, checkerboard graphic, centered section title |
| 3 | logo-cloud | Compact press-mention strip with a short introductory line and a row of publication marks. | press credibility, publication recognition | small serif copy, publication logos, yellow horizontal band |
| 4 | content-feed | Centered heading above four image tiles in a horizontal row, with large platform labels below. | social discovery, platform links | image tiles, large sans-serif labels, gray background |
| 5 | gallery | Full-bleed close-up puzzle image across the page width. | immersive brand imagery | edge-to-edge photo, visible puzzle-piece texture |

## Source CSS custom properties (selected)

```css
--junipOutlineColor: #637381;
--junipPrimaryColor: #ffd931;
--junipButtonColor: #ffd931;
--junipButtonOutlineColor: #ffd93180;
--junipStarColor: #ffd931;
--junipButtonTextColor: #000;
--junipBorderColor: rgba(0, 0, 0, 0.08);
```

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