CURATED · OPEN · FREE

Fillingpieces

Clean, typography-driven e-commerce design with a premium, understated aesthetic.

01

Identity DNA

A premium streetwear brand that values understated elegance.

02

Color

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

03

Typography

geometric-sans · humanist-sans

• display48px · 500
• body16px · 400
• caption12px · 400

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.

04

Spacing

A consistent 4px base grid is used throughout the layout to ensure visual harmony.

05

Surfaces

1px solid rgba(0,0,0,0.1) is the standard for defining boundaries and inputs.

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)

06

Layout

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

07

Motion & Interaction

Subtle fade-ins and fade-outs for UI state changes. · Smooth transitions for hover effects on buttons and links.

Subtle changes in opacity or color for interactive elements. · Immediate visual feedback through state changes.

08

Components

• button Simple rectangular buttons, often with uppercase text and no border radius, or fully rounded pills for specific call-to-actions.
• card Clean, borderless cards where the product image is the primary focus, separated by generous whitespace.
• chip Minimal chips, sometimes used for filtering, with a clean border and simple typography.
• input Minimalist input fields with a subtle bottom border or a light background, focusing on clarity.
• hero Full-width, high-quality photographic hero sections with centered or left-aligned text overlays.

09

Voice & Don'ts

• Tone Confident, modern, and understated.
• Headlines Direct, uppercase, and often uses a bold weight for emphasis.
• CTAs Simple, clear, and often uses uppercase text within a clean button.

• 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.
• Avoid: Avoid overly decorative or script fonts.
• Avoid: Avoid bright, neon, or clashing color palettes.
• Avoid: Avoid cluttered layouts with too many competing elements.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko