큐레이션 · 오픈 · 무료

Typology

깨끗한 성분과 과학적 정밀함에 초점을 맞춘 미니멀리스트 프리미엄 스킨케어 브랜드.

01

디자인 DNA

모던한 약방과 하이엔드 에디토리얼 매거진의 만남.

02

컬러

클리니컬한 순수함을 불러일으키기 위한 고대비 타이포그래피를 활용한 단색 절제.

03

타이포그래피

grotesque-sans · monospace

• display64px · 500
• h148px · 500
• h232px · 500
• body15px · 400
• small13px · 400
• micro10px · 400

내비게이션 및 유틸리티 텍스트는 항상 대문자로 표시합니다. · 헤드라인은 좁은 자간과 두꺼운 웨이트를 사용합니다. · 본문 텍스트는 깔끔하고 중립적인 산세리프 형태를 유지합니다.

04

여백

공기 있고 프리미엄한 느낌을 위해 넉넉한 여백을 둔 일관된 4px 기본 그리드.

05

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

구분 및 버튼에 절제적으로 사용되는 검정 또는 다크그레이의 얇은 1px 테두리.

rgba(0, 0, 0, 0.3) 0px 30px 70px 0px

06

레이아웃

풀寬도 포토그래픽 히어로 영상과 그 뒤에 제품 탐색을 위한 깔끔하고 구조화된 그리드.

07

모션과 인터랙션

버튼과 링크의 hover 상태를 위한 매끄러운 전환. · 섬세한 인터랙티브 피드백을 위한 변형 기반 애니메이션.

전환을 동반하는 섬세한 배경색 또는 불투명도 변화. · 주로 색상 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 대문자 텍스트를 사용한 고대비 사각형; 주요 버튼은 검정 배경에 흰색 텍스트, 보조 버튼은 흰색 배경에 검정 테두리.
• card 고품질 제품 이미지와 정확한 타이포그래피를 적용한 깔끔한 테두리 없는 카드.
• chip 해당 없음 - 표시된 스크린샷에 없음.
• input 해당 없음 - 표시된 스크린샷에 없음.
• hero 오버레이된 좌측 정렬 텍스트가 있는 풀블리드 고충격 포토그래피.

09

보이스와 금지 목록

• 톤 클리니컬하고 직설적이며 세련됨.
• 헤드라인 짧고 굵으며 선언적인 형태, 주로 대문자 사용.
• CTA 행동 지향적이고 명확하며 항상 대문자 사용.

• 둥글고 통통한 모양을 사용하지 마세요 - 스크린샷에는 날카롭고 기하학적인 사각형과 정사각형이 보입니다.
• 선명하고 채도 높은 강조 색상을 사용하지 마세요 - 스크린샷에는 엄격한 단색 팔레트만 보입니다.
• 장식적이거나 필기체 폰트를 사용하지 마세요 - 스크린샷에는 깔끔하고 기능적인 grotesque-sans가 보입니다.
• 많은 테두리나 상자로 인터페이스를 어지럽히지 마세요 - 스크린샷에는 넉넉한 여백이 있는 깔끔한 테두리 없는 레이아웃이 보입니다.
• 모든 곳에 무거운 드롭 섀도우를 사용하지 마세요 - 스크린샷에는 절제적으로 사용된 하나의 미세한 깊은 섀도우가 보입니다.
• 주요 내비게이션과 CTA에 소문자를 사용하지 마세요 - 스크린샷에는 이러한 요소들에 일관된 대문자 스타일이 적용되어 있습니다.
• 피하기: 지나치게 캐주얼하거나 통통 튀는 언어.
• 피하기: 과도한 감탄사 사용.
• 피하기: 모호하거나 화려한 마케팅 용어.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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