깊은 갈색 잉크를 기조로 한 따뜻하고 은은한 어스 팔레트. 흰색 카드와 은은한 쉐도우를 사용하여 레이어감을 형성합니다.
03
타이포그래피
transitional-serif · humanist-sans
display72px · 700
heading-132px · 400
heading-228px · 400
body16px · 400
label13px · 900
모든 주요 전시 및 제목 텍스트에 트랜지션 세리프를 사용하여 정제된 에디토리얼 미학을 유지합니다. · 내비게이션 레이블, 작은 메타 텍스트, 대문자 UI 요소에 휴머니스트 산스를 사용합니다. · 대형 전시 텍스트와 내비게이션 레이블에는 타이트한 네거티브 자간을 유지합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
4px 그리드를 기반으로 한 일관된 간격. 섹션 간 및 컴포넌트 내에 충분한 여유 공간을 제공합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(101, 74, 78, 0.3)
rgba(145, 106, 112, 0.15) 0px 6px 24px 0px
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
두드러진 헤더가 있는 중앙 정렬 단일 컬럼 레이아웃. 그 뒤에 반응형 2컬럼 그리드의 콘텐츠 카드가 배치됩니다.
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
호버 상태에서 부드러운 배경 및 색상 전환. · 박스 쉐도우 전환을 통한 은은한 높이 변화.
상호작용을 나타내기 위한 배경색 또는 텍스트색의 은은한 변화. · 부드러운 전환과 즉각적인 시각적 피드백.
08
컴포넌트
button일반적으로 대문자 휴머니스트 산스 텍스트 링크로, 볼드 웨이트와 타이트한 자간을 가지며, 수평선으로 분리되는 경우가 많습니다.
card상단에 이미지, 하단에 타이포그래피/메타 정보가 있는 깔끔한 흰색 직사각형 카드. 은은한 따뜻한 쉐도우로 입체감을 줍니다.
chip긴 대시로 분리된 단순한 대문자 산세리프 텍스트 레이블.
input두드러지게 사용되지 않지만, 암시되는 텍스트 입력 필드는 미니멀 미학을 따릅니다.
hero따뜻하고 은은한 배경에 트랜지션 세리프 폰트로 중앙 정렬된 대형 타이포그래피 로고. 간결한 태그라인과 함께 제공됩니다.
09
보이스와 금지 목록
톤지식이 풍부하고 정제된 권위 있는 어조. 디자인 리터러시가 있는 독자에게 직접 말을 겁니다.
헤드라인우아하며, 종종 타이트한 자간의 트랜지션 세리프 폰트를 사용합니다.
CTA절제되어 있으며, 두드러진 버튼 대신 볼드한 대문자 산세리프 텍스트 링크를 사용합니다.
선명하고 채도가 높은 색상을 사용하지 마세요 — 팔레트는 따뜻하고 은은하며 채도가 낮은 어스톤에 의존합니다.
모든 텍스트에 기하학적 산스세리프를 사용하지 마세요 — 주요 전시 폰트는 트랜지션 세리프입니다.
무거운 드롭 쉐도우나 3D 효과를 사용하지 마세요 — 입체감은 매우 은은하고 따뜻한 박스 쉐도우로 구현됩니다.
엄격하고 경직된 그리드를 사용하지 마세요 — 레이아웃은 기본 구조에도 불구하고 에디토리얼하고 약간 오가닉하게 느껴집니다.
본문에 대문자를 사용하지 마세요 — 대문자는 소형 내비게이션 레이블과 메타 태그에 엄격히 제한됩니다.
모든 텍스트 정렬을 중앙으로 하지 마세요 — 히어로는 중앙 정렬이지만, 후속 콘텐츠의 상당 부분은 왼쪽 또는 혼합 정렬을 사용합니다.
