큐레이션 · 오픈 · 무료

Hle

거대한 타이포그래피를 특징으로 한 강렬한 고대비 다크 캔버스로, 인재와 콘텐츠를 위한 프리미엄 축을 지향합니다.

01

디자인 DNA

럭셔리 브랜드의 모노그래프.

02

컬러

극도의 대비: 블랙에 가까운 배경에 순백 타이포그래피, 보조 UI 요소에는 섬세한 회색 악센트를 사용합니다.

03

타이포그래피

geometric-sans · monospace

• display118px · 400
• body15px · 400
• caption10px · 400

기본산세리프는 기하학적이고 깔끔하며 가독성이 높습니다. · 모노스페이스 폰트는 특정 UI 요소와 레이블에 사용됩니다. · 모든 타이포그래피는 일반 굵기(400)로 설정됩니다.

04

여백

단순한 4px 기본 그리드가 모든 간격을 지배하며, 섹션 컨테이너에는 여유로운 패딩(40px-48px)을 적용합니다.

05

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

얇고 불투명도가 낮은 화이트 테두리 또는 다크 솔리드 테두리를 절제하여 사용합니다.

삽입(inset) 및 돌출(outset) 그림자를 사용한 섬세한 뉴모피즘 효과로 카드와 버튼에 깊이를 만듭니다. · 그림자는 불투명도가 낮은 블랙과 그레이를 사용하여 다크 배경과 자연스럽게 어우러집니다.

06

레이아웃

여유로운 화이트스페이스와 수직 리듬에 초점을 맞춘 깔끔한 열 기반 레이아웃입니다.

07

모션과 인터랙션

히어로 헤드라인은 타이핑 또는 등장 애니메이션이 적용된 것으로 보입니다. · 인터랙티브 상태에는 transform과 transition이 사용됩니다.

인터랙티브 요소의 그림자 깊이나 색상 강도의 미세한 변화. · 버튼과 링크의 섬세한 scale 또는 transform 효과.

08

컴포넌트

• button 섬세한 하이라이트와 그림자를 적용한 뉴모피즘 다크 버튼으로, 알약 형태를 위해 50% border-radius를 적용하는 경우가 많습니다.
• card 섬세한 뉴모피즘 그림자와 12px border-radius를 적용한 다크 카드.
• chip 제공된 스크린샷에서 두드러지게 보이지 않습니다.
• input 제공된 스크린샷에서 두드러지게 보이지 않습니다.
• hero 거대한 왼쪽 정렬 헤드라인이 타이핑되거나 드러나는 풀스크린 다크 히어로 섹션.

09

보이스와 금지 목록

• 톤 자신감 있고 직접적이며 미니멀합니다.
• 헤드라인 거대하고 굵으며 선언적인 '스타atement' 스타일을 사용합니다.
• CTA 절제되고 뉴모피즘 디자인 시스템에 통합되어 있습니다.

• 밝고 채도 높은 악센트 색상을 사용하지 마세요 — 스크린샷은 엄격한 단색 팔레트를 보여줍니다.
• 장식용 세리프를 사용하지 마세요 — 스크린샷은 모든 텍스트에 깔끔한 기하학적 산세리프를 사용합니다.
• 두껍고 불투명한 드롭 그림자를 사용하지 마세요 — 스크린샷은 섬세한 뉴모피즘 그림자 기법을 보여줍니다.
• 지저분한 레이아웃을 만들지 마세요 — 스크린샷은 넓은 여백을 가진 미니멀리스트, 고대비 디자인을 보여줍니다.
• 굵고 두꺼운 폰트 웨이트를 사용하지 마세요 — 스크린샷은 모든 텍스트가 일반(400) 웨이트입니다.
• 모든 곳에 둥글고 부드러운 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 Highly 둥근(50%) 반경이 혼합되어 있습니다.
• 피하기: 화려한 그라데이션
• 피하기: 장난스러운 일러스트레이션
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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