큐레이션 · 오픈 · 무료

Genesis

시네마틱 다크 미학과 날카로운 기하학적 정밀함을 갖춘 프리미엄 자동차 브랜드

01

디자인 DNA

시네마틱 조명을 갖춘 고급 럭셔리 차량 쇼룸

02

컬러

극적인 조명 효과가 있는 고대비 단색 팔레트

03

타이포그래피

grotesque-sans · humanist-sans

• display40px · 400
• h140px · 400
• h224px · 400
• body16px · 400
• caption14px · 400

헤드라인은 넓은 자간을 사용한 올캡스 사용 · 본문 텍스트는 넉넉한 행간 유지 · 글꼴 두께는 전체적으로 라이트부터 미디엄 유지

04

여백

24px를 주요 콘텐츠 간격으로 사용하는 넉넉한 간격

05

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

다크 톤의 1px solid 테두리로 미니멀하게

0 0 5px 0 rgb(128, 128, 128) · 0 0 18px 0 rgba(0, 0, 0, 0.2)

06

레이아웃

왼쪽 정렬 콘텐츠 오버레이가 있는 풀寬度 히어로

07

모션과 인터랙션

hover 시 부드러운 색상 전환 · 가시성 변화를 위한 페이드 투명도 · 상호작용 요소를 위한 transform 애니메이션

0.2초 ease-in-out으로 색상 전환 · 미세한 스케일 또는 투명도 변화

08

컴포넌트

• button 둥근 모서리가 있는 미니멀 윤곽선 스타일
• card 오버레이 타이포그래피를 사용한 이미지 포워드 스타일
• input 미니멀 밑줄 스타일
• hero 텍스트 오버레이가 있는 시네마틱 풀블리드 사진

09

보이스와 금지 목록

• 톤 자신감 있고 동경하게 만드는
• 헤드라인 올캡스의 대담하고 선언적인 문장
• CTA 깔끔하고 절제된 행동

• 장난스럽거나 둥근 요소를 사용하지 마세요 — 스크린샷은 날카로운 기하학적 정밀함을 보여줍니다
• 배경이 복잡한 것을 적용하지 마세요 — 스크린샷은 깔끔한 사진적 초점을 보여줍니다
• 여러 강조색을 사용하지 마세요 — 스크린샷은 단색 팔레트를 보여줍니다
• 비좁은 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 간격을 보여줍니다
• 무거운 글꼴 두께를 사용하지 마세요 — 스크린샷은 라이트부터 미디엄 타이포그래피를 보여줍니다
• 장식적인 테두리를 추가하지 마세요 — 스크린샷은 미니멀 1px 테두리만 사용합니다
• 둥근 컨테이너를 사용하지 마세요 — 스크린샷은 전체적으로 날카로운 모서리를 보여줍니다
• 피하기: 지나치게 전문적인 용어
• 피하기: 격식 없거나 장난스러운 언어
• 피하기: 복잡한 레이아웃
• 피하기: 밝고 채도 높은 색상
• 피하기: 장식적인 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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