CURATED · OPEN · FREE

Article

A clean, photographic e-commerce platform for modern furniture and home decor.

furnitureecommerce

↓ Download design system (37 MB)Open in OpenDesign

Visit: https://www.article.com

📦 Browse pack contents →

Identity DNA

FurnitureModernLifestyleDirect-to-consumer

A curated catalog for modern living

Color

#FF6458Accent

#2E2E2EInk

#424242Ink soft

#FFFFFFBG

#F2F2F2BG soft

#626262Muted

rgba(46, 46, 46, 1)Line

A high-contrast neutral base with photographic color and a vibrant coral accent.

Typography

geometric-sans

display48px · 700
h132px · 700
body16px · 400
small14px · 400

Use uppercase for buttons and navigation links · Headlines use tight tracking and bold weight · Body text uses regular weight with comfortable line height

Spacing

4px

8px

12px

16px

24px

32px

40px

48px

64px

96px

Consistent 4px grid with generous spacing between sections.

Surfaces

sm · 4px

md · 8px

lg · 50px

pill · 9999px

1px solid #2E2E2E

rgba(0, 0, 0, 0.08) 0px 4px 8px 0px · rgba(0, 0, 0, 0.04) 0px 16px 16px 0px · rgba(0, 0, 0, 0.3) 0px 32px 68px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero images followed by structured grids for products.

Motion & Interaction

100msmicro

300mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth background-color transitions on hover · Opacity fade for subtle UI state changes

Subtle color change or underline appearance · Immediate visual feedback, often via color shift

Components

button Pill-shaped with solid white background and black border, uppercase text.
card Clean image cards with minimal text below, often in a horizontal scroll or grid.
chip Simple text-based category links.
input Minimalist search bar with placeholder text and a magnifying glass icon.
hero Full-bleed lifestyle photography with centered text overlays.

Voice & Don'ts

Tone Helpful, aspirational, and direct
Headlines Punchy and benefit-oriented
CTAs Clear, imperative, and uppercase

Don't use rounded rectangles — screenshot shows pill-shaped buttons instead.
Don't use a bright, clashing accent palette — screenshot shows a restrained neutral base with one coral accent.
Don't use complex shadows on cards — screenshot shows minimal, flat photography.
Don't use serif fonts — screenshot shows exclusively sans-serif typography.
Don't use dense text blocks — screenshot shows generous whitespace and short copy.
Don't use dark backgrounds for the main layout — screenshot shows primarily white and off-white backgrounds.
Avoid: Overly technical jargon
Avoid: Aggressive sales language
Avoid: Unnecessary filler words

Inside the pack — real screenshots

Article — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a modern e-commerce design for a furniture brand, focusing on large lifestyle photography and clean typography. The layout uses a white background with dark gray text (#2E2E2E) and a vibrant coral accent (#FF6458). Typography is a geometric sans-serif category, using bold weights for headlines and regular for body text. Critical constraints: avoid using serif fonts, never use rounded rectangles for buttons, and avoid dense text blocks that would clutter the photographic-heavy layout. The design prioritizes whitespace and clear visual hierarchy to let the product images stand out.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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