깨끗한 흰색/밝은 회색 표면 위의 고대비 텍스트와 기본 작업을 위한 단일하고 독특한 블루-퍼플 악센트.
03
타이포그래피
geometric-sans · humanist-sans · monospace
display72px · 500
h240px · 500
body20px · 400
small16px · 400
caption14px · 400
overline12px · 500
제목은 타이트한 네거티브 자간(-1px에서 -2px)을 사용합니다 · 본문 텍스트는 가독성을 위해 표준 자간(0)을 사용합니다 · 모노 폰트는 코드 스니펫 및 기술 값에만 엄격히 사용됩니다 · 글꼴 두께는 깔끔한 계층 구조를 위해 400과 500으로 제한됩니다 · 대문자 변환은 오버라인에만 독점적으로 사용됩니다
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
수직 간격은 엄격한 4px 그리드를 따르며, 섹션 패딩은 리듬감 있고 숨쉬는 레이아웃을 만들기 위해 일관되게 64px입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
인셋 효과를 위한 rgba(41, 56, 78, 0.08) 또는 솔리드 화이트를 사용한 미묘한 1px 테두리.
미묘한 인셋 테두리를 위한 0px 1px 0px 0px inset · 올려진 카드를 위한 0px 2px 5px 0px rgba(0, 0, 0, 0.17) · 모달/팝오버를 위한 0px 5px 10px -4px rgba(0, 0, 0, 0.17)
06
레이아웃
1280container
12columns
24pxgutter
768 / 1024breakpoints
중앙 정렬된 콘텐츠 컨테이너와 섹션 간 넉넉한 여백을 갖춘 표준 12열 그리드.
07
모션과 인터랙션
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 상태에서 배경색 변경 트리거 · 인터랙티브 요소에서의 transform(0.4s) · scroll 시 미묘한 페이드 인
버튼의 배경색 변화, 텍스트 링크의 미묘한 색상 전환. · 즉각적인 시각적 피드백, 일반적으로 약간의 transform scale 또는 그림자 변화.
08
컴포넌트
button솔리드 악센트 색상과 화이트 텍스트를 갖춘 알약 모양(border-radius: 100px)의 기본 버튼, 보조 버튼은 어두운 텍스트의 투명 버튼입니다.
card기능 목록과 통합 타일에 사용되는 부드러운 둥근 카드(border-radius: 12px)로, 미묘한 인셋 그림자와 밝은 테두리가 있습니다.
chip'활성화됨' 또는 '준비됨'과 같은 상태 표시기를 위한 작은 알약 뱃지(border-radius: 4px).
input미묘한 인셋 그림자와 1px 테두리를 갖춘 표준 양식 필드.
hero오른쪽의 스타일리시한 UI 모의 화면과 짝을 이룬 그라데이션 텍스트 효과('Enterprise Ready')의 크고 굵은 제목.
이것은 WorkOS를 위한 SaaS 및 개발자 도구 웹사이트입니다. 디자인은 깔끔하고 전문적이며 매우 구조화되어 있으며, 명확성과 엔터프라이즈 준비성에 중점을 둡니다. 주요 색상은 흰색(#FFFFFF)과 부드러운 회색(#F9F9FB) 배경, 잉크 같은 어두운 텍스트(#29363D), 그리고 단일 지배적인 블루-퍼플 악센트(#6363F1)입니다. 타이포그래피는 타이트한 네거티브 자간을 가진 굵은 디스플레이 제목의 기하학적 고딕체와 읽기 쉬운 본문 텍스트의 휴머니스트 고딕체를 특징으로 합니다. 중요한 지침: 다크 모드 피하기, 여러 경쟁 악센트 색상 피하기, 장식적 글꼴 사용 피하기. 레이아웃은 넉넉한 여백과 카드의 미묘한 인셋 그림자를 사용하여 무게감 없이 깊이감을 만드는 12열 그리드를 사용합니다.
이 감각을 당신의 에이전트에
이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.
