기술적 깊이와 기업급 신뢰성을 균형 있게 유지하는, 보안 인증 레이어 구축을 위한 강력한 개발자 중심 툴킷.
02
컬러
#1D1D1DInk
#525151Ink soft
#FBFAF9BG
#F2F0EEBG soft
#CECECEMuted
rgba(29,29,29,0.15)Line
따뜻한 화이트 베이스의 고대비 모노크롬 팔레트로, 가독성과 전문적인 절제를 우선시합니다.
03
타이포그래피
humanist-sans · monospace
display64px · 700
headline48px · 700
body16px · 400
code14px · 400
히어로 디스플레이 및 주요 제목에는 Booton/BootonUncommon을 사용합니다. · 모든 본문 텍스트, 내비게이션, 버튼 및 기술 요소에는 Chivo Mono를 사용합니다. · 대형 디스플레이 타입에는 타이트한 letter-spacing(-1px ~ -2px)을 유지합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
히어로 섹션(48px)에 풍부한 padding을 갖춘 일관된 4px 기반 공간 리듬.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
잉크 및 저채도 톤을 사용한 1px solid 테두리로, 주로 방향성(하단/오른쪽)으로 적용됩니다.
rgba(0, 0, 0, 0.5) 0px 8px 10px 0px
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
히어로 섹션을 위한 깔끔한 단일 열 흐름의 중앙 정렬 콘텐츠 컨테이너.
07
모션과 인터랙션
150msmicro
300mssmall
800msmedium
cubic-bezier(0.87, 0, 0.13, 1)easing
대화형 요소에 대한 미묘한 transform 전환. · hover 상태 및 focus 변화를 위한 부드러운 ease 곡선.
미묘한 불투명도 또는 배경색 변화. · 상태 변화에 의존하는 최소한의 시각적 피드백.
08
컴포넌트
button잉크 또는 화이트의 단색 채우기를 사용하고, 미묘한 4px radius 및 모노스페이스 텍스트를 가진 모노크롬 버튼.
card미묘한 배경 변화(bgSoft)와 방향성 코너 강조를 갖춘 깔끔하고 테두리가 있는 컨테이너.
chip미묘한 테두리가 있는 소형 모노스페이스 텍스트 레이블.
input가벼운 테두리가 있는 표준 텍스트 입력.
hero따뜻한 화이트 배경에 고대비 잉크 색상을 사용한 대규모 중앙 정렬 타이포그래피.
09
보이스와 금지 목록
톤전문적이고 직접적이며 기술적으로 정확합니다.
헤드라인네거티브 letter-spacing을 사용한 굵고 대규모 타이포그래피.
CTA고대비 버튼 위의 모노스페이스 텍스트를 사용한 행동 지향적 스타일.
선명한 gradient를 사용하지 마십시오 — 스크린샷은 모노크롬 평면 색상 팔레트를 보여줍니다.
장난스럽거나 둥근 세리프 글꼴을 사용하지 마십시오 — 스크린샷은 기하학적/모노스페이스 중심 시스템을 사용합니다.
크고 화려한 아이콘을 사용하지 마십시오 — 스크린샷은 타이포그래피와 미묘한 테두리에 의존합니다.
다크 모드를 기본값으로 사용하지 마십시오 — 스크린샷은 밝고 따뜻한 화이트 배경을 보여줍니다.
장식 일러스트레이션을 사용하지 마십시오 — 스크린샷은 코드 스니펫과 깔끔한 UI에 초점을 맞춥니다.
지나치게 많은 그림자를 사용하지 마십시오 — 스크린샷은 매우 미니멀하고 평면적인 레이어링을 보여줍니다.
Stytch는 고대비 모노크롬 팔레트를 사용하는 전문적이고 개발자 중심의 인증 플랫폼입니다. 주요 색상은 따뜻한 화이트(#FBFAF9)와 거의 검정색 잉크(#1D1D1D)이며, 보조 텍스트에는 저채도 회색(#525151, #CECECE)이 사용됩니다. 타이포그래피는 디스플레이용 humanist-sans(Booton)와 본문 및 기술 UI용 깔끔한 모노스페이스(Chivo Mono)가 지배적입니다. 선명한 색상 강조, 복잡한 gradient, 또는 장난스럽고 하찮은 요소는 피합니다. 핵심 설계 제약 조건: 모든 기능성 텍스트에 모노스페이스 타이포그래피를 우선시하고, 4px 기반 spacing과 히어로 섹션의 풍부한 padding을 사용하며, 엄격히 평면적이고 고대비의 시각 언어를 유지합니다. 모든 UI 구성 요소가 깔끔하고 테두리가 있으며 가독성을 유지하도록 합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
