큐레이션 · 오픈 · 무료

Viture

대담한 타이포그래피와 고대비의 기술 지향적 다크 미학으로 선보이는 프리미엄 XR 글라스.

01

디자인 DNA

공간 컴퓨팅을 위한 세련된 고급 하드웨어 매장과 같습니다.

02

컬러

인터랙티브 요소를 위한 주요 블루 강조색이 있는 고대비 다크 모드 위주의 팔레트입니다.

03

타이포그래피

geometric-sans

• display90px · 750
• h248px · 650
• body16px · 400
• caption14px · 400

대담하고 미래지향적인 외관을 강화하기 위해 큰 디스플레이 타입에 타이트한 자간을 사용합니다. · 텍스트와 배경 간 높은 대비를 유지하며, 주로 어두운 배경에 흰색 텍스트를 사용합니다.

04

여백

4px 기본 단위를 일관되게 사용하며, 히어로 섹션과 카드에는 넉넉한 패딩을 적용합니다.

05

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

1px solid rgba(255,255,255,0.1)

0 0 100px rgba(255,255,255,0.1) · 0 8px 32px rgba(0,0,0,0.4)

06

레이아웃

풀와이즈 히어로 섹션에서 넉넉한 수직 간격의 중앙 정렬 콘텐츠 블록으로 전환됩니다.

07

모션과 인터랙션

버튼과 링크의 hover 상태에서 부드러운 전환. · 시각적 효과를 위한 점진적인 background-size 전환. · 인터랙티브 요소를 위한 미묘한 불투명도 변화.

버튼과 링크의 미묘한 색상 변화 또는 불투명도 변화. · 즉각적인 시각적 피드백, 주로 색상 변화 또는 약간의 스케일 변환을 통해 구현.

08

컴포넌트

• button 메인: 솔리드 블루, 둥근 필 모양. 세컨더리: 다크 그레이, 테두리가 있는 둥근 필 모양.
• card 둥근 모서리(24px), 부드러운 배경색, 중앙 정렬 콘텐츠, 제품 이미지와 텍스트 간 명확한 계층 구조.
• chip 제품 태그를 위한 작고 필 모양의 배지 (예: '2026년의 새로운 플래그십').
• input 풀와이즈, 둥근 필 모양, 밝은 배경, 플레이스홀더 텍스트, 이메일 아이콘 내부 포함.
• hero 몰입감 있는 어두운 배경, 크고 중앙 정렬된 타이포그래피, 두드러진 제품 이미지, 그리고 명확한 행동 유도 버튼.

09

보이스와 금지 목록

• 톤 자신감 있고, 대담하며, 기술 지향적입니다.
• 헤드라인 짧고 강렬하며, 수식어를 강조하는 문구 (예: '가장 크고. 가장 밝고. 가장 똑똑하고.').
• CTA 직설적이고 행동 지향적 (예: '지금 주문하기', '10% 즉시 할인 받기').

• 메인으로 라이트 테마를 사용하지 마세요 — 스크린샷은 지배적인 다크 모드(#0C0C0C 배경)를 보여줍니다.
• 헤드라인에 부드럽고 둥근 산세리프 폰트를 사용하지 마세요 — 스크린샷은 대담하고 기하학적인 산세리프를 보여줍니다.
• 채도가 낮은 팔레트를 사용하지 마세요 — 스크린샷은 어두운 배경에 고대비의 흰색 텍스트와 생동감 있는 블루 강조색을 특징으로 합니다.
• 작고 중앙 정렬된 버튼을 사용하지 마세요 — 스크린샷은 크고 두드러진 필 모양의 버튼을 보여줍니다.
• 제품 디스플레이에 복잡한 다중 컬럼 레이아웃을 사용하지 마세요 — 스크린샷은 명확한 카드 기반 수평 레이아웃을 보여줍니다.
• 목적이 없는 장식적 요소를 사용하지 마세요 — 스크린샷은 깔끔한 타이포그래피와 고품질 제품 이미지에 집중하고 있습니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어는 피합니다.
• 피하기: 맥락 없는 복잡한 기술 용어는 피합니다.
• 피하기: 약하거나 수동적인 행동 유도 문구는 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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