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

# Filling Pieces · Design System

> Streetwear attitude, refined through an editorial lens.

**Theme:** light · **Industry:** fashion · **Source:** https://www.fillingpieces.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._

Filling Pieces pairs a restrained monochrome storefront with dramatic fashion imagery and tightly organized product rails. The homepage balances direct shopping pathways with cinematic campaign and category features.

## North star

Let monochrome interface structure recede so editorial fashion photography and shoppable product imagery lead every section.

## Overview

The page is grounded in white product sections, black navigation and promotional bands, and a pale gray language-selection strip. The measured palette is deliberately narrow; the teal chat control and colours inside garments or campaign footage are incidental rather than core interface colours. Favorit typography gives the page a clean, contemporary voice: oversized, light-feeling category headlines sit over imagery, while compact navigation, captions, and product labels stay quiet. The layout alternates cinematic full-width category panels with dense, five-item product rails and paired editorial tiles. Product photos are isolated against white, allowing silhouettes and material to carry colour. Generous image areas and clear section changes create an editorial rhythm without decorative framing. Buttons are simple, rounded rectangles with strong black-and-white contrast, while thin borders and restrained card chrome keep attention on footwear, apparel, and campaign photography.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text, navigation, black promotional strip, and dark filled shop buttons. |
| Soft Concrete | `#efefef` | `--color-soft-concrete` | surface | Pale language-selection canvas and subtle neutral page or footer areas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main product and content backgrounds, light controls, button surfaces, and fine borders. |
| Mist Grey | `#bfbfbf` | `--color-mist-grey` | neutral | Secondary measured surface tone; use sparingly for understated section or interface surfaces. |

### Semantic aliases

`--color-canvas` → `#efefef` (Soft Concrete) · `--color-surface` → `#bfbfbf` (Mist Grey) · `--color-surface-2` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#000000` | `#bfbfbf` | 11.42:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#efefef` | 1.15:1 | fail |
| `#ffffff` | `#bfbfbf` | 1.84:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| favorit | `--font-body` | webfont | 400, 600, 700 | All page typography, including display headlines, navigation, product labels, and controls. | Inter |

- **favorit:** Keep headlines large and clean; use regular weights for most copy, with compact labels and restrained tracking.

### Type scale — Custom (ratio ≈ 2.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 600 | 0.9 | -0.04em | — | favorit | Large campaign or category headline layered over full-bleed imagery. |
| h1 | 35px | 400 | 0.9 | -0.04em | — | favorit | Primary page or section headline, centered in editorial feature panels. |
| body | 16px | 400 | 1.2 | 0 | — | favorit | Supporting descriptions and short campaign or category copy. |
| caption | 12px | 400 | 1.2 | 0 | — | favorit | Product names, prices, badges, and small supporting labels. |
| button | 12px | 400 | 1.2 | 0 | — | favorit | Compact uppercase action labels on shop and discovery controls. |
| nav | 14px | 400 | 1.2 | 0 | — | favorit | Header navigation and utility links. |

OpenType features in use: `"ss04"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 16, 20, 24, 32, 48 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1400px.

Use a full-width page canvas with a centered header system and broad image-led sections. Product rails form a dense five-column presentation, with each product image, small status label, name, and price aligned consistently. Alternate these rails with tall full-bleed category features and two-column editorial blocks. Keep headline and CTA groups centered over campaign media. The measured page max width is 1400px; section rhythm is comfortable, with clear transitions rather than boxed cards.

## Shape & elevation

- Radius: button `8px` · input `8px` · media `36px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, with white backgrounds and little card decoration. Use thin borders where controls or section divisions need definition, and avoid prominent shadows. Campaign media can sit behind overlaid text, with a restrained darkening treatment rather than elevated panels. Buttons are rounded, simple, and defined primarily by their black or white fill.

## Imagery

Use fashion and product photography as the principal visual content: isolated shoes and apparel on bright neutral backgrounds, plus cinematic campaign footage or stills with models, craft, and lifestyle context. Full-bleed panels use centered white type and a subtle darkened image treatment for legibility. Product imagery stays crisp and evenly presented; colour in the photography should not expand the interface palette.

## Components

### Utility and language bar

Pale gray top strip with language selection, a white CONTINUE button, and a close control; use a black hairline-like promotional band beneath it.

### Primary navigation

White header with wordmark at left, centered category links, and search, account, wishlist, and bag utilities at right.

### Campaign hero

Full-bleed darkened fashion image with a large centered headline, short supporting line, and compact white SHOP NOW control.

### Product rail

Five evenly aligned product tiles on white, with large product imagery, small badges or wishlist icons, concise names, and prices.

### Category feature

Full-width fashion image with centered category headline, brief descriptor, and a small white DISCOVER button.

### Editorial split tiles

Two side-by-side image panels with centered title and white action button; imagery carries the story rather than added framing.

### Footer and service strip

Service promises sit above a multi-column footer containing store imagery, links, locale controls, newsletter form, and payment marks.

