큐레이션 · 오픈 · 무료

About Instagram

인스타그램의 커스텀 산세리프 타이프페이스를 위한 대담한 타이포그래피 쇼케이스

TypographyDesign ToolsEditorialPremiumExpressive
About Instagram 스크린샷
↓ 디자인 시스템 다운로드 (4 MB)OpenDesign 에서 열기

원본 사이트: https://about.instagram.com/brand/type

📦 팩 내용 보기 →

01

디자인 DNA

타이포그래피커스텀 폰트브랜드 아이덴티티디자인 시스템인스타그램

커스텀 디자인된 폰트 패밀리를 선보이는 마스터 타이포그래피 스페시멘

02

컬러

#D300C5Accent
#1C1E21Ink
#8E8E93Ink soft
#FFFFFFBG
#D4D4D4Muted
rgba(28,30,33,0.12)Line

깨끗한 중성 배경 위에 생동감 있는 악센트 색상으로 높은 대비

03

타이포그래피

humanist-sans

디스플레이 타입은 임팩트를 위해 타이트한 음수 자간을 사용합니다 · 본문 텍스트는 가독성을 위해 넉넉한 행간을 유지합니다 · 폰트 웨이트는 전반적으로 레귤러(400)를 유지합니다 · 대형 스페시멘은 상세한 글리프 구조를 보여줍니다

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

일관된 기본-4 간격을 통해 수직 리듬을 유지하며, 대형 타이포그래피 스페시멘을 위한 넉넉한 패딩을 적용합니다

05

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

sm · 3px
md · 16px
lg · 20px
pill · 36px

시각적 구분을 위해 테두리보다는 색상 대비를 사용하는 미니멀한 스타일

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

한쪽 면에 대형 스페시멘이 있고, 넉넉한 여백의 깨끗한 콘텐츠 블록이 있는 분할 패널 히어로

07

모션과 인터랙션

100msmicro
400mssmall
750msmedium
cubic-bezier(0.33, 0, 0.67, 1)easing

인터랙티브 상태를 위한 부드러운 배경색 전환 · 커스텀 cubic-bezier 타이밍을 사용한 불투명도 페이드인 효과 · 리빌 효과를 위한 변환 애니메이션

100ms 지속 시간의 배경색 전환 · 변환 및 불투명도 상태 변화

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

About Instagram — 桌面首屏（hero）
桌面首屏（hero）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
About Instagram — 移动首屏
移动首屏

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

11

System Prompt

이것은 인스타그램의 커스텀 타이프페이스에 초점을 맞춘 타이포그래피 중심의 브랜드 쇼케이스로, 프리미엄 디자인 리소스로 포지셔닝합니다. 주요 색상으로는 잉크를 위한 #1C1E21, 생동감 있는 마젠타 악센트를 위한 #D300C5, 보조 퍼플 톤을 위한 #9B8FFF, 깨끗한 배경을 위한 #FFFFFF가 있습니다. 타이프페이스는 특징적인 sheared terminals와 특징을 가진 휴머니스트 산세리프 카테고리입니다. 핵심 디자인 규칙: 스페시멘 주변에 넉넉한 여백을 유지하고, 대형 디스플레이 텍스트에는 타이트한 음수 자간을 사용하며, 폰트 웨이트를 일관된 레귤러로 유지하세요. 타이포그래피와 경쟁하는 장식 요소를 추가하지 마세요. 이 쇼케이스에는 다크 모드 배경을 사용하지 마세요. 스페시멘 크기를 디스플레이 스케일 이하로 줄이지 마세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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