큐레이션 · 오픈 · 무료

Bang & Olufsen

섬세하고 고품질의 인터랙션과 절제된 고대비 팔레트를 사용한 정제된 다크 모드 하드웨어 제품 사이트.

01

디자인 DNA

프리미안 스칸디나비안 오디오 브랜드 쇼룸.

02

컬러

프리미엄 다크 모드 미학을 위한 고대비 중성색으로, 활성 상태를 위해 차분한 자연 그린으로 액센트를 줍니다.

03

타이포그래피

geometric-sans · monospace

• display56px · 500
• headline35px · 700
• body16px · 400
• caption12px · 400

04

여백

일관된 4px 기본 그리드와 표준 간격을 사용한 여유롭고 통기 있는 레이아웃.

05

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

1px solid rgba(85, 85, 85, 1.0)

0 4px 24px rgba(0, 0, 0, 0.35)

06

레이아웃

전체 폭의 다크 섹션과 중앙 정렬된 컨테이너.

07

모션과 인터랙션

마이크로 인터랙션을 위한 부드러운 색상 및 투명도 트랜지션. · 버튼과 링크의 hover 상태를 위한 섬세한 이징.

부드러운 cubic-bezier 이징을 사용한 섬세한 색상 변화 또는 투명도 변화. · 마이크로 인터랙션 트랜지션을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 대문자 텍스트와 섬세한 border-radius를 사용한 미니멀한 아웃라인 또는 텍스트 버튼.
• card 섬세한 테두리와 정제된 padding을 사용한 다크하고 깔끔한 카드.
• chip 뚜렷한 차분한 그린 활성 상태를 가진 알약 형태 토글.
• input 섬세한 하단 테두리가 있는 깔끔한 테두리 없는 입력 필드.
• hero 고대비, 정제된 타이포그래피를 사용한 다크한 포토그래픽 히어로 섹션.

09

보이스와 금지 목록

• 톤 전문적이고 권위 있으며 절제된 톤.
• 헤드라인 간결하고 직접적이며 종종 문장 대문자 사용.
• CTA 대문자 아웃라인 또는 텍스트 버튼.

• 밝고 채도 높은 액센트 컬러를 사용하지 마세요 — 스크린샷에는 차분한 자연 그린이 나타납니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷에는 섬세하고 확산된 섀도우가 나타납니다.
• 복잡한 그래디언트를 사용하지 마세요 — 스크린샷에는 단색 다크 배경과 플랫 컬러가 나타납니다.
• 모서리를 어디에나 둥글게 하지 마세요 — 스크린샷에는 날카롭거나 매우 미세하게 둥근 모서리가 나타납니다.
• 긴 단락의 텍스트를 중앙 정렬하지 마세요 — 스크린샷에는 왼쪽 정렬 텍스트가 나타납니다.
• 본문 텍스트를 모두 대문자로 사용하지 마세요 — 스크린샷에는 문장 대문자 또는 제목 대문자가 나타납니다.
• 장난스럽거나 기발한 UI 요소를 사용하지 마세요 — 스크린샷에는 정제되고 미니멀한 인터페이스가 나타납니다.
• 피하기: 지나치게 장식적인 폰트나 복잡한 레이아웃은 피할 것.
• 피하기: 밝고 채도 높은 액센트 컬러는 피할 것.
• 피하기: 복잡한 인터페이스나 과도한 UI 요소는 피할 것.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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