큐레이션 · 오픈 · 무료

Variable Fonts

가변 폰트와 브랜드 사례 연구를 위한 깨끗하고 타이포그래피 중심의 리소스 허브입니다.

01

디자인 DNA

정제된 디자인 라이브러리 및 리소스 허브

02

컬러

단 하나의 기능적 블루 강조색이 있는 깨끗하고 고대비의 중성 캔버스

03

타이포그래피

grotesque-sans · monospace

• display56px · 500
• h224px · 500
• body16px · 400

일관된 UI 렌더링을 위해 표준 시스템 대체 스택(Helvetica, Arial)을 사용합니다 · 명확한 타이포그래피 계층 구조를 위해 모듈러 스케일을 유지합니다 · 최적의 가독성을 위해 본문 텍스트 두께를 400으로 유지합니다

04

여백

일관된 24px 거터를 사용하는 표준 4px 그리드 시스템

05

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

1px solid #E7EAEA

0px 1px 6px rgba(0, 0, 0, 0.06) · 0px 11px 15px rgba(0, 0, 0, 0.05)

06

레이아웃

모바일에서 스택되는 반응형 3열 카드 그리드

07

모션과 인터랙션

카드 hover 시 미세한 그림자 및 transform 전환 · 콘텐츠 로딩 시 부드러운 페이드인

인터랙티브 카드의 그림자 깊이를 증가시키고 미세하게 스케일 조정 · 미세한 상태 변화로 즉각적인 시각적 피드백

08

컴포넌트

• button 흰색 텍스트와 미세한 border-radius를 가진 기능적 블루 강조색 버튼
• card 16px 둥근 모서리와 절제된 hover 그림자가 있는 이미지 중심 카드
• chip 점으로 구분된 간단한 텍스트 기반 카테고리 칩
• input 미니멀한 검색 입력 필드
• hero 크고 왼쪽 정렬된 타이포그래피 hero 섹션

09

보이스와 금지 목록

• 톤 전문적이고 권위적이며 교육적인
• 헤드라인 굵고 직접적이며 주제에 집중된
• CTA 명확하고 행동 지향적인(예: '영업팀에 문의하기')

• 장식적 세리프 폰트를 사용하지 마세요 — 스크린샷은 깨끗한 grotesque-sans 시스템을 보여줍니다
• 무거운 drop shadow를 추가하지 마세요 — 스크린샷은 매우 절제된 box shadow만 보여줍니다
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 왼쪽 정렬된 제목과 본문을 보여줍니다
• 여러 강조색을 사용하지 마세요 — 스크린샷은 단 하나의 기능적 블루를 보여줍니다
• 긴 텍스트에 타이트한 line-height를 사용하지 마세요 — 스크린샷은 편안한 1.5 line-height를 보여줍니다
• 모든 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 둥근 카드의 조합을 보여줍니다
• 피하기: 지나치게 캐주얼한 언어나 은어를 피합니다
• 피하기: 타이포그래피를 산만하게 하는 지나치게 복잡한 레이아웃을 피합니다
• 피하기: 읽기를 방해하는 불필요한 애니메이션을 피합니다

10

팩 안의 실제 스크린샷

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

11

System Prompt

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