큐레이션 · 오픈 · 무료

Theseawebreathe

공간적 사진과 데이터 중심 UI 요소를 결합한 몰입감 있는 시네마틱 웹 경험.

01

디자인 DNA

심해 탐험을 위한 미션 컨트롤 대시보드.

02

컬러

공간적 사진과 라이트 시안 악센트에 의존하여 몰입감 있고 데이터가 풍부한 환경을 만드는 엄격한 단색 파란 팔레트.

03

타이포그래피

geometric-sans

• display80px · 500
• display-sm44px · 500
• body14px · 400

모든 텍스트 요소에 걸쳐 대문자 text-transform을 일관되게 사용합니다. · 가독성을 위해 작은 텍스트에 넓은 자간(1.5px 이상)을 유지합니다. · 기술적 느낌을 유지하기 위해 전시 및 본문 모두에 기하학적 산세리프를 사용합니다.

04

여백

몰입감을 강조하고 데이터 포인트가 비좁게 느껴지지 않도록 넉넉한 간격을 사용합니다.

05

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

복잡한 border-shorthand 패턴을 사용한, 라이트 시안(#94E6FB) 또는 거의 흰색(#E5FAFF)의 얇은 1px 테두리.

06

레이아웃

전체 뷰포트 캔버스에 UI 요소들이 절대 위치로 코너와 중앙에 배치됨.

07

모션과 인터랙션

방사형 진행 표시기를 위한 부드러운 회전 애니메이션. · 순차적 데이터 포인트를 위한 캐스케이드 페이드인. · 시네마틱한 분위기를 유지하기 위한 우아한 페이지 전환.

인터랙티브 요소에 대한 은은한 색상 변화 또는 구조적 드러남. · 몰입감 있는 여정의 다음 단계를 시작함.

08

컴포넌트

• button 단색 배경 대신 코너 괄호 장식이 있는 텍스트 기반 액션.
• card 해당 없음 - 전통적인 카드 구성 요소 대신 공간적 이미지를 사용함.
• chip 해당 없음 - 상태 표시기가 텍스트 계층 구조에 직접 통합됨.
• input 해당 없음
• hero 중앙의 방사형 데이터 시각화와 큰 타이포그래피 오버레이가 있는 전체 화면 사진 배경.

09

보이스와 금지 목록

• 톤 데이터 포인트와 환경 인식을 결합한, 기술적이면서도 시적인 어조.
• 헤드라인 대담하고 대문자이며 공간감 있는 스타일, 종종 여러 줄로 나뉨.
• CTA 기술적인 코너 괄호로 프레임이 만들어진 미니멀리스트이자 지시적인 스타일.

• 버튼에 단색 배경을 사용하지 마세요 — 스크린샷은 코너 괄호가 있는 텍스트 전용 액션을 보여줍니다.
• 작고 밀집된 텍스트 블록을 사용하지 마세요 — 스크린샷은 넓은 자간이 있는 크고 개방적인 타이포그래피를 보여줍니다.
• 따뜻하거나 밝은 색상을 사용하지 마세요 — 스크린샷은 엄격하고 차가운 단색 파란 팔레트를 보여줍니다.
• UI 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 0 반경의 테두리를 보여줍니다.
• 무거운 드롭 그림자를 사용하지 마세요 — 스크린샷은 완전히 평면적이고 공간적인 조명 스타일을 보여줍니다.
• 혼합된 글꼴 스타일을 사용하지 마세요 — 스크린샷은 전시와 본문 모두에 기하학적 산세리프의 일관된 사용을 보여줍니다.
• 피하기: 따뜻한 색상
• 피하기: 장난스러운 언어
• 피하기: 밀집된 텍스트 블록
• 피하기: 지저분한 UI 요소
• 피하기: 밝고 채도 높은 그라디언트

10

팩 안의 실제 스크린샷

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

11

System Prompt

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