CURATED · OPEN · FREE

&Tradition

Premium Scandinavian furniture brand with an editorial, gallery-like digital presence.

furnituredesign

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://www.andtradition.com

📦 Browse pack contents →

Identity DNA

furnituredesigntraditioncraftaesthetic

A curated gallery of timeless furniture pieces.

Color

#282828Ink

#454545Ink soft

#EDECE8BG

#F6F6F6BG soft

#CFD3BCBG quiet

#5D5D5DMuted

rgba(40,40,40,0.1)Line

Warm, neutral backgrounds that provide a calm, gallery-like stage for high-quality photography.

Typography

transitional-serif · geometric-sans

display36px · 400
body14px · 400

Use geometric sans for all UI elements, navigation, and body text. · Use transitional serif for major editorial headings and feature titles. · Maintain a clean, open typographic feel with generous spacing.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px baseline grid with generous vertical rhythm.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid rgba(40,40,40,0.1)

rgba(0, 0, 0, 0.1) 0px 0px 2px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric editorial grid, alternating large imagery with text.

Motion & Interaction

150msmicro

200mssmall

500msmedium

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

Subtle opacity and color transitions on hover. · Smooth transitions for opening overlays.

Subtle color change or underline for links and buttons. · Immediate visual feedback.

Components

button Minimal text links, occasionally with underlines.
card Image-heavy editorial cards with clean typography underneath.
chip Uppercase, small-caps navigation or category labels.
input Simple text input, minimal border.
hero Full-width photographic hero with centered or bottom-aligned text.

Voice & Don'ts

Tone Refined, poetic, and descriptive.
Headlines Evocative and thematic, often using transitional serif.
CTAs Minimal and functional, often just a 'Read more' link.

Don't use neon or highly saturated primary colors — screenshot shows muted, earthy tones.
Don't use rounded, bubbly UI elements — screenshot shows sharp, rectangular forms.
Don't clutter the interface with many small icons — screenshot shows a very clean, sparse layout.
Don't use a heavy, bold sans-serif for all text — screenshot shows a mix of serif and sans-serif.
Don't use dark mode as the primary theme — screenshot shows a light, warm, off-white background.
Don't use aggressive drop shadows — screenshot shows extremely subtle, minimal shadow effects.
Avoid: Aggressive marketing language
Avoid: Flashy or cluttered visual elements
Avoid: Loud, saturated color palettes
Avoid: Overly complex navigation structures

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This design DNA is for a premium, editorial furniture brand like &Tradition. Positioning is high-end and curated. Key colors are warm neutrals like #EDECE8 and #F6F6F6, with dark ink #282828. Typography mixes a transitional-serif for display with a geometric-sans for body. Critical donts: avoid using neon colors, avoid bubbly or highly rounded UI, and never clutter the interface with too many small icons. The overall feel is calm, refined, and gallery-like.

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