우아하고 고대비의 헤드라인을 위해 트랜지셔널 세리프를 사용합니다. · 본문 텍스트와 주요 인터페이스 요소를 위해 깔끔한 그로테스크산스를 사용합니다. · 브랜드 로고와 강력한 CTA를 위해 볼드하고 넓은 그로테스크산스를 사용합니다. · 라벨과 버튼에 대문자와 넓은 자간을 적용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
넉넉한 패딩과 여백은 프리미엄스럽고 여유로운 레이아웃을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 4px
lg · 8px
pill · 999px
최소한으로, 구분과 하이라이트를 위해 1px의 가늘고 실선 검정 또는 마젠타 라인을 사용합니다.
rgba(0,0,0,0.25) 0px 5.78px 5.78px 0px
06
레이아웃
1440container
12columns
24pxgutter
768 / 1024breakpoints
전체 폭 히어로 섹션(가운데 정렬 콘텐츠)에서 구조화된 다열 상품 그리드로 전환됩니다.
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.39, 0.575, 0.565, 1)easing
콘텐츠 로딩 시 부드러운 페이드인 전환. · 인터랙티브 요소의 불투명도 기반 hover 상태.
버튼과 링크에 대한 절제된 불투명도 감소 또는 색상 변화. · 색상 변화 또는 미세한 스케일링을 통한 즉각적인 시각적 피드백.
08
컴포넌트
button흰색 대문자 텍스트가 있는 검정 배경, 날카로운 모서리, 넓은 자간. 보조 액션을 위한 마젠타 변형.
card최소한의 테두리가 있는 깔끔한 흰색 배경, 고품질 상품 사진에 집중.
chip얇은 하단 테두리가 있는 대문자 텍스트 라벨, 활성 상태에서는 마젠타로 전환.
input검정 테두리가 있는 간단한 라인 스타일 입력 필드, 미니멀한 미학을 유지.
hero세리프 헤드라인, 산세리프 설명, 그리고 눈에 띄는 검정 CTA 버튼이 있는 대규모 사진형 히어로.
09
보이스와 금지 목록
톤자신감 있고, 세련되며, 직접적입니다.
헤드라인단순함과 품질을 강조하는 우아한 세리프 헤드라인.
CTA대담하고, 대문자이며, 넓은 자간이 있는 행동 지향적 표현.
주요 버튼에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형 버튼 모양을 보여줍니다.
상품 카드에 드롭 섀도우를 추가하지 마세요 — 스크린샷은 플랫하고 테두리 없는 카드를 보여줍니다.
여러 강조색을 사용하지 마세요 — 스크린샷은 단일 마젠타 강조색만 보여줍니다.
스크립트 또는 손글씨 폰트를 사용하지 마세요 — 스크린샷은 세리프와 산세리프 카테고리만 보여줍니다.
무거운 배경 패턴을 사용하지 마세요 — 스크린샷은 깔끔한 흰색 또는 오프화이트 배경을 보여줍니다.
이 디자인은 ' Effortless, 범용적인, 피부 중심의'으로 포지셔닝된 프리미엄 미니멀리스트 뷰티 브랜드를 위한 것입니다. 팔레트는 엄격히 모노크롬(흰색 #FFFFFF 위의 검정 #000000)이며, 한 가지 선명한 마젠타(#FF2E92) 강조색을 사용합니다. 타이포그래피는 헤드라인용 우아한 트랜지셔널 세리프와 본문 텍스트용 깔끔한 그로테스크산스를 쌍으로 구성합니다. 버튼에 둥근 모서리 추가, 여러 강조색 사용, 상품 카드에 드롭 섀도우 추가는 피하세요. 레이아웃은 복잡한 장식 요소보다 넉넉한 여백과 고품질 사진에 우선순위를 둡니다. 세련된 에디토리얼 느낌을 유지하기 위해 내비게이션과 인터랙티브 요소에 대문자, 넓은 자간 라벨을 사용하세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
