큐레이션 · 오픈 · 무료

Apple

시네마틱한 다크 레이아웃, 깔끔한 타이포그래피, 그리고 완전한 절제로 정의된 프리미엄 하드웨어 쇼케이스.

01

디자인 DNA

시네마틱한 사진과 절제된 타이포그래피로 하드웨어를 소개하는 하이엔드 제품 갤러리.

02

컬러

프리미엄 느낌을 위해 순수 블랙, 부드러운 중립 그레이, 그리고 선명한 화이트 텍스트 사이의 극적인 대비.

03

타이포그래피

humanist-sans

• display48px · 700
• subtitle28px · 400
• body17px · 400
• caption12px · 400

내비게이션 텍스트는 매우 작고 좁은 간격을 사용합니다. · 헤드라인은 좁은 트래킹과 높은 웨이트를 사용합니다. · 본문 텍스트는 가독성을 위해 넉넉한 행간을 유지합니다.

04

여백

히어로 섹션 주변의 넉넉한 수직 패딩으로 여백과 집중도를 강조합니다.

05

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

다크 아웃라인용 1px solid rgba(255,255,255,0.8), 라이트 요소용 1px solid #1d1d1f

rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

06

레이아웃

전체 너비의 엣지투엣지 히어로 섹션과 중앙 정렬된 콘텐츠.

07

모션과 인터랙션

호버 시 부드러운 opacity 및 transform 트랜지션. · UI 요소를 위한 미세한 페이드인.

링크와 버튼의 컬러 트랜지션. · 미세한 스케일 또는 opacity 변화.

08

컴포넌트

• button 단색 배경의 알약 모양 메인 버튼과 아웃라인 세컨더리 버튼.
• card 대형 이미지와 중앙 정렬 텍스트로 정의된 전체 너비 제품 카드.
• hero 중앙 정렬된 헤드라인과 이중 CTA 버튼이 포함된 시네마틱 풀스크린 제품 사진.

09

보이스와 금지 목록

• 톤 자신감 있고 간결하며 권위 있는 어조.
• 헤드라인 짧고 강렬한 제품명과 단어 하나의 태그라인.
• CTA '자세히 보기'와 '구매하기'와 같은 직접적인 행동 동사.

• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 미니멀하고 섬세한 엘리베이션 섀도우를 보여줍니다.
• 복잡한 그라디언트를 사용하지 마세요 — 스크린샷은 단색이고 평면적인 배경을 보여줍니다.
• 작고 지저분한 타이포그래피를 사용하지 마세요 — 스크린샷은 거대하고 깔끔한 디스플레이 폰트를 보여줍니다.
• 밝고 충돌하는 색상을 사용하지 마세요 — 스크린샷은 매우 절제된 팔레트를 보여줍니다.
• 복잡한 그리드 레이아웃을 사용하지 마세요 — 스크린샷은 단순하고 중앙 정렬된 선형 스택을 보여줍니다.
• 장식적인 테두리나 프레임을 사용하지 마세요 — 스크린샷은 개방된 공간에서 숨 쉬는 콘텐츠를 보여줍니다.
• 피하기: 지나치게 기술적인 전문 용어.
• 피하기: 과도한 느낌표 사용.
• 피하기: 복잡하거나 지저분한 레이아웃.
• 피하기: 여러 가지 경쟁하는 색상.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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