큐레이션 · 오픈 · 무료

Hugging Face

AI 커뮤니티가 모델, 데이터셋, 앱을 협업할 수 있는 친근하고 높은 실용성을 갖춘 플랫폼.

01

디자인 DNA

머신러닝 엔지니어와 연구자들을 위한 번화한 디지털 광장.

02

컬러

미묘한 회색 테두리가 있는 깔끔한 흰색 배경을 기본으로, 히어로 섹션에는 짙은 네이비 그라디언트를 사용합니다.

03

타이포그래피

humanist-sans · monospace

• display56px · 700
• h132px · 700
• h220px · 600
• body16px · 400
• caption12px · 400

04

여백

단단한 4px 마이크로 간격을 가진 일관된 8px 그리드입니다.

05

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

1px solid #E5E7EB

rgba(0, 0, 0, 0.1) 0px 1px 2px 0px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px · rgba(0, 0, 0, 0.1) 0px 20px 25px -5px

06

레이아웃

모바일에서는 단일 열로 축소되는 표준 반응형 12열 그리드입니다.

07

모션과 인터랙션

hover 시 미묘한 색상 전환 · 인터랙티브 요소의 스케일 및 translate 변환

0.15s ease로 배경을 밝게 하거나 테두리 색상을 변경합니다. · 미묘한 스케일 다운 변환 효과입니다.

08

컴포넌트

• button 흰색 텍스트와 알약 모양의 반경을 가진 짙은 네이비 채우기 버튼, 또는 테두리가 있는 투명 버튼입니다.
• card 밝은 회색 테두리와 12px border-radius를 가진 흰색 카드로, 기능 및 조직 목록에 사용됩니다.
• chip 태스크 및 라이브러리 같은 카테고리를 위한 밝은 회색 배경의 작고 둥근 태그입니다.
• input 미묘한 회색 테두리와 내부 패딩이 있는 둥근 검색 필드입니다.
• hero 짙은 네이비에서 검정으로의 그라디언트 배경에 큰 흰색 텍스트와 돋보이는 마스코트가 있습니다.

09

보이스와 금지 목록

• 톤 친근하고 협업적이며 기술적으로 정확한 어조.
• 헤드라인 커뮤니티와 구축을 강조하는 굵고 단정적인 문구.
• CTA 직접적이고 행동을 유도하는 문구 (예: '탐색', '찾아보기').

• 공격적인 네온 악센트를 사용하지 마세요. 팔레트는 네이비, 회색, 흰색에 의존합니다.
• 무거운 드롭 그림자를 사용하지 마세요. 카드에는 미묘한 입체감만 사용됩니다.
• 긴 단락의 텍스트를 중앙 정렬하지 마세요. 정렬은 왼쪽 정렬입니다.
• 모든 요소에 완전히 둥근 모서리를 사용하지 마세요. 8px와 알약 모양을 혼합하여 사용합니다.
• 복잡한 일러스트레이션을 사용하지 마세요. UI는 깔끔한 아이콘과 단일 마스코트에 의존합니다.
• 기본값으로 다크 모드를 사용하지 마세요. 주요 경험은 밝은 테마와 짙은 히어로 섹션입니다.
• 피하기: 지나치게 기업적인 전문 용어
• 피하기: 공격적인 판매용 언어
• 피하기: 주요 UI에 사용되는 복잡한 학술 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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