큐레이션 · 오픈 · 무료

10Xdesigners

디자이너가 리소스를 공유하고 발견하는, 대비가 높고 타이포그래피 중심의 허브.

01

디자인 DNA

디자이너를 위한 도구와 에셋의 하이엔드 미니멀 갤러리.

02

컬러

엄격한 흑백 바탕에 단일한 고채도 빨간색 악센트를 사용하는, 명확하고 대비가 높은 미니멀리즘.

03

타이포그래피

grotesque-sans

• display300px · 400
• heading32px · 400
• body18px · 400
• small13px · 400

시각적 응집력을 유지하기 위해 거대한 전시 텍스트에 극도로 타이트한 자간(-12px)을 사용합니다. · 모든 요소에서 일관된 보통 굵기(400)를 유지하여 디자인을 깔끔하고 균일하게 유지합니다.

04

여백

요소 간의 넉넉하고 의도적인 간격을 가진 엄격한 4px 베이스 그리드.

05

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

구분선 및 입력 상태에 절제적으로 사용되는 1px solid rgba(148, 148, 148, 0.3).

none

06

레이아웃

거대한 타이포그래피를 가진 풀 너비 히어로 섹션과 구조화된 그리드 기반 콘텐츠 영역.

07

모션과 인터랙션

UI 상태 변화를 위한 부드럽고 linear한 가시성 전환 효과. · 인터랙티브 요소에 대한 미묘한 hover 효과.

인터랙티브함을 나타내기 위한 미묘한 색상 변화 또는 불투명도 변경. · 복잡한 애니메이션 없이 즉각적이고 반응적인 피드백.

08

컴포넌트

• button 대비가 높은 색상과 깔끔한 타이포그래피를 가진 알약 형태의 주요 액션 버튼.
• card 명확한 타이포그래피와 미묘한 테두리로 콘텐츠에 집중하는 미니멀리스트 카드.
• chip 활성 및 비활성 상태가 명확한 라디오 스타일 선택 칩.
• input 둥근 테두리와 부드러운 focus 전환 효과가 있는 깔끔한 텍스트 입력 필드.
• hero 거대한 타이포그래피 문구가 지배하는 풀 스크린 몰입형 히어로 섹션.

09

보이스와 금지 목록

• 톤 직설적이고 자신감 있으며 전문적인, 디자인에 정통한 대상을 향한 어조.
• 헤드라인 대담하고 거대하며 타이포그래피적으로 표현적인, 종종 타이트한 간격을 사용합니다.
• CTA 명확하고 행동 지향적이며 시각적으로 두드러진, 사용자를 다음 단계로 안내합니다.

• 다양한 폰트 굵기를 사용하지 않습니다 — 스크린샷에는 굵기 400만 사용되어 있습니다.
• 여러 악센트 색상을 사용하지 않습니다 — 스크린샷에는 단일한 빨간색 악센트(#FF1841)만 사용되어 있습니다.
• 부드럽거나 흐릿한 배경 색상을 사용하지 않습니다 — 스크린샷에는 명확하고 순수한 검은색 배경이 사용되어 있습니다.
• 타이트하고 밀집된 간격을 사용하지 않습니다 — 스크린샷에는 넉넉한 여백과 큰 타이포그래피 규모가 사용되어 있습니다.
• 복잡하고 장식적인 UI 요소를 사용하지 않습니다 — 스크린샷에는 깔끔하고 미니멀리스트한 구성 요소가 사용되어 있습니다.
• 무거운 그림자나 3D 효과를 사용하지 않습니다 — 스크린샷에는 플랫하고 대비가 높은 표면이 사용되어 있습니다.
• 피하기: 지나치게 장식적인 폰트나 과도한 색상 팔레트는 피합니다.
• 피하기: 빈약한 단락은 피하고, 넉넉한 간격과 명확한 계층 구조를 사용합니다.
• 피하기: 핵심 콘텐츠에서 주의를 산만하게 하는 복잡한 애니메이션은 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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