# Fillingpieces · Design system migration spec

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

> The site's strength lies in its restraint and focus on premium photography, making it a great reference for high-end consumer e-commerce design.

## 1. Identity DNA

The system is built for a brand where understated elegance is the core product. Think of it as a gallery space: the architecture is severe, minimal, and monochromatic, existing solely to frame the curated objects within. Every decision—from color to kerning—serves to direct focus to the craftsmanship of the product.

**One-liner:** Clean, typography-driven e-commerce design with a premium, understated aesthetic.
**Keywords:** urban · streetwear · minimalist · premium · craftsmanship
**Analogy:** A premium streetwear brand that values understated elegance.

## 2. Color

The palette is a study in restraint, a strict monochromatic foundation of black, white, and nuanced grays. It operates on a principle of absolute subtraction, ensuring that color is never a competing element but a silent backdrop for visual storytelling.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFEFEF` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#E5E7EB` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** A high-contrast, monochromatic palette that lets the product photography take center stage.

The governing principle is that the palette must never overpower the product; it is the negative space in which the product's character is defined.

## 3. Typography

Typography functions as the primary graphic voice, employing clean, sans-serif categories—geometric and humanist—to maintain a modern, confident tone. Rules enforce uppercase for interface elements and tight tracking for display text, creating a distinct typographic rhythm that balances boldness with clarity.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 500 | -0.5px | Hero headings and promotional text. |
| body | 16px | 1.5 | 400 | 0px | Primary body copy and standard text. |
| caption | 12px | 1.2 | 400 | 0.5px | Metadata, labels, and secondary information. |

**Type rules:**
- Use uppercase for navigation links, buttons, and secondary labels.
- Maintain tight tracking on large display text.
- Use a clean sans-serif for all UI elements to maintain a modern feel.

## 4. Spacing

A consistent 4px base grid establishes a precise, modular rhythm across all components and layouts.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base grid is used throughout the layout to ensure visual harmony.

## 5. Surfaces

Surfaces are defined by subtle depth and clear boundaries, not ornate detail. Shadows are soft and low-opacity, and borders are fine, consistent rules that delineate without heaviness.

- **Radius:** sm 0px · md 4px · lg 8px · pill 9999px
- **Shadows:**
  - 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  - 0 2px 4px -2px rgba(0, 0, 0, 0.1)
  - 0 20px 25px -5px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(0,0,0,0.1) is the standard for defining boundaries and inputs.

## 6. Layout

The layout skeleton is a standard 12-column grid, structured to provide generous whitespace and a clear visual hierarchy. It is anchored by full-width photographic hero sections that immediately establish scale and context.

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

**Skeleton:** A standard 12-column grid system with a maximum width container and responsive breakpoints for tablet and desktop.

## 7. Motion & Interaction

Motion philosophy is one of quiet utility. Transitions are smooth and medium-duration, designed to acknowledge interaction and guide focus without theatrical distraction.

- **Durations:** micro 150ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle fade-ins and fade-outs for UI state changes.
  - Smooth transitions for hover effects on buttons and links.

- **Hover:** Subtle changes in opacity or color for interactive elements.
- **Click:** Immediate visual feedback through state changes.
- **Transition:** Smooth transitions on color, opacity, and transform properties.
- **Keyboard:** Standard keyboard navigation support for all interactive elements.

## 8. Voice & Don'ts

The editorial voice is confident, modern, and deliberately understated. Headlines are direct and often bold; calls to action are simple and clear, all rendered in uppercase to maintain interface consistency.

- **Tone:** Confident, modern, and understated.
- **Headline style:** Direct, uppercase, and often uses a bold weight for emphasis.
- **CTA style:** Simple, clear, and often uses uppercase text within a clean button.
- **Avoid:** Avoid overly decorative or script fonts. / Avoid bright, neon, or clashing color palettes. / Avoid cluttered layouts with too many competing elements.

### Don'ts
- ❌ Don't use bright, saturated colors — the palette is strictly monochromatic with black, white, and grays.
- ❌ Don't use rounded corners on buttons — the screenshot shows rectangular buttons with sharp or slightly rounded corners.
- ❌ Don't use decorative or script fonts — the typography is consistently clean and sans-serif.
- ❌ Don't use heavy drop shadows on UI elements — shadows are subtle and used for depth, not decoration.
- ❌ Don't clutter the layout — the design relies on generous whitespace to create a premium feel.
- ❌ Don't use complex gradients — the color scheme is solid and flat.

The system deliberately forgoes decorative fonts, saturated color, and complex gradients to preserve its core identity of refined minimalism.

## System Prompt (paste into AI tool)

```
This is a premium consumer e-commerce site for a streetwear brand. The design DNA is defined by a strict monochromatic palette (black #000000, white #FFFFFF, and subtle grays like #EFEFEF and #E5E7EB) and clean, sans-serif typography (geometric and humanist categories). The layout uses a 12-column grid with generous whitespace and high-quality photography. Critical donts: never use bright or saturated colors, avoid decorative or script fonts, and do not over-complicate the clean, minimalist aesthetic with unnecessary gradients or heavy shadows. All UI elements should feel refined and understated.
```