큐레이션 · 오픈 · 무료

Vitsœ

Dieter Rams의 모듈식 디자인과 기능적 미니멀리즘 원칙을 기반으로 구축된 레거시 가구 브랜드 웹사이트입니다.

01

디자인 DNA

시대를 초월한 절제미가 느껴지는 큐레이션된 갤러리형 제품 카탈로그입니다.

02

컬러

단일 기능적 블루 포인트를 더한 단색 팔레트입니다.

03

타이포그래피

grotesque-sans

• display40px · 700
• heading32px · 700
• body16px · 400

모든 텍스트 레이어에 Linotype Univers W01을 사용합니다. · 디스플레이용은 굵은, 본문은 얇은 자간으로 엄격한 타이포그래피 계층을 유지합니다. · 큰 디스플레이 사이즈에서는 자간을 좁게 유지합니다.

04

여백

명확한 섹션 구분을 위해 32px 및 64px 단위로 구동되는 넉넉한 수직 리듬입니다.

05

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

얇고 높은 대비의 테두리(1px) 또는 미묘한 회색 구분선(1px solid #C2C2C2)을 사용합니다.

06

레이아웃

12개 열의 격자 기반 레이아웃으로, 전체 너비 섹션과 분할 열 섹션이 교차합니다.

07

모션과 인터랙션

콘텐츠 표시를 위한 부드러운 페이드 인. · 인터랙티브 상태를 위한 단순한 선형 전환.

인터랙티브 텍스트 요소에 미묘한 opacity 변화. · 텍스트 링크와 버튼을 통한 직접 내비게이션.

08

컴포넌트

• button 주요 작업을 위한 화살표가 있는 텍스트 기반 링크; 쿠키 수락을 위한 검정 배경에 텍스트가 있는 단색 버튼.
• card 최소한의 패딩과 명확한 타이포그래피 레이블이 있는 이미지 중심 제품 카드.
• input 헤더 내비게이션에 통합된 검색 아이콘.
• hero 대담한 제품 제목과 간결한 기능적 설명이 결합된 대형 포맷 이미지.

09

보이스와 금지 목록

• 톤 권위 있고 절제적이며 매우 기능적입니다.
• 헤드라인 직관적이고 명시적인 제품명 (예: '606 Universal Shelving System').
• CTA 방향 화살표가 수반되는 미묘한 텍스트 링크.

• 장식용 일러스트를 사용하지 않습니다 — 스크린샷은 사진과 단일 기능적 레드 립 아이콘을 보여줍니다.
• 부드러운 그림자를 사용하지 않습니다 — 스크린샷은 플랫하고 테두리 없는 이미지 또는 얇은 단색 구분선을 보여줍니다.
• 밝고 다채로운 그라데이션을 사용하지 않습니다 — 스크린샷은 단일 블루 포인트가 있는 단색 팔레트를 보여줍니다.
• 무겁고 화려한 세리프 글꼴을 사용하지 않습니다 — 스크린샷은 전체적으로 깔끔하고 기하학적인 산세리프를 보여줍니다.
• 복잡한 내비게이션을 사용하지 않습니다 — 스크린샷은 미니멀하고 텍스트 기반 상단 메뉴를 보여줍니다.
• 둥근 필 버튼을 사용하지 않습니다 — 스크린샷은 직사각형 버튼과 단순한 텍스트 링크를 보여줍니다.
• 피하기: 감성적이거나 수사적인 언어.
• 피하기: 과도한 느낌표 사용.
• 피하기: 공격적인 마케팅 카피.
• 피하기: 복잡한 전문 용어나 유행어.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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