디스플레이 헤드라인 내 강조에는 이탤릭체 전환 세리프를 사용합니다. · 본문 텍스트는 모든 UI 요소에서 일관된 grotesque-sans를 유지합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
엄격한 4px 그리드 시스템이 깔끔하고 예측 가능한 수직 리듬을 만듭니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 20px
lg · 28px
pill · 999px
보이지 않는 테두리; 공간적 구분은 배경색 변화를 통해 이루어집니다.
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
타이포그래피를 강조하기 위해 상당한 여백을 둔 중앙 정렬 단일 열 레이아웃입니다.
07
모션과 인터랙션
150msmicro
400mssmall
1200msmedium
cubic-bezier(0.08, 0.82, 0.17, 1)easing
로고 애니메이션을 위한 매끄러운 탄력적 easing. · 인터랙티브 요소에서의 섬세한 hover 전환.
버튼 및 인터랙티브 요소에서의 섬세한 배경색 변화. · 축소된 scale 또는 opacity로 즉각적인 시각적 피드백.
08
컴포넌트
button고대비 옐로우 채우기 또는 섬세한 회색 배경을 가진 알약 형태의 버튼입니다.
card콘텐츠 섹션을 그룹화하는 데 사용되는 다크 배경의 둥근 컨테이너입니다.
chip특정 정보를 강조하기 위해 배경 채우기를 사용하는 작은 인라인 태그입니다.
input두드러지게 보이지 않지만, 확립된 알약 형태 스타일을 따릅니다.
hero대형 타이포그래피와 떠다니는 브랜드 로고가 지배하는 전체 너비 중앙 정렬 레이아웃입니다.
09
보이스와 금지 목록
톤자신감 있고 권위 있으며 미니멀합니다.
헤드라인강조를 위해 일반 및 이탤릭 세리프를 혼합하여 사용하는 단언적이고 대담한 스타일입니다.
CTA가격 등 가치 제안에 초점을 맞춘 직접적이고 명확한 스타일입니다.
복수의 악센트 색상을 사용하지 마세요 — 스크린샷은 다크 배경(#18181b) 위에 단일 지배적인 옐로우(#fde533)만 보여줍니다.
무거운 테두리를 사용하지 마세요 — 스크린샷은 배경색 블록과 여백을 통해 구분을 보여줍니다.
드롭 섀도우를 사용하지 마세요 — 스크린샷은 높이감 없이 평평하고 레이어링된 표면을 보여줍니다.
본문 텍스트에 전부 대문자를 사용하지 마세요 — 스크린샷은 가독성을 위해 문장 대소문자를 사용합니다.
작은 디스플레이 크기를 사용하지 마세요 — 스크린샷은 뷰포트를 지배하는 대형 96px 헤드라인을 보여줍니다.
밝고 고채도 배경을 사용하지 마세요 — 스크린샷은 엄격한 다크 모드 팔레트를 사용합니다.
피하기: 혼란스러운 레이아웃이나 불필요한 UI 요소를 피합니다.
피하기: 경쟁적인 복수의 악센트 색상을 피합니다.
피하기: 캐주얼하거나 지나치게 열정적인 언어를 피합니다.
11
System Prompt
로고 영감에 초점을 맞춘 프리미엄 디자인 도구 및 큐레이션 플랫폼입니다. 시각적 정체성은 단일 고채도 옐로우 악센트(#fde533)를 사용하는 다크 모드 팔레트(#18181b, #27272a, #343538) 위에 구축되었습니다. 타이포그래피는 디스플레이 헤드라인용 전환 세리프(강조를 위해 종종 이탤릭체)와 본문 텍스트용 grotesque-sans의 정교한 조합으로 대형 크기로 설정됩니다. 레이아웃은 깔끔하고 중앙 정렬되어 있으며 넉넉한 여백에 의존합니다. 핵심 제약 조건: 복수의 악센트 색상을 절대 사용하지 말고, 무거운 테두리나 드롭 섀도우를 피하며, 헤드라인에 절대 작은 디스플레이 크기를 사용하지 마세요. 전체적으로 자신감 있고 권위 있는 어조를 유지하세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
