깊은 네이비 블랙과 단일한 고채도 보라색 강조색으로 기반을 둔 절제되고 전문적인 팔레트입니다.
03
타이포그래피
transitional-serif · geometric-sans · monospace
display72px · 400
headline40px · 400
body16px · 400
label14px · 500
모든 디스플레이 및 헤드라인 텍스트에 Reckless를 사용하여 따뜻함과 편집 권위를 더합니다. · 모든 본문, UI 및 레이블 텍스트에 Inter를 사용하여 명료함과 현대적인 기술감을 유지합니다. · 인터페이스를 깔끔하게 유지하기 위해 텍스트 두께 변형을 400과 500으로 제한합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
96px
풍부한 수직 및 수평 패딩은 명료함을 강조하고 시각적 혼란을 줄입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 16px
pill · 999px
구조를 정의하기 위해 rgba(24, 24, 34, 0.1)의 섬세한 1px 테두리를 절제하여 사용합니다.
0px 0px 2px 2px rgba(204, 204, 204, 1)
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
넓은 거터를 가진 구조화된 12열 그리드는 깔끔하고 모듈적인 레이아웃을 지원합니다.
07
모션과 인터랙션
200msmicro
350mssmall
645msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
텍스트 및 UI 요소에 부드러운 0.2초 색상 전환. · 구조적 애니메이션을 위한 약간 더 긴 0.3초~0.35초 cubic-bezier 전환.
텍스트 색상이 부드럽게 전환되며, 버튼은 섬세한 배경 변화나 스케일링을 가질 수 있습니다. · 표준 활성 상태를 통한 즉각적인 시각적 피드백.
08
컴포넌트
button주요 버튼은 활기찬 보라색 배경을 가진 알약 모양이며, 보조 버튼은 윤곽선이나 고스트 스타일에 알약 모양 또는 약간 둥근 모서리를 가집니다.
card부드러운 회색 배경, 그림자 없음, 그리고 섬세한 패딩을 가진 미니멀리스트 카드입니다.
chip두드러지게 사용되지 않으며, 대신 깔끔한 타이포그래피와 아이콘에 의존합니다.
input밝은 회색 테두리와 풍부한 내부 패딩을 가진 둥근, 알약 모양 입력 필드입니다.
hero왼쪽에 큰 세리프 헤드라인, 오른쪽에 상세한 제품 UI 목업을 배치한 분할 레이아웃입니다.
09
보이스와 금지 목록
톤전문적이고 안심시키며 권위적이면서도 접근 가능한 톤입니다.
헤드라인전환 세리프 타입페이스를 사용한 직접적이고 선언적인 문구로 임팩트를 줍니다.
CTA행동 지향적이고 간결하며, 종종 알약 모양 버튼으로 감쌉니다.
배경에 거칠고 채도 높은 색상을 사용하지 마세요 — 스크린샷은 부드러운 라벤더와 회색을 보여줍니다.
네모난, 각진 버튼을 사용하지 마세요 — 스크린샷은 완전히 둥근, 알약 모양 버튼을 보여줍니다.
깊이감을 위해 무거운 그림자에 의존하지 마세요 — 스크린샷은 플랫하거나 매우 섬세한 엘리베이션을 보여줍니다.
다양한 폰트 두께를 사용하지 마세요 — 스크린샷은 주로 400과 500 두께를 보여줍니다.
과도한 요소로 레이아웃을 어지럽히지 마세요 — 스크린샷은 풍부한 여백을 보여줍니다.
큰 헤드라인에 산세리프 폰트를 사용하지 마세요 — 스크린샷은 뚜렷한 전환 세리프를 보여줍니다.
컴플라이언스 및 보안 SaaS 플랫폼인 Vanta를 위한 디자인 시스템입니다. 시각적 언어는 프리미엄 편집의 따뜻함과 현대 기술의 정밀함을 균형 있게 맞추어, 복잡한 엔터프라이즈 니즈를 위한 신뢰할 수 있는 파트너로 브랜드를 포지셔닝합니다. 핵심 색상은 선명한 화이트(#FFFFFF)와 부드러운 회색(#F7F8FA) 배경, 텍스트용 깊은 잉크 블랙(#181822), 그리고 주요 강조 및 CTA용 활기찬 보라색(#5E05C4)을 포함합니다. 타이포그래피는 굵은 디스플레이 헤드라인용 전환 세리프(Reckless)와 매우 읽기 쉬운 본문 및 UI 텍스트용 기하학적 산세리프(Inter)를 특징으로 합니다. 핵심 주의사항: 결코 거칠거나 지나치게 채도 높은 배경 색상을 사용하지 마세요; 각진 모서리의 네모난 버튼과 같은 UI 요소를 피하세요; 풍부한 여백을 유지하고 시각적 혼란을 피하세요; 무거운 그림자나 지나치게 복잡한 그래디언트를 사용하지 마세요.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
