서브티브한 그레이를 통한 계층 구성을 위한 고대비 모노크롬 팔레트이며, 일러스트레이션에서 브랜드 고유 색상으로 포인트를 줍니다.
03
타이포그래피
sans-serif · monospace
display56px · 400
headline32px · 400
body16px · 400
caption14px · 400
디스플레이 폰트는 매우 읽기 좋은 sans-serif입니다. · 본문 텍스트는 표준 시스템 폰트 스택 대체를 사용합니다. · 코드 요소에는 모노스페이스를 사용합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
여유로운 여백과 표준 8pt 기반 spacing 스케일을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid #E5E7EB
0px 4px 6px -1px rgba(0, 0, 0, 0.1)
06
레이아웃
1200container
12columns
24pxgutter
768 / 1024breakpoints
중앙 정렬 컨테이너가 있는 표준 12컬럼 그리드입니다.
07
모션과 인터랙션
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 상태를 위한 부드러운 전환입니다. · 콘텐츠 섹션을 위한 서브티브한 페이드인입니다.
미세한 색상 변화 또는 약간의 높이 변화입니다. · 축소 또는 색상 전환입니다.
08
컴포넌트
button주요 작업을 위한 둥근 알약 모양, 깔끔한 sans-serif 텍스트, 고대비 배경입니다.
card둥근 모서리, 깔끔한 테두리, 서브티브한 hover 상태입니다.
chip작고 둥근 태그 또는 상태 표시기입니다.
input서브티브한 테두리가 있는 표준 양식 필드입니다.
hero큰 디스플레이 타입, 깔끔한 레이아웃, 중앙 정렬 또는 왼쪽 정렬입니다.
09
보이스와 금지 목록
톤전문적이고 자신감 있으며 약간 기술적인 어조입니다.
헤드라인직설적이고 강렬하며 이점 중심적입니다.
CTA행동을 유도하는 표현입니다 (예: 데모 요청, 제품 탐색).
드롭 섀도우를 사용하지 않습니다 — 스크린샷은 대신 서브티브한 테두리가 있는 플랫 디자인을 보여줍니다
복잡한 그라디언트를 사용하지 않습니다 — 스크린샷은 대신 깨끗한 흰색 배경을 보여줍니다
장식용 아이콘을 사용하지 않습니다 — 스크린샷은 대신 미니멀한 아이콘 사용을 보여줍니다
본문 텍스트에 올캡스를 사용하지 않습니다 — 스크린샷은 대신 표준 문장형 대소문자를 보여줍니다
배경으로 밝은 기본 색상을 사용하지 않습니다 — 스크린샷은 대신 흰색 위의 어두운 텍스트를 보여줍니다
헤드라인에 세리프 폰트를 사용하지 않습니다 — 스크린샷은 대신 깔끔한 sans-serif를 보여줍니다
피하기: 과도한 전문 용어
피하기: 지나치게 캐주얼한 어조
피하기: 모호한 문구
11
System Prompt
이것은 개발자와 기업을 대상으로 하는 깔끔하고 프리미엄한 AI 플랫폼입니다. 고대비 모노크롬 팔레트(#000000 대 #FFFFFF), 서브티브한 그레이(#4B5563, #9CA3AF), 그리고 얇은 테두리(#E5E7EB)를 특징으로 합니다. 타이포그래피는 humanist-sans와 grotesque-sans 카테고리에 의존하며, 56px 디스플레이에서 14px 캡션까지 명확한 계층 구조를 가집니다. 레이아웃은 여유로운 12컬럼 그리드와 표준 8pt 간격을 사용합니다. 중요한 주의사항은 다음과 같습니다: 드롭 섀도우 없음, 복잡한 그라디언트 없음, 장식용 아이콘 없음, 본문 텍스트 올캡스 없음, 밝은 배경 없음, 세리프 헤드라인 없음. 어조는 전문적이고 기술적이며, 직설적인 CTA를 사용합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
