큐레이션 · 오픈 · 무료

Boom Supersonic

대담한 다크 오버레이와 정밀한 타이포그래피로 초음속 속도를 선보이는 사진 중심의 항공우주 사이트입니다.

01

디자인 DNA

고성능 항공우주 엔지니어링과 현대 미니멀리즘의 만남.

02

컬러

고대비 흑백 베이스에 단 하나의 선명한 노란색 강조를 절제 있게 사용하여 강조합니다.

03

타이포그래피

geometric-sans

• display72px · 700
• h148px · 500
• body16px · 400
• caption12px · 400

모든 텍스트에 Styrene A(또는 유사한 기하학적 sans-serif)를 사용합니다. · 디스플레이 사이즈는 타이트한 트래킹과 라인 높이를 사용합니다. · 작은 텍스트와 레이블은 넓은 자간(1.2px)을 사용합니다.

04

여백

풍부한 패딩과 큰 수직 공간(96px, 140px)으로 섹션 사이에 극적인 여백을 만듭니다.

05

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

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

06

레이아웃

풀블리드 사진 섹션과 체계적인 콘텐츠 그리드가 교대로 구성되며, 기능 하이라이트를 위해 2열 레이아웃을 자주 사용합니다.

07

모션과 인터랙션

대화형 요소의 부드러운 hover 전환 효과(0.15초) · 스크롤 트리거 reveal를 위한 더 긴 transform 애니메이션(0.7초)

버튼과 링크의 미세한 배경 또는 색상 전환 효과. · 색상 변경을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 흰색 배경, 검정 텍스트, 날카로운 모서리(4px radius), hover 시 다크 테두리가 있는 주요 'Join Boom' 버튼. 보조 버튼은 투명 배경에 흰색 테두리를 사용합니다.
• card 시각적 테두리가 없는 이미지 중심 카드로, 사진 콘텐츠로 경계를 정의합니다.
• chip 네비게이션이나 카테고리를 위한 대문자 텍스트 레이블로, 넓은 자간을 사용합니다.
• input 미니멀리스트 입력 필드로, 미세한 하단 테두리와 눈에 띄는 컨테이너가 없습니다.
• hero 전체 뷰포트 사진 또는 비디오 배경에 다크 오버레이(rgba(0,0,0,0.5)), 중앙 정렬된 큰 흰색 타이포그래피, 그리고 스크롤 인디케이터를 포함합니다.

09

보이스와 금지 목록

• 톤 자신감 있고 미래지향적이며 기술적으로 정확합니다.
• 헤드라인 'Speed Is Our Superpower'와 같은 짧고 임팩트 있는 statements를 볼드하고 큰 타입으로 표현합니다.
• CTA 직접적이고 행동 지향적입니다(예: 'Join Boom').

• 번잡하거나 복잡한 레이아웃을 사용하지 마십시오 — 스크린샷은 풍부한 여백과 요소 사이의 큰 호흡 공간을 보여줍니다.
• 다양한 색상을 사용하지 마십시오 — 스크린샷은 흰색, 검정, 회색, 단일 노란색 강조의 엄격한 팔레트를 보여줍니다.
• 주요 버튼에 둥근 모서리를 사용하지 마십시오 — 스크린샷은 최대 4px radius의 날카로운 모서리를 보여줍니다.
• 작고 비좁은 타이포그래피를 사용하지 마십시오 — 스크린샷은 타이트한 트래킹의 크고 볼드한 디스플레이 텍스트를 보여줍니다.
• 복잡한 배경 패턴을 사용하지 마십시오 — 스크린샷은 단색 검정 배경 또는 풀블리드 사진을 보여줍니다.
• 지나치게 장식적인 글꼴을 사용하지 마십시오 — 스크린샷은 깔끔하고 기하학적인 sans-serif 타이포그래피만을 사용합니다.
• 피하기: 장난스럽거나 캐주얼한 언어
• 피하기: 과도한 느낌표 사용
• 피하기: 맥락 없이 전문 용어가 많은 설명

10

팩 안의 실제 스크린샷

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

11

System Prompt

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