큐레이션 · 오픈 · 무료

McLaren

극적인 사진과 정밀한 섬세함으로 정의된 F1 팀 및 슈퍼카 제조사의 디지털 존재감.

01

디자인 DNA

모든 부품이 최적화되고 모든 표면이 목적을 가진 고성능 기계.

02

컬러

단색 기반(블랙/화이트)에 하나의 강렬한 브랜드 오렌지로 포인트를 줍니다.

03

타이포그래피

geometric-sans

• display56px · 500
• heading25px · 400
• body16px · 400
• caption12px · 400

모든 내비게이션과 섹션 제목은 대문자로 설정됩니다. · 대문자 텍스트 요소의 자간은 2px 확장됩니다. · 기본 폰트 크기는 16px이며 일관된 행간 1.5(24px)를 사용합니다.

04

여백

일관된 8px 그리드와 상호작용 요소에 넉넉한 패딩(12px-26px)을 적용합니다.

05

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

미세한 구분과 포커스 상태를 위해 1px solid rgb(229, 231, 235)를 사용합니다.

rgba(0, 0, 0, 0.08) 0px 4px 12px 0px

06

레이아웃

전체 뷰포트 히어로 이미지에 콘텐츠를 하단에 오버레이합니다.

07

모션과 인터랙션

상호작용 요소에 대한 hover 시 미세한 transform 전환. · 상태 전환 시 부드러운 색상 및 배경색 전환.

색상 전환 또는 transform을 통한 미세한 시각적 피드백. · 표준 커서 포인터 표시와 즉각적인 반응.

08

컴포넌트

• button 단색 브랜드 오렌지 배경에 대문자 블랙 텍스트가 들어간 평면 사각형 블록.
• card 최소화하거나 부재하며, 전체 폭 사진 구성에 우선합니다.
• chip 밑줄 표시기가 있는 간단한 텍스트 기반 내비게이션 링크.
• input 이 히어로 중심 섹션에서는 눈에 띄게 보이지 않습니다.
• hero 하단에 어두움에서 밝음으로의 그라데이션 오버레이가 있는 시네마틱한 엣지 투 엣지 사진.

09

보이스와 금지 목록

• 톤 권위적이고 세련되며 성능 지향적.
• 헤드라인 대담하고 대문자이며 간결하며, 어두운 배경과 높은 대비를 자주 사용합니다.
• CTA 직접적이고 기능적이며, 대문자 텍스트가 들어간 단색 브랜드 컬러 블록을 사용합니다.

• 둥근 모서리를 사용하지 않습니다 — 스크린샷에서 날카로운 사각형 버튼과 UI 요소를 볼 수 있습니다.
• 여러 악센트 색상을 사용하지 않습니다 — 스크린샷에서 엄격한 단색 팔레트와 하나의 오렌지 악센트만 볼 수 있습니다.
• 내비게이션에 소문자를 사용하지 않습니다 — 스크린샷에서 모든 메뉴 항목이 대문자로 설정되어 있습니다.
• 장식적 또는 스크립트 폰트를 사용하지 않습니다 — 스크린샷에서 깨끗하고 기하학적인 고딕체 타이포그래피를 볼 수 있습니다.
• 히어로 영역을 텍스트로 채우지 않습니다 — 스크린샷에서 최소화되고 잘 배치된 텍스트가 있는 넓은 사진 영역을 볼 수 있습니다.
• 주요 요소에 드롭 섀도우를 사용하지 않습니다 — 스크린샷에서 데이터에만 하나의 미세한 섀도우가 있는 플랫 디자인을 볼 수 있습니다.
• 피하기: 장난스럽거나 가벼운 언어
• 피하기: 둥근 모서리 또는 부드러운 형태
• 피하기: 지저분하거나 복잡한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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