큐레이션 · 오픈 · 무료

Bugatti

시네마틱한 이미지와 절제된 우아함을 갖춘 초프리미엄 자동차 브랜드 경험

01

디자인 DNA

하이엔드 자동차 매거진과 럭셔리 패션 하우스의 만남

02

컬러

선명한 흑백 대비에 모든 색상을 사진 이미지로 제공

03

타이포그래피

humanist-sans · monospace

• display60px · 400
• headline36px · 400
• body16px · 400
• caption14px · 400
• micro12px · 400

모든 텍스트는 검은색 배경에 흰색으로 표시 · 탐색 및 라벨에 대문자를 절제하여 사용 · 대문자 텍스트 요소에 넉넉한 자간

04

여백

럭셔리한 느낌을 위한 넉넉한 여백을 갖춘 일관된 4px 기본 단위

05

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

인터랙티브 요소에는 1px solid rgba(255,255,255,0.2), 그 외에는 테두리 없음

rgba(0,0,0,0) 0px 0px 0px 0px · rgba(0,0,0,0.1) 0px 10px 15px -3px · rgba(0,0,0,0.1) 0px 4px 6px -4px

06

레이아웃

전체 폭 히어로 섹션과 차량 카드를 위한 2열 그리드

07

모션과 인터랙션

상태 전환을 위한 페이드 전환 · transform 기반 hover 효과 · 페이지 전환을 위한 확장된 타이밍

미세한 opacity 또는 색상 전환 · 감소된 opacity로 즉각적인 피드백

08

컴포넌트

• button 최소주의 고스트 버튼, 1px 흰색 테두리, 또는 6px radius의 필 또는 직사각형
• card 텍스트 오버레이가 있는 전체 폭 이미지 카드, 눈에 띄는 컨테이너 테두리 없음
• chip 두드러지게 사용되지 않음
• input 두드러지게 사용되지 않음
• hero 전체 뷰포트 시네마틱 이미지와 중앙 정렬된 흰색 텍스트, 수직 리듬

09

보이스와 금지 목록

• 톤 권위 있고, 명성 높으며, 절제된
• 헤드라인 혼합 대문자 또는 대문자를 사용하는 직접적이고 선언적인
• CTA '목격하다' 또는 '탐구하다'와 같은 명령형 동사를 사용하는 행동 지향적

• 여러 폰트 두께를 사용하지 마세요 — 스크린샷에서 일관된 두께 400이 사용되었습니다
• 장식적인 테두리나 그림자를 추가하지 마세요 — 스크린샷에서 최소한 또는 부채도 없음
• 색상 포인트를 사용하지 마세요 — 스크린샷은 완전히 흑백 및 사진 색상에 의존
• 콘텐츠를 빽빽하게 배치하지 마세요 — 스크린샷에서 모든 요소 간 넉넉한 여백
• 탐색에 소문자를 사용하지 마세요 — 스크린샷에서 MENU, STORE, WITNESS THE LEGEND 모두 대문자
• 바쁜 레이아웃을 만들지 마세요 — 스크린샷에서 깔끔한 단일 열 또는 이중 열 그리드 구조
• 피하기: 비격식적인 언어
• 피하기: 과도한 느낌표
• 피하기: 지저분한 레이아웃
• 피하기: 밝은 색상 포인트
• 피하기: 장식적인 타이포그래피

10

팩 안의 실제 스크린샷

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

11

System Prompt

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