큐레이션 · 오픈 · 무료

Auth0

Auth0는 엔터프라이즈급 보안과 뛰어난 사용자 경험을 결합한, 개발자를 위한 종합 아이덴티티 플랫폼입니다.

01

디자인 DNA

디지털 경험의 안전하고 보이지 않는 기반.

02

컬러

깊은 중립색과 높은 대비의 흰색, 그리고 독특한 틸 악센트의 균형을 맞춘 다크 테마 중심의 전문 팔레트입니다.

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display56px · 500
• heading32px · 500
• body16px · 400

섹션 레이블과 배지에는 대문자를 사용합니다 · 큰 디스플레이 텍스트에는 타이트한 행간을 유지합니다 · 모노 폰트는 코드 블록과 기술적 참조에만 엄격히 사용합니다

04

여백

예측 가능한 수직 및 수평 리듬을 위한 일관된 배수를 사용하는 4px 기본 단위입니다.

05

표면 (라운드 / 그림자 / 경계선)

유리 효과(glassmorphism)를 위한, rgba(255, 254, 255, 0.12)를 사용한 미세한 1px 실선 테두리입니다.

0px -4px 40px 0px rgba(0, 0, 0, 0.16) · 0px 16px 24px 0px rgba(0, 0, 0, 0.25) · inset 0px 1px 0px 0px rgba(255, 255, 255, 0.24)

06

레이아웃

가독성을 위한 넓은 콘텐츠 영역과 제한된 텍스트 폭을 갖춘 중앙 정렬 히어로 섹션입니다.

07

모션과 인터랙션

호버 상태에서의 부드러운 컬러 전환 · 인터랙티브 요소의 미세한 크기 및 불투명도 변화 · 콘텐츠 섹션의 단계적 페이드인

미세한 배경색 변화와 약간의 높이 변화 · 상태 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 흰색 배경과 어두운 텍스트의 고대비 주요 버튼; 투명 배경과 미세한 테두리의 보조 버튼.
• card 미세한 내부 글로우와 둥근 모서리를 갖춘 다크 유리 효과(glassmorphism) 카드.
• chip 얇은 테두리와 반투명 배경을 가진 소형 대문자 배지.
• input 미세한 테두리와 둥근 모서리를 갖춘 깔끔한 다크 입력 필드.
• hero 그라데이션 배경, 중앙 정렬 타이포그래피, 그리고 두드러진 행동 유도(CTA) 버튼을 갖춘 대형 드라마틱 히어로.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있는, 개발자 중심의 어조
• 헤드라인 빠른 속도와 손쉬운 통합을 강조하는 간결하고 행동 지향적인 문구
• CTA 즉각적인 가치에 초점을 맞춘 직접적이고 초대하는 ('무료로 구축 시작하기') 스타일

• 밝고 채도 높은 색상을 사용하지 마세요 — 스크린샷은 미세한 그라데이션과 틸 악센트가 있는 다크 배경을 보여줍니다
• 장식용 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔하고 기능적인 고딕(sans-serif) 타이포그래피를 보여줍니다
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 미세한 글로우와 유리 효과(glassmorphism)를 보여줍니다
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 중앙 정렬된 히어로 텍스트와 좌측 정렬된 본문의 혼합을 보여줍니다
• 작고 비좁은 버튼을 사용하지 마세요 — 스크린샷은 넉넉한 여백이 있는 인터랙티브 요소를 보여줍니다
• 복잡한 장식용 테두리를 사용하지 마세요 — 스크린샷은 낮은 불투명도의 단순한 1px 실선 테두리를 보여줍니다
• 피하기: 맥락 없는 지나치게 기술적인 전문 용어
• 피하기: 수동적이거나 불확실한 언어
• 피하기: 과도한 느낌표나 과장된 표현
• 피하기: 명확한 시각적 계층 구조 없는 밀도 높은 문단

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko