Clerk Soft Futurism
밝은 오프화이트 캔버스 위에 정제된 보라 브랜드 액센트와 부드러운 그라디언트·글로우를 얹은 개발자 인증 SaaS 스타일 — 새까만 헤딩과 은은한 미래감이 공존한다.
설명
인증·아이덴티티 SaaS Clerk의 마케팅 사이트에서 추출한 소프트 퓨처리즘 미학. 배경은 오크LCH 0.976의 거의 흰색(#f7f7f8)이고 헤딩은 near-black으로 대비가 크다. 위계는 색이 아니라 크고 촘촘한 음수 자간의 Suisse류 디스플레이 타입과 밝기 단차로 만든다. 브랜드는 단일 보라(oklch 0.557 0.254 283.7, #6c47ff) 하나뿐이고, 주요 CTA·초점·강조에만 절제해서 쓴다. 시그니처는 라이트 섹션과 near-black(#131316) 섹션을 번갈아 쌓는 리듬, 히어로 뒤의 미세한 회로도 패턴, 제품 카드에 깔린 파스텔 그라디언트와 낮은 불투명도의 시안/보라 글로우다. 라운드는 중간(카드 16px, 필드 8px), 구획은 두꺼운 섀도우가 아니라 얇은 보더와 부드러운 저불투명 섀도우로 나눈다. 원본에 네이티브 다크가 없어, 같은 보라 브랜드를 유지한 near-black 다크 세트를 측정된 다크 섹션 값에 근거해 저술했다.
타입 스케일
Suisse Int'l 계열 단일 산세리프(디스플레이까지 동일), 상용 폰트라 Inter로 대체. 시그니처는 큰 헤딩의 촘촘한 음수 자간 — 측정된 H1 64px/700/-1.6px는 약 -0.025em로 디스플레이·H1에 적용한다. 웨이트는 측정값 400 본문 / 500 라벨·소제목 / 600 헤딩 / 700 디스플레이. 모노(Soehne Mono → JetBrains Mono)는 코드·API 스니펫·수치 배지에만.
골든 예제 (exemplar)
Do
- 라이트를 기본(정본)으로 설계하고 near-black 섹션을 번갈아 쌓아 리듬을 만든다
- 위계는 색이 아니라 크고 촘촘한 음수 자간(-0.025em)의 헤딩과 밝기 단차로 만든다
- 브랜드 보라는 주요 CTA·초점·카테고리 라벨·강조에만 절제해서 쓴다
- 제품 카드와 히어로에만 부드러운 파스텔 그라디언트·낮은 불투명도 글로우를 얹는다
- 구획은 얇은 1px 보더와 부드러운 저불투명 섀도우로 나눈다
Don't
- 보라 남용 금지 — 화면이 보라로 뒤덮이면 강조 신호가 죽는다
- 채도 높은 그라디언트 범벅·과한 글래스모피즘 금지(글로우는 아주 낮은 불투명도만)
- 두꺼운 하드 드롭 섀도우로 구획 나누기 금지 — 부드럽게, 보더 우선
- 바운스·스프링 오버슈트·과한 패럴랙스 모션 금지
- 어두운 배경을 정본으로 삼지 말 것 — 이 스타일의 본질은 밝은 라이트 퍼스트다
컴포넌트 노트
- button
- base: primary는 배경 var(--primary) 보라 + 화이트 텍스트, radius var(--radius-field)(8px), 폰트 14~15px/500, padding 10~12px 좌우 18~20px. 히어로 CTA도 동일한 보라 solid.hover: 배경 한 단 밝게/어둡게, 150~250ms ease-standard. 미세한 translateY(-1px) 허용.focus: 2px var(--ring) 보라 링(box-shadow 0 0 0 2px ring), 오프셋 2px.disabled: opacity 0.4, cursor not-allowed.secondary_variant: 배경 var(--card)/투명, 1px var(--border) 보더, 텍스트 var(--foreground)(near-black). 'Build with agents'류 보조 버튼.ghost_variant: 내비 링크형: 배경 투명, 텍스트 var(--muted-foreground), hover 시 var(--foreground).
- card
- 배경 var(--card)(화이트, background보다 밝게), 1px var(--border) 보더, radius var(--radius)(16px), padding 24~32px. 부드러운 저불투명 섀도우 선택적. 제품/데모 카드는 파스텔 그라디언트 배경 허용.
- input
- 배경 var(--card)/화이트, 1px var(--border) 보더, radius var(--radius-field)(8px), padding 10~12px 14px, 텍스트 14~15px. placeholder는 var(--muted-foreground). 포커스 시 border→var(--ring) 보라 + 2px 링.
- nav
- 상단 sticky, backdrop-blur 반투명 화이트 배경 + 얇은 보더로 감싼 pill 컨테이너. 좌측 워드마크, 중앙 드롭다운 링크(muted-foreground → hover foreground), 우측 'Sign in' 텍스트 + 'Start building' 보라 solid pill.
- badge
- 작은 상태/카테고리 배지 — radius 9999px 또는 8px, 12~13px 텍스트. 카테고리 라벨은 보라 텍스트. 상태색은 chart-*(시안/레드/그린)을 배경 10% 틴트 + 해당 색 텍스트로.