모든 디스플레이 및 본문 텍스트에 'alliance'를 사용하여 일관되고 우아한 타이포그래피 톤을 유지합니다. · 48px, 24px, 16px, 14px를 주요 단계로 하는 엄격한 타이포그래피 스케일을 유지합니다. · 최적의 가독성을 위해 행간을 1.5(16px 텍스트의 경우 24px)로 일관되게 설정합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
4px 그리드를 기반으로 한 일관된 간격으로, 콘텐츠를 프레이밍하고 차분하고 정밀한 느낌을 주기 위해 풍부한 여백을 둡니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
미묘한 분리를 위해 #E5E7EB 또는 #CC00CE를 사용한 얇은 1px 실선 테두리.
0 1px 3px rgba(0, 0, 0, 0.1)
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
풍부한 패딩과 명확한 시각적 계층을 갖춘 깨끗한 중앙 정렬 그리드 시스템.
07
모션과 인터랙션
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 상태에서의 부드러운 색상 및 배경색 전환. · 페이지 섹션 및 모달의 미묘한 페이드인 효과.
텍스트 링크의 색상 변경 및 버튼의 배경색 전환. · 즉각적인 피드백을 제공하는 표준 버튼 및 링크 클릭 동작.
08
컴포넌트
button주요 작업용 검정색 실버튼, 보조용 테두리가 있는 흰색 버튼, 화살표가 있는 간단한 텍스트 링크.
card미묘한 그림자와 풍부한 내부 패딩을 갖춘 깨끗하고 테두리가 있는 카드.
chip최소한의 스타일링을 적용한 간단한 테두리 뱃지 또는 레이블.
input명확한 레이블과 플레이스홀더를 갖춘 깨끗하고 테두리가 있는 입력 필드.
hero명확한 CTA와 보조 비주얼을 갖춘 크고 중앙 정렬된 타이포그래피 히어로.
09
보이스와 금지 목록
톤전문적이고 자신감 있으며 안심시키는 톤.
헤드라인가치를 명확히 전달하는 직접적이고 혜택 지향적인 진술.
CTA'데모 받기' 또는 '시작하기'와 같이 행동 지향적이고 명확한 표현.
밝고 채도 높은 강조색을 사용하지 마세요 — 스크린샷은 그레이와 검정의 단색 팔레트를 보여줍니다.
장식적이고 둥근 글꼴을 사용하지 마세요 — 스크린샷은 깨끗하고 과도기적 세리프 타이포그래피를 보여줍니다.
복잡하고 바쁜 레이아웃을 사용하지 마세요 — 스크린샷은 깨끗하고 중앙 정렬된 단일 열 구조를 보여줍니다.
무거운 드롭 섀도우나 3D 효과를 사용하지 마세요 — 스크린샷은 미묘한 테두리를 갖춘 최소한의 평면 디자인을 보여줍니다.
다색 버튼이나 요소를 사용하지 마세요 — 스크린샷은 주로 검정, 흰색, 회색 UI 컴포넌트를 보여줍니다.
큰 블록의 색상이나 그라디언트를 사용하지 마세요 — 스크린샷은 주로 흰색과 밝은 회색 배경을 보여줍니다.
Infisical은 시크릿, 인증서, AI 에이전트를 관리하는 개발자 중심 보안 플랫폼입니다. 디자인은 깨끗하고 전문적이며 highly structured하며, 근검색(#1E1F22), 쿨 그레이(#F3F4F6, #A3A3A3), 화이트(#FFFFFF)로 구성된 단색 팔레트를 사용하며 주요 강조색이 없습니다. 타이포그래피는 과도기적 세리프 글꼴('alliance')을 디스플레이 및 본문 텍스트 모두에 사용하여 세련되고 에디토리얼한 느낌을 줍니다. 레이아웃은 여유롭고 중앙 정렬되어 명확성과 신뢰를 강조합니다. 주요 주의사항: 밝고 채도 높은 색상이나 그라디언트 사용을 피하고, 단색 고대비 팔레트를 유지합니다. 둥근 장난스러운 글꼴 사용을 피하고, 깨끗한 과도기적 세리프 타이포그래피를 고수합니다. 복잡한 레이아웃을 만들지 말고, 명확한 타이포그래피 계층과 풍부한 여백에 초점을 맞춘 최소한의 디자인을 유지합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
