큐레이션 · 오픈 · 무료

Vitra

시네마틱한 이미지와 절제된 미니멀리즘으로 하이엔드 디자인을 선보이는 프리미엄 모던 가구 브랜드입니다.

01

디자인 DNA

프리미엄 건축 카탈로그를 웹으로 옮긴 것으로, 제품 쇼케이스와 에디토리얼 스토리텔링을 결합합니다.

02

컬러

시각적 재미를 위해 고대비 사진에 의존하는 엄격한 단색 팔레트입니다.

03

타이포그래피

geometric-sans

• display56px · 500
• headline40px · 500
• body17px · 500
• small15px · 500
• micro13px · 500

전체적으로 기하학적 sans-serif를 사용합니다 · 주요 텍스트에는 두께를 500으로 유지합니다 · 작은 레이블에는 대문자 트래킹을 사용합니다 · 좌측 정렬 단락에 넉넉한 line-height를 적용합니다

04

여백

기본 단위 8px와 넉넉한 64px~96px의 섹션 간격을 사용합니다.

05

표면 (라운드 / 그림자 / 경계선)

미세한 구분을 위해 밝은 회색의 1px solid 얇은 테두리를 사용하며, 그림자는 없습니다.

06

레이아웃

풀블리드 히어로 이미지와 중앙 정렬된 텍스트로 시작하며, 그 다음 타이트한 2열 제품 격자가 옵니다.

07

모션과 인터랙션

텍스트 오버레이의 부드러운 페이드인 · 인터랙티브 요소의 선형 색상 전환

텍스트와 아이콘을 부드러운 회색으로 미세하게 변환합니다. · 최소한의 마이크로 인터랙션으로 즉각적인 반응을 보입니다.

08

컴포넌트

• button 텍스트만 있거나 아웃라인 버튼으로, 얇은 테두리, 대문자 레이블, 넉넉한 padding을 적용합니다.
• card 이미지가 주도하는 카드로 하단에 중앙 정렬된 텍스트 캡션이 있으며, 테두리나 배경은 없습니다.
• chip 해당 없음
• input 얇은 하단 테두리가 있는 미니멀한 검색 입력 필드입니다.
• hero 전체 뷰포트의 시네마틱 사진과 수직, 수평으로 모두 중앙 정렬된 텍스트 오버레이입니다.

09

보이스와 금지 목록

• 톤 권위 있고 정제된 비전을 제시합니다.
• 헤드라인 간결하고 임팩트 있는 제품명이나 개념적 질문을 사용합니다.
• CTA 직관적이고 행동 지향적인 문구, 예를 들어 '지금 알아보기' 또는 '자세한 정보'를 사용합니다.

• 그림자를 사용하지 않습니다 — 스크린샷은 사진 깊이에 의존하는 플랫 디자인을 보여줍니다.
• 버튼이나 카드에 둥근 모서리를 사용하지 않습니다 — 스크린샷은 날카롭고 사각적인 모서리를 보여줍니다.
• 밝은 액센트 색상을 사용하지 않습니다 — 스크린샷은 엄격한 단색 팔레트를 보여줍니다.
• 본문 텍스트에 굵은 글꼴 두께를 사용하지 않습니다 — 스크린샷은 모든 텍스트에 중간 두께(500)를 보여줍니다.
• 밀집된 텍스트 블록을 사용하지 않습니다 — 스크린샷은 넉넉한 line-height와 단락 간격을 보여줍니다.
• 장식적인 테두리를 사용하지 않습니다 — 스크린샷은 기능적인 1px 얇은 선만 보여줍니다.
• 피하기: 일상적인 언어나 이모지 사용을 피합니다
• 피하기: 过多의 텍스트로 시각적 계층을 어지럽히는 것을 피합니다
• 피하기: 밝고 채도 높은 액센트 색상 사용을 피합니다

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

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