큐레이션 · 오픈 · 무료

Metalab

고대비 에디토리얼 타이포그래피와 추상적이고 반짝이는 3D 비주얼을 결합한 프리미엄 디자인 에이전시 사이트.

01

디자인 DNA

고급 디자인 스튜디오의 디지털 포트폴리오.

02

컬러

미묘한 회색 강조가 더해진 고대비 단색 기본 바탕. 극적인 이미지가 중심을 차지할 수 있도록 디자인합니다.

03

타이포그래피

didone-serif · grotesque-sans

• display88px · 240
• body16px · 400

04

여백

모듈형 간격을 위해 24px padding과 gap을 일관되게 사용합니다.

05

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

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

06

레이아웃

플로팅 내비게이션 요소가 있는 비대칭적, 에디토리얼 레이아웃.

07

모션과 인터랙션

hover 시 미묘한 불투명도 전환 · 부드러운 배경색 변화

내비게이션 요소에 미묘한 불투명도 변화. · 표준 링크 내비게이션.

08

컴포넌트

• button 반투명한 어두운 배경과 밝은 텍스트가 적용된, 둥근 형태의 내비게이션 항목.
• card 해당 없음
• chip 내비게이션 링크용 반투명한 어두운 알약 모양 (예: Midjourney, Uber).
• input 해당 없음
• hero 복잡한 3D 추상 배경 위에 크고 고대비의 세리프 헤드라인이 놓인, 전체 뷰포트의 몰입형 섹션. 보조 설명 텍스트 포함.

09

보이스와 금지 목록

• 톤 자신감 있고 권위적이며 간결한.
• 헤드라인 크고 우아하며 미니멀한.
• CTA 미묘하고 내비게이션 구조에 통합된.

• 밝거나 채도 높은 강조 색상을 사용하지 마세요 — 스크린샷은 엄격히 단색 팔레트를 보여줍니다.
• 디스플레이용으로 둥근 기하학적 산세리프 폰트를 사용하지 마세요 — 스크린샷은 헤드라인용 날카롭고 고대비의 세리프를 보여줍니다.
• 조밀하고 격자 중심의 레이아웃을 만들지 마세요 — 스크린샷은 개방적이고 비대칭적인 구성을 보여줍니다.
• 버튼에 불투명하고 불투명한 배경색을 사용하지 마세요 — 스크린샷은 반투명한 어두운 알약을 보여줍니다.
• UI 요소에 큰 드롭 섀도우나 3D 돌출 효과를 사용하지 마세요 — 스크린샷은 평면적이고 반투명한 표면을 보여줍니다.
• 표준 상단 정렬 내비게이션 바를 사용하지 마세요 — 스크린샷은 왼쪽 상단 코너의 플로팅 메뉴 알약을 보여줍니다.
• 피하기: 지저분한 인터페이스
• 피하기: 화려하거나 메인 색상 강조
• 피하기: 지나치게 기술적인 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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