큐레이션 · 오픈 · 무료

Clerk

개발자가 안전하고 확장 가능한 애플리케이션을 구축할 수 있는 완전한 사용자 관리 플랫폼

01

디자인 DNA

안전한 건물의 견고한 기반

02

컬러

깨끗한 여백에 날카로운 검은색 텍스트와 단일한 강렬한 보라색 강조색

03

타이포그래피

grotesque-sans · humanist-sans · monospace

• display56px · 700
• body16px · 400

제목은 임팩트를 위해 타이트한 트래킹과 무거운 굵기를 사용합니다 · 본문 텍스트는 넉넉한 줄 간격으로 편안한 읽기 리듬을 유지합니다 · 모노스페이스 요소는 기능적 강조를 위해 절제하여 사용합니다

04

여백

일관된 4px 기반에 히어로 섹션의 넉넉한 여백

05

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

1px solid rgba(217, 217, 222, 1)

rgba(0, 0, 0, 0.08) 0px 5px 15px 0px · rgba(25, 28, 33, 0.2) 0px 15px 35px -5px · rgba(0, 0, 0, 0.1) 0px 1px 3px 0px

06

레이아웃

넉넉한 여백을 갖춘 중앙 정렬 히어로, 그 다음 다중 컬럼 기능 그리드

07

모션과 인터랙션

hover 시 부드러운 색상 전환 · 인터랙티브 상태를 위한 미묘한 불투명도 변화 · 확장 효과를 위한 점진적인 변형 애니메이션

미묘한 색상 어두워짐과 배경 변화 · 지연 없이 즉각적인 시각적 피드백

08

컴포넌트

• button 명확한 계층을 갖춘 둥근 필 버튼 (기본은 채우기, 보조는 테두리)
• card 미묘한 테두리와 넉넉한 패딩을 갖춘 밝은 회색 카드
• chip 카테고리 및 역할을 위한 작은 둥근 라벨
• input 미묘한 테두리와 둥근 모서리를 갖춘 깨끗한 입력 필드
• hero 대형 타이포그래피와 미묘한 배경 패턴을 갖춘 전체 너비 중앙 정렬 레이아웃

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며, 개발자 중심적
• 헤드라인 강력한 동사를 사용한 직접적이고 혜택 중심적
• CTA 명확한 가치 제안을 갖춘 행동 지향적

• 장식적 폰트를 사용하지 마세요 — 스크린샷은 깨끗하고 기능적인 grotesque-sans 타이포그래피를 보여줍니다
• 불필요한 그림자를 추가하지 마세요 — 스크린샷은 주요 요소에만 목적 있는 최소한의 깊이를 보여줍니다
• 여러 강조색을 사용하지 마세요 — 스크린샷은 전체적으로 단일한 보라색 강조(#6248F6)를 보여줍니다
• 비좁은 레이아웃을 만들지 마세요 — 스크린샷은 넉넉한 여백과 숨 쉴 공간을 보여줍니다
• 복잡한 그라데이션을 사용하지 마세요 — 스크린샷은 미묘한 선형 그라데이션과 방사형 배경을 보여줍니다
• 불필요한 테두리를 추가하지 마세요 — 스크린샷은 기능적 구분이 필요할 때만 테두리를 보여줍니다
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 과도한 느낌표
• 피하기: 실질 없는 마케팅 용어
• 피하기: 기술적 세부사항 없이 모호한 약속

10

팩 안의 실제 스크린샷

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

11

System Prompt

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