### Measured component styles

- **Primary button** (“CONTINUE”): background #ffffff · text #000000 · radius 8px · padding 0px 32px · 400 16px favorit
- **Secondary button** (“SHOP NOW New Arrivals”): transparent background · text #000000 · border 1px solid #ffffff · radius 8px · padding 0px 32px · 400 16px favorit
- **Link** (“LOAFER HAZY BLACK $370”): transparent background · text #000000 · radius 0px · padding 0px 16px · 400 16px favorit
- **Input** (“ENGLISH NEDERLANDS DEUTSCH”): transparent background · text #000000 · border 1px solid #000000 · radius 8px · padding 12.5px 32px 8px 32px · 400 11px favorit
- **Navigation item** (“Men Women Our World Rewards SEARCH LOGIN”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px favorit

## Do

- Use white product sections and black text as the default.
- Reserve full-bleed media for campaign and category storytelling.
- Center concise headlines and calls to action over feature imagery.
- Keep product rails orderly, image-led, and easy to scan.
- Use Favorit or a close neutral sans-serif substitute.
- Make buttons visually simple with clear black-and-white contrast.

## Don't

- Do not introduce bright interface colours beyond the measured palette.
- Do not add decorative gradients, heavy shadows, or card chrome.
- Do not let campaign text overwhelm the photography.
- Do not crowd product tiles with long descriptions.
- Do not use playful display type or excessive uppercase styling.
- Do not treat incidental photo colours as brand UI colours.

## Agent prompt

Build a new Filling Pieces page as a restrained fashion storefront. Use Gallery White (#ffffff) for the main shopping canvas, Studio Ink (#000000) for typography and strong actions, Soft Concrete (#efefef) for pale utility surfaces, and Mist Grey (#bfbfbf) only as a quiet secondary surface. Use Favorit or Inter, with compact navigation and labels contrasted against large, centered editorial headlines. Structure content as alternating full-width campaign imagery, clean product grids, and paired editorial tiles. Keep product presentation bright and consistent, with imagery, names, prices, and small status labels. Use simple rounded black or white buttons, minimal borders, and almost no elevation. Make media carry the mood; keep interface decoration subordinate and ensure overlaid text remains legible.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark campaign media beneath the header, with centered headline, supporting copy, and CTA. | primary shop CTA, campaign discovery | darkened full-bleed image, centered white type, white button |
| 2 | product-grid | Five product tiles across a white horizontal rail with a centered shop-more action below. | product browsing, wishlist access, shop all | white product backgrounds, small badges, name and price labels |
| 3 | category-nav | Single full-bleed category image with centered title, short descriptor, and discovery link. | category discovery | full-bleed photography, centered overlay, white CTA |
| 4 | product-grid | Five product cards in a white rail, followed by a centered category-wide action. | product browsing, promotion visibility, shop all | product photos, status badges, price labels |
| 5 | category-nav | Full-width campaign photo with centered category title, supporting line, and CTA. | category discovery | fashion campaign image, centered overlay text, white button |
| 6 | product-grid | Five aligned product tiles on white with a centered shop-all control. | product browsing, wishlist access, shop all | clean product imagery, small new badges, compact labels |
| 7 | category-nav | Full-bleed shoe photography with centered category heading and discovery button. | category discovery | large footwear image, centered white text, white CTA |
| 8 | product-grid | Five-column white product rail with a centered category shopping action. | product browsing, status scanning, shop all | large product photos, small badges, compact product captions |
| 9 | video | Wide campaign video with centered multi-line title, short copy, and shop CTA. | collaboration storytelling, shop collaboration | cinematic video background, centered overlay, white action button |
| 10 | feature-grid | Two equal image panels, each with a centered category label and discovery button. | cross-category navigation | paired photography, centered labels, white buttons |
| 11 | feature-split | Full-width footwear image with centered program headline, supporting text, and about link. | loyalty-program discovery | full-bleed product image, centered overlay, white CTA |
| 12 | feature-grid | Two equal image panels with centered feature headings and discovery actions. | editorial discovery, craft storytelling | paired media tiles, centered text, white buttons |
| 13 | content-feed | Two image-led editorial tiles with centered titles and compact links. | brand storytelling, read more | editorial photography, centered overlay, minimal action buttons |
| 14 | footer | Service promise strip above a multi-column footer with store image, links, newsletter, locale, and payment marks. | service reassurance, newsletter signup, store locator, locale selection | thin dividers, compact link columns, email field and send button |

## Source CSS custom properties (selected)

```css
--primary-color: #005540;
--jdgm-primary-color: #000;
--jdgm-secondary-color: rgba(0,0,0,0.1);
--jdgm-star-color: #005440;
--jdgm-write-review-text-color: white;
--jdgm-write-review-bg-color: #000000;
--jdgm-paginate-color: #000;
--jdgm-border-radius: 0;
--jdgm-reviewer-name-color: #000000;
--kl-reviews-color-light-gray: #e9e9eb;
```

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