모든 대형 디스플레이 카피에는 전이형 세리프를 사용합니다. · 네비게이션, 버튼 및 기능적 UI 요소에는 휴머니스트산세리프를 사용합니다. · 모든 텍스트에 매우 가벼운 폰트 웨이트(100-300)를 유지합니다. · 가독성을 높이기 위해 0.5px의 일관된 자간을 적용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
요소 간 넉넉한 여백을 둔 여유롭고 비대칭적인 레이아웃.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 0px
lg · 0px
pill · 999px
최소한의 테두리 사용; 미묘한 구분을 위해 1px solid rgba(0,0,0,0.5)를 적용합니다.
06
레이아웃
1440container
12columns
24pxgutter
768 / 1024breakpoints
풀블리드 히어로 이미지 후 단일 칼럼 텍스트 섹션.
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.2, 0, 0.1, 1)easing
페이지 로드 시 부드러운 opacity 및 위치 페이드. · 텍스트 링크의 매끄러운 hover 전환.
미묘한 opacity 변화 또는 밑줄 표시. · 상태 변화를 통한 즉각적인 시각적 피드백.
08
컴포넌트
button하단 1px 테두리가 있는 미니멀한 텍스트 링크.
card배경이나 테두리 없이 깔끔한 사진 카드.
chip대문자 sans-serif 소형 라벨.
input미묘한 하단 테두리가 있는 깔끔한 sans-serif 입력 필드.
hero큰 세리프 텍스트 오버레이가 있는 풀블리드 포토그래픽 히어로.
09
보이스와 금지 목록
톤시적이고, 분위기를 자아내며, 차분한 어조.
헤드라인분위기를 조성하는 묘사적인 세리프 문장.
CTA하단 테두리가 있는 단순하고 직접적인 텍스트 링크.
본문에 볼드 웨이트를 사용하지 마세요 — 스크린샷은 매우 얇고 가벼운 웨이트(100-300)를 보여줍니다.
UI 요소에 무거운 드롭 섀도우를 추가하지 마세요 — 스크린샷은 완전히 플랫한 표면을 보여줍니다.
구성 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 0px 반경의 모서리를 보여줍니다.
다크 모드를 사용하지 마세요 — 스크린샷은 주로 화이트와 밝은 배경을 보여줍니다.
고채도, 채도 높은 악센트 색상을 사용하지 마세요 — 스크린샷은 차분한 땅색의 sandy 탄색 악센트를 보여줍니다.
부티크 캔들 브랜드를 위한 프리미엄, 에디토리얼 이커머스 경험을 디자인하세요. 미적 감각은 미니멀하고 세련되어야 하며, 따뜻한 사진 톤을 사용한 모노크롬 흑백 기반을 사용합니다. 타이포그래피는 매우 가벼워야 합니다(헤드라인용 전이형 세리프, UI용 휴머니스트산세리프). 모든 텍스트에 0.5px의 일관된 자간을 적용합니다. 주요 색상은 화이트(#ffffff), 오프화이트(#f7f7f7), 블랙(#000000), 그리고 차분한 sandy 탄색(#dec39d)입니다. 무거운 폰트 웨이트, 둥근 모서리, 드롭 섀도우, 또는 공격적인 판매 카피를 피하고, 차분하고 시적이며 여백이 많은 레이아웃을 유지하세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
