Stripe Gradient
순백 캔버스와 딥 네이비 텍스트 위에 인디고(#533afd) 브랜드와 시그니처 대각선 그라디언트 메시 히어로를 얹은, 개발자 신뢰감의 클린 코퍼레이트 SaaS 스타일.
설명
스트라이프(stripe.com) 홈페이지에서 추출한 라이트 네이티브 코퍼레이트 SaaS 미학. 기반은 극도로 절제되어 있다 — 순백 배경(oklch 1 0 0), 딥 네이비 본문(#061b31), 연한 블루그레이 서피스(#e5edf5), 작은 라운드(4–8px), 부드럽고 큰 블러의 섀도우. 그 위에 단 하나의 브랜드 인디고(oklch 0.521 0.268 277.4, #533afd)가 CTA·링크·강조를 독점하고, 페이지 상단에는 오렌지→핑크→퍼플→블루로 흐르는 유명한 대각선 그라디언트 메시가 유일한 화려함으로 존재한다. 타이포는 밀도 높고 정밀하다: Söhne(변수 폰트)로 48px/300weight/-0.02em의 가벼운 대형 헤드라인, 14–16px의 촘촘한 UI 텍스트. 중간중간 딥 네이비(#0d1738) 풀블리드 섹션이 리듬을 만든다. 다크 모드는 사이트에 실재하지 않으므로 이 네이비를 캔버스로 승격시킨 카운터파트를 합성했다.
타입 스케일
측정 폰트는 Söhne 변수 폰트(sohne-var) — 상업 폰트라 Google Fonts 대체는 Inter. 시그니처는 대형 헤드라인의 '가벼움': H1 48px가 웨이트 300에 -0.96px(≈-0.02em) 자간으로 얇고 정밀하게 앉는다(측정치). 웨이트는 300(디스플레이·헤딩)/400(본문·버튼)/500(라벨·강조) 세 단만. UI 텍스트는 14–16px로 촘촘하고, 버튼도 14px/400으로 담백하다.
골든 예제 (exemplar)
Modular solutions
Flexible solutions for every business model.
Accept and optimize payments, globally
Increase authorization rates and offer local payment methods online or in person.
Learn more →Enable any billing model
Support recurring, usage-based, and hybrid pricing from day one.
Learn more →The backbone of global commerce
Do
- 그라디언트는 히어로 한 곳에 집중시키고 나머지 페이지는 순백+네이비로 완전히 플랫하게 유지한다
- 대형 헤드라인은 얇게(웨이트 300) + 음수 자간(-0.02em)으로 정밀하게 — 굵은 헤드라인은 이 스타일이 아니다
- 브랜드 인디고 #533afd를 CTA·링크·아이콘 라벨에 일관되게 쓰고, CTA에는 '→' 화살표를 붙인다
- 밝은 섹션 사이에 딥 네이비 풀블리드 섹션을 끼워 페이지 리듬을 만든다
- 섀도우는 블루 틴트의 크고 연한 것 하나만, 제품 스크린샷·플로팅 카드에 한정한다
Don't
- 그라디언트를 페이지 전체·카드·버튼까지 도배하지 말 것 — 시그니처는 절제 위에서만 산다
- 굵은(700+) 헤드라인·큰 border-radius(16px+ 카드 제외)·둥근 버블 UI 금지
- 네온·다크 배경을 정본으로 삼지 말 것 — 이 스타일은 라이트 네이티브다
- 회색 무채색 팔레트로 탁하게 만들지 말 것 — 중립색도 블루 언더톤(#e5edf5, #50617a)을 유지한다
- 장난스러운 일러스트·바운스 모션 금지 — 신뢰가 핵심 정서다
컴포넌트 노트
- button
- base: primary는 var(--primary) 인디고 필 + 흰 텍스트, radius 4px(pill 아님에 주의 — 측정 radius 4px), padding 12–16px 20px, 14px/400. 텍스트 뒤에 '→' 화살표 글리프가 관례.hover: 배경을 한 단 어둡게(색상-혼합 15% 정도) + 화살표 translateX(3px), 150ms.focus: box-shadow 0 0 0 2px var(--background), 0 0 0 4px var(--ring) 형태의 인디고 링.secondary_variant: 투명/흰 배경 + var(--primary) 인디고 텍스트, 1px 보더 또는 보더리스. 네이비 섹션 위에서는 흰 필 + 네이비 텍스트로 반전.ghost_variant: 내비 링크형 — var(--foreground) 텍스트 14px/400, hover 시 var(--muted-foreground)로 옅어지거나 인디고로.
- card
- 배경 var(--card) 흰색, 1px var(--border) 헤어라인 또는 var(--secondary) 틴트 배경, radius 8px, padding 24–32px. 제품 스크린샷 카드에만 큰 소프트 섀도우(0 16px 32px / 12%).
- input
- 배경 흰색, 1px var(--input)(인디고 틴트 #d6d9fc) 보더, radius 6px, padding 10px 12px, 14–15px 텍스트. 포커스 시 보더 var(--ring) + 연한 인디고 링.
- nav
- 밝은 배경 위 슬림한 상단 바 — 좌측 워드마크, 중앙 14px 드롭다운 링크, 우측 'Sign in'(고스트) + 'Contact sales'(인디고 필 pill 형태 radius 높음 허용). 히어로 그라디언트 위에서는 흰 텍스트로 반전.
- badge
- 라벤더 var(--accent) 배경 + var(--accent-foreground) 인디고 텍스트의 소형 pill. 상태 신호는 chart 팔레트(그린 #00d66f = 성공)로.
- link
- 본문 인라인 링크와 CTA 링크는 var(--primary) 인디고 + 뒤따르는 화살표 '→'. 밑줄은 hover에만.