임상적 효능과 장난기 있고 포괄적이며 하이패션 에디토리얼 미학을 결합한 대담한 현대 스킨케어 브랜드입니다.
02
컬러
#FF454EAccent
#FFFFFFInk
#131212BG
#F6F6F6BG soft
#818181Muted
rgba(19, 18, 18, 1)Line
깊은 차콜과 선명한 화이트를 기반으로 한 고대비 팔레트에, 활기찬 초점 역할을 하는 생동감 있는 코랄레드 악센트가 더해집니다.
03
타이포그래피
geometric-sans · humanist-sans
display120px · 700
heading42px · 500
body14px · 400
label12px · 500
대형 전시 텍스트와 주요 헤드라인에는 기하학적 sans-serif를 사용합니다. · 본문 텍스트와 UI 요소에는 가독성을 유지하기 위해 인문학적 sans-serif를 사용합니다. · 대형 전시 텍스트에는 컴팩트하고 임팩트 있는 느낌을 위해 좁은 letter-spacing을 적용합니다. · 본문 텍스트는 14px 이상의 크기를 유지하여 가독성을 보장합니다.
04
여백
4px
8px
10px
12px
16px
20px
24px
30px
48px
64px
UI 요소에는 4px 기반의 좁은 spacing을, 에디토리얼 섹션에는 넉넉한 여백을 조합하여 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 2px
md · 4px
lg · 8px
pill · 999px
테두리는 주로 입력 상태 또는 버튼 테두리를 정의하는 데 사용되며, 보통 1px solid black입니다.
06
레이아웃
1440container
12columns
24pxgutter
768 / 1024breakpoints
대형 타이포그래피 워드마크와 큰 제품 사진이 주를 이루는 풀블리드 히어로 섹션과 그 뒤를 이어 2컬럼 에디토리얼 섹션이 이어집니다.
07
모션과 인터랙션
200msmicro
400mssmall
800msmedium
cubic-bezier(0, 0, 0.2, 1)easing
콘텐츠 요소에 대한 페이드인 애니메이션. · 인터랙티브 요소에 대한 부드러운 color 전환. · 텍스트 및 배경 color 변경에 대한 선형 전환.
버튼과 링크와 같은 인터랙티브 요소는 0.2초의 부드러운 선형 전환으로 배경 또는 텍스트 color를 변경합니다. · 배경 또는 테두리 color의 미묘한 변화로 활성 상태를 나타냅니다.
08
컴포넌트
button버튼은 2px border-radius, 14px sans-serif 텍스트, 그리고 hover 시 단색으로 채워지는 투명 배경을 가진 깔끔하고 미니멀한 디자인을 특징으로 합니다.
card콘텐츠 카드는 전통적인 카드 테두리나 그림자 대신 고품질 사진과 넉넉한 여백에 의존합니다.
chip작은 대문자 라벨로, 1px 테두리와 둥근 모서리를 가진 것이 태그 및 보조 정보에 사용됩니다.
input입력 필드는 간단한 1px 테두리와 2px border-radius를 사용하여 깔끔하고 기능적인 외관을 유지합니다.
hero어두운 배경에 대형 타이포그래피 워드마크와 중앙 제품 샷을 특징으로 하는 전 뷰포트 히어로 섹션입니다.
09
보이스와 금지 목록
톤자신감 있고 포괄적이며 과학적 근거에 기반한 어조에 약간의 장난기 있는 느낌이 더해집니다.
헤드라인대담하고 오버사이즈이며 직접적입니다. 종종 단어 하나나 짧고 임팩트 있는 구문을 사용합니다.
CTA단순하고 행동 지향적이며, 깔끔한 sans-serif 폰트와 투명한 버튼 스타일을 사용합니다.
장식적이거나 필기체 폰트를 사용하지 마세요. 스크린샷은 깔끔한 기하학적 및 인문학적 sans-serif 서체의 일관된 사용을 보여줍니다.
히어로 섹션에 밝거나 화려한 배경을 사용하지 마세요. 스크린샷은 어두운 차콜 배경에 화이트 텍스트를 사용합니다.
카드에 과도한 그림자나 테두리를 사용하지 마세요. 스크린샷은 무거운 컨테이너 없이 깔끔하고 사진 중심적인 레이아웃을 보여줍니다.
다색 팔레트를 사용하지 마세요. 스크린샷은 블랙, 화이트, 그리고 단일한 생동감 있는 코랄 악센트에 집중된 팔레트를 보여줍니다.
버튼이나 입력 필드에 크고 둥근 모서리를 사용하지 마세요. 스크린샷은 더 날렵하고 정돈된 느낌을 위해 2px border-radius를 사용합니다.
작고 지저분한 레이아웃을 사용하지 마세요. 스크린샷은 에디토리얼 느낌을 만들기 위해 거대한 타이포그래피와 넉넉한 여백을 보여줍니다.
피하기: 지나치게 전문적인 용어, 지나치게 장식적인 요소, 또는 임상적이고 건조한 미학은 피합니다.
이것은 대담하고 오버사이즈 타이포그래피와 고대비 사진을 사용하여 현대적이고 에디토리얼한 느낌을 만드는 프리미엄 스킨케어 브랜드 웹사이트입니다. 주요 색상은 깊은 차콜(#131212)과 선명한 화이트(#FFFFFF)이며, 주요 CTA 및 인터랙티브 요소를 위한 생동감 있는 코랄레드(#FF454E) 악센트가 사용됩니다. 타이포그래피는 전시용 기하학적 sans-serif와 본문용 인문학적 sans-serif를 결합하며, 대형 헤드라인에는 매우 좁은 letter-spacing이 적용됩니다. 주요 디자인 규칙은 다음과 같습니다: 장식적이거나 필기체 폰트를 절대 사용하지 않습니다; 히어로 섹션의 밝은 배경은 피합니다; 모든 구성 요소에 2px border-radius를 사용합니다; 넉넉한 여백을 가진 고대비, 사진 중심 레이아웃을 유지합니다. 어조는 자신감 있고 포괄적이며 과학적 근거에 기반합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
