Stripe에서 영감을 받은 디자인 시스템

Category: 핀테크 & 암호화폐 결제 인프라. 시그니처 퍼플 그래디언트, 웨이트 300의 우아함.

1. 비주얼 테마 & 분위기

Stripe의 웹사이트는 핀테크 디자인의 황금 기준입니다 — 기술적이면서도 럭셔리하고, 정밀하면서도 따뜻한 느낌을 동시에 자아내는 시스템입니다. 페이지는 깨끗한 흰 캔버스(#ffffff)와 짙은 네이비 헤딩(#061b31), 그리고 브랜드 앵커이자 인터랙티브 액센트 역할을 하는 시그니처 퍼플(#533afd)로 시작됩니다. 이것은 기업용 소프트웨어의 차갑고 딱딱한 퍼플이 아닙니다. 자신감 있고 프리미엄하게 읽히는 풍부하고 채도 높은 바이올렛입니다. 전체적인 인상은 세계적인 타입 파운드리가 재설계한 금융 기관 같은 느낌입니다.

커스텀 sohne-var 가변 폰트는 Stripe 비주얼 아이덴티티의 핵심 요소입니다. 모든 텍스트 요소에는 OpenType "ss01" 스타일리스틱 세트가 적용되어 있으며, 이는 문자 형태를 수정하여 뚜렷하게 기하학적이고 현대적인 느낌을 만들어냅니다. 디스플레이 크기(48px-56px)에서 sohne-var는 웨이트 300으로 실행됩니다 — 헤드라인에서는 매우 이례적인 가벼운 웨이트로, 묘하게 속삭이는 듯한 권위감을 자아냅니다. 이는 “굵은 히어로 헤드라인” 관례와는 정반대입니다. Stripe의 헤드라인은 소리를 지를 필요가 없는 것처럼 느껴집니다. 네거티브 자간(-1.4px at 56px, -0.96px at 48px)은 텍스트를 조밀하고 설계된 블록으로 압축합니다. 더 작은 크기에서도 시스템은 비례적으로 줄인 트래킹과 함께 웨이트 300을 사용하며, 금융 데이터 표시를 위해 "tnum"을 통한 테이블형 숫자를 사용합니다.

Stripe를 진정으로 차별화하는 것은 섀도우 시스템입니다. 대부분의 사이트의 플랫하거나 단층적인 접근 방식과 달리, Stripe는 다층적이고 블루 틴트의 섀도우를 사용합니다. 시그니처 rgba(50,50,93,0.25)와 rgba(0,0,0,0.1)의 조합은 마치 요소들이 황혼의 하늘에 떠있는 것처럼 시원하고 대기적인 깊이감을 가진 섀도우를 만들어냅니다. 주요 섀도우 색상(50,50,93)의 블루-그레이 언더톤은 네이비-퍼플 브랜드 팔레트와 직접적으로 연결되어, 엘리베이션조차 브랜드에 어울리는 느낌을 줍니다.

주요 특성:

• 모든 텍스트에 OpenType "ss01"을 적용한 sohne-var — 브랜드의 자형을 정의하는 커스텀 스타일리스틱 세트
• 시그니처 헤드라인 웨이트로서의 웨이트 300 — 가볍고, 자신감 있으며, 관례에 반하는
• 디스플레이 크기에서의 네거티브 자간(-1.4px at 56px, 아래로 갈수록 점진적으로 완화)
• rgba(50,50,93,0.25)를 사용한 블루 틴트 다층 섀도우 — 브랜드 색감이 느껴지는 엘리베이션
• 검정 대신 짙은 네이비(#061b31) 헤딩 — 따뜻하고, 프리미엄하며, 금융급 품질
• 보수적인 테두리 반지름(4px-8px) — 필 형태도, 거칠지도 않은
• 그래디언트 및 장식 요소를 위한 루비(#ea2261)와 마젠타(#f96bee) 액센트
• 코드와 기술 레이블을 위한 모노스페이스 보조 폰트로서의 SourceCodePro

2. 컬러 팔레트 & 역할

기본색

• Stripe 퍼플 (#533afd): 기본 브랜드 색상, CTA 배경, 링크 텍스트, 인터랙티브 하이라이트. 전체 시스템의 앵커 역할을 하는 채도 높은 블루-바이올렛.
• 짙은 네이비 (#061b31): --hds-color-heading-solid. 기본 헤딩 색상. 검정도, 회색도 아닌 — 텍스트에 따뜻함과 깊이를 더하는 매우 어두운 파랑.
• 순수한 흰색 (#ffffff): 페이지 배경, 카드 표면, 어두운 배경의 버튼 텍스트.

브랜드 & 다크

• 브랜드 다크 (#1c1e54): --hds-color-util-brand-900. 다크 섹션, 푸터 배경, 몰입형 브랜드 순간을 위한 딥 인디고.
• 다크 네이비 (#0d253d): --hds-color-core-neutral-975. 가장 어두운 중성색 — 최대 깊이를 위한 블루 언더톤이 있는 거의 검정에 가까운 색상, 거칠지 않은.

액센트 색상

• 루비 (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. 아이콘, 알림, 액센트 요소를 위한 따뜻한 레드-핑크.
• 마젠타 (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. 그래디언트와 장식적 하이라이트를 위한 선명한 핑크-퍼플.
• 마젠타 라이트 (#ffd7ef): --hds-color-util-accent-magenta-100. 마젠타 테마 카드와 배지를 위한 틴트 표면.

인터랙티브

• 기본 퍼플 (#533afd): 기본 링크 색상, 활성 상태, 선택된 요소.
• 퍼플 호버 (#4434d4): 기본 요소의 호버 상태를 위한 더 어두운 퍼플.
• 퍼플 딥 (#2e2b8c): --hds-color-button-ui-iconHover. 아이콘 호버 상태를 위한 어두운 퍼플.
• 퍼플 라이트 (#b9b9f9): --hds-color-action-bg-subduedHover. 은은한 호버 배경을 위한 부드러운 라벤더.
• 퍼플 미드 (#665efd): --hds-color-input-selector-text-range. 범위 선택기 및 입력 하이라이트 색상.

중성색 스케일

• 헤딩 (#061b31): 기본 헤딩, 내비게이션 텍스트, 강조 레이블.
• 레이블 (#273951): --hds-color-input-text-label. 폼 레이블, 보조 헤딩.
• 본문 (#64748d): 보조 텍스트, 설명, 캡션.
• 성공 그린 (#15be53): 상태 배지, 성공 표시기(배경/테두리에 0.2-0.4 알파 사용).
• 성공 텍스트 (#108c3d): 성공 배지 텍스트 색상.
• 레몬 (#9b6829): --hds-color-core-lemon-500. 경고 및 하이라이트 액센트.

표면 & 테두리

• 기본 테두리 (#e5edf5): 카드, 구분선, 컨테이너의 표준 테두리 색상.
• 퍼플 테두리 (#b9b9f9): 버튼과 입력의 활성/선택 상태 테두리.
• 소프트 퍼플 테두리 (#d6d9fc): 보조 요소를 위한 은은한 퍼플 틴트 테두리.
• 마젠타 테두리 (#ffd7ef): 마젠타 테마 요소를 위한 핑크 틴트 테두리.
• 대시 테두리 (#362baa): 드롭 영역 및 플레이스홀더 요소를 위한 점선 테두리.

섀도우 색상

• 섀도우 블루 (rgba(50,50,93,0.25)): 시그니처 — 블루 틴트 기본 섀도우 색상.
• 섀도우 다크 블루 (rgba(3,3,39,0.25)): 엘리베이션된 요소를 위한 더 깊은 블루 섀도우.
• 섀도우 블랙 (rgba(0,0,0,0.1)): 깊이감 강화를 위한 보조 섀도우 레이어.
• 섀도우 앰비언트 (rgba(23,23,23,0.08)): 은은한 엘리베이션을 위한 부드러운 앰비언트 섀도우.
• 섀도우 소프트 (rgba(23,23,23,0.06)): 가벼운 리프트를 위한 최소한의 앰비언트 섀도우.

3. 타이포그래피 규칙

폰트 패밀리

• 기본: sohne-var, 폴백: SF Pro Display
• 모노스페이스: SourceCodePro, 폴백: SFMono-Regular
• OpenType 기능: 모든 sohne-var 텍스트에 전역으로 "ss01" 활성화; 금융 데이터 및 캡션의 테이블형 숫자에는 "tnum".

계층 구조

원칙

• 시그니처로서의 가벼운 웨이트: 디스플레이 크기에서의 웨이트 300은 Stripe의 가장 독특한 타이포그래픽 선택입니다. 다른 곳에서 600-700 웨이트로 주목을 끌 때, Stripe는 가벼움을 럭셔리로 사용합니다 — 텍스트는 권위를 갖기 위해 무게가 필요 없을 만큼 자신감이 있습니다.
• 어디서나 ss01: "ss01" 스타일리스틱 세트는 타협 불가입니다. 특정 글리프(아마도 대체 a, g, l 형태)를 수정하여 모든 sohne-var 텍스트에 더 기하학적이고 현대적인 느낌을 만들어냅니다.
• 두 가지 OpenType 모드: 디스플레이/본문 텍스트에는 "ss01", 금융 데이터의 테이블형 숫자에는 "tnum". 이 둘은 절대 겹치지 않습니다 — 단락 안의 숫자는 ss01, 데이터 테이블 안의 숫자는 tnum을 사용합니다.
• 점진적 트래킹: 자간은 크기에 비례하여 좁아집니다: 56px에서 -1.4px, 48px에서 -0.96px, 32px에서 -0.64px, 26px에서 -0.26px, 16px 이하에서는 보통.
• 두 가지 웨이트의 단순함: 주로 300(본문과 헤딩)과 400(UI/버튼). 기본 폰트에는 볼드(700)가 없습니다 — SourceCodePro는 코드 대비를 위해 500/700을 사용합니다.

4. 컴포넌트 스타일링

버튼

기본 퍼플

• 배경: #533afd
• 텍스트: #ffffff
• 패딩: 8px 16px
• 반지름: 4px
• 폰트: 16px sohne-var 웨이트 400, "ss01"
• 호버: #4434d4 배경
• 용도: 기본 CTA (“Start now”, “Contact sales”)

고스트 / 아웃라인

• 배경: 투명
• 텍스트: #533afd
• 패딩: 8px 16px
• 반지름: 4px
• 테두리: 1px solid #b9b9f9
• 폰트: 16px sohne-var 웨이트 400, "ss01"
• 호버: 배경이 rgba(83,58,253,0.05)로 변경
• 용도: 보조 액션

투명 인포

• 배경: 투명
• 텍스트: #2874ad
• 패딩: 8px 16px
• 반지름: 4px
• 테두리: 1px solid rgba(43,145,223,0.2)
• 용도: 3차/정보 수준의 액션

중성 고스트

• 배경: 투명 (rgba(255,255,255,0))
• 텍스트: rgba(16,16,16,0.3)
• 패딩: 8px 16px
• 반지름: 4px
• 아웃라인: 1px solid rgb(212,222,233)
• 용도: 비활성화되거나 음소거된 액션

카드 & 컨테이너

• 배경: #ffffff
• 테두리: 1px solid #e5edf5(표준) 또는 1px solid #061b31(다크 액센트)
• 반지름: 4px(좁음), 5px(표준), 6px(편안함), 8px(추천)
• 섀도우(표준): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• 섀도우(앰비언트): rgba(23,23,23,0.08) 0px 15px 35px 0px
• 호버: 섀도우가 강해지며, 종종 블루 틴트 레이어가 추가됨

배지 / 태그 / 필

중성 필

• 배경: #ffffff
• 텍스트: #000000
• 패딩: 0px 6px
• 반지름: 4px
• 테두리: 1px solid #f6f9fc
• 폰트: 11px 웨이트 400

성공 배지

• 배경: rgba(21,190,83,0.2)
• 텍스트: #108c3d
• 패딩: 1px 6px
• 반지름: 4px
• 테두리: 1px solid rgba(21,190,83,0.4)
• 폰트: 10px 웨이트 300

입력 & 폼

• 테두리: 1px solid #e5edf5
• 반지름: 4px
• 포커스: 1px solid #533afd 또는 퍼플 링
• 레이블: #273951, 14px sohne-var
• 텍스트: #061b31
• 플레이스홀더: #64748d

내비게이션

• 흰 배경의 깔끔한 수평 내비, 블러 백드롭으로 고정
• 브랜드 로고타입 왼쪽 정렬
• 링크: sohne-var 14px 웨이트 400, #061b31 텍스트, "ss01" 적용
• 반지름: 내비 컨테이너에 6px
• CTA: 오른쪽 정렬된 퍼플 버튼(“Sign in”, “Start now”)
• 모바일: 6px 반지름의 햄버거 토글

장식 요소

대시 테두리

• 플레이스홀더/드롭 영역에 1px dashed #362baa(퍼플)
• 마젠타 테마 장식 테두리에 1px dashed #ffd7ef(마젠타)

그래디언트 액센트

• 히어로 장식을 위한 루비에서 마젠타 그래디언트(#ea2261에서 #f96bee)
• 브랜드 다크 섹션은 흰 텍스트와 함께 #1c1e54 배경 사용

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 스케일: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
• 특이사항: 스케일은 소형 끝에서 촘촘합니다(4-12에서 2px마다), 금융 데이터를 위한 Stripe의 정밀 지향 UI를 반영합니다

그리드 & 컨테이너

• 최대 콘텐츠 너비: 약 1080px
• 히어로: 여유로운 패딩과 가벼운 헤드라인을 갖춘 중앙 단일 열
• 기능 섹션: 기능 카드를 위한 2-3열 그리드
• 브랜드 몰입을 위한 #1c1e54 배경의 전체 너비 다크 섹션
• 블루 틴트 섀도우를 갖춘 포함된 카드로서의 코드/대시보드 미리보기

여백 철학

• 정밀한 간격: 미니멀리스트 시스템의 광대한 여백과 달리, Stripe는 측정되고 목적 있는 여백을 사용합니다. 모든 간격은 신중한 타이포그래픽 선택입니다.
• 촘촘한 데이터, 여유로운 크롬: 금융 데이터 표시(테이블, 차트)는 빽빽하게 채워져 있지만, 주변 UI 크롬은 여유롭게 간격을 두었습니다. 이는 아름다운 프레임 안의 잘 정리된 스프레드시트처럼 통제된 밀도감을 만들어냅니다.
• 섹션 리듬: 흰 섹션과 다크 브랜드 섹션(#1c1e54)이 번갈아 나타나, 임의적인 색상 없이 단조로움을 방지하는 극적인 밝음/어두움의 리듬을 만들어냅니다.

테두리 반지름 스케일

• 마이크로(1px): 세밀한 요소, 은은한 모서리 처리
• 표준(4px): 버튼, 입력, 배지, 카드 — 주력
• 편안함(5px): 표준 카드 컨테이너
• 여유(6px): 내비게이션, 더 큰 인터랙티브 요소
• 라지(8px): 추천 카드, 히어로 요소
• 복합: 0px 0px 6px 6px 아래가 둥근 컨테이너(탭 패널, 드롭다운 푸터)

6. 깊이 & 엘리베이션

섀도우 철학: Stripe의 섀도우 시스템은 색채적 깊이의 원칙 위에 구축되어 있습니다. 대부분의 디자인 시스템이 중성 회색이나 검정 섀도우를 사용하는 반면, Stripe의 기본 섀도우 색상(rgba(50,50,93,0.25))은 브랜드의 네이비 팔레트를 반향하는 딥 블루-그레이입니다. 이는 단순히 깊이감을 더하는 것이 아니라 브랜드 분위기를 더하는 섀도우를 만들어냅니다. 다층 접근 방식은 이 블루 틴트 섀도우와 다른 오프셋의 순수한 블랙 보조 레이어(rgba(0,0,0,0.1))를 짝지어, 브랜드 섀도우가 요소에서 더 멀리, 중성 섀도우가 더 가까이 위치하는 시차 효과 같은 깊이감을 만들어냅니다. 네거티브 스프레드 값(-30px, -18px)은 섀도우가 요소의 가로 방향 풋프린트를 넘지 않도록 하여, 엘리베이션을 수직적이고 통제된 상태로 유지합니다.

장식적 깊이

• 다크 브랜드 섹션(#1c1e54)은 배경색 대비를 통해 몰입형 깊이감을 만들어냅니다
• 히어로 장식을 위한 루비에서 마젠타 트랜지션의 그래디언트 오버레이
• 고정 요소의 상단 모서리 섀도우를 위한 섀도우 색상 rgba(0,55,112,0.08) (--hds-color-shadow-sm-top)

7. 해야 할 것과 하지 말아야 할 것

해야 할 것

• 모든 텍스트 요소에 "ss01"을 적용한 sohne-var 사용 — 스타일리스틱 세트가 곧 브랜드입니다
• 모든 헤드라인과 본문 텍스트에 웨이트 300 사용 — 가벼움이 시그니처입니다
• 모든 엘리베이션된 요소에 블루 틴트 섀도우(rgba(50,50,93,0.25)) 적용
• 헤딩에 #000000 대신 #061b31(짙은 네이비) 사용 — 따뜻함이 중요합니다
• 테두리 반지름은 4px-8px 사이로 유지 — 보수적인 모서리 처리는 의도적입니다
• 테이블형/금융 숫자 표시에는 "tnum" 사용
• 섀도우 레이어 적용: 깊이 시차를 위해 블루 틴트 원거리 + 중성 근거리
• #533afd 퍼플을 기본 인터랙티브/CTA 색상으로 사용

하지 말아야 할 것

• sohne-var 헤드라인에 웨이트 600-700 사용 금지 — 웨이트 300이 브랜드 보이스입니다
• 카드나 버튼에 큰 테두리 반지름(12px+, 필 형태) 사용 금지 — Stripe는 보수적입니다
• 중성 회색 섀도우 사용 금지 — 항상 블루로 틴트(rgba(50,50,93,...))
• sohne-var 텍스트에서 "ss01" 생략 금지 — 대체 글리프가 개성을 정의합니다
• 헤딩에 순수한 검정(#000000) 사용 금지 — 항상 #061b31 짙은 네이비 사용
• 인터랙티브 요소에 따뜻한 액센트 색상(오렌지, 노랑) 사용 금지 — 퍼플이 기본입니다
• 디스플레이 크기에서 양수 자간 적용 금지 — Stripe는 좁게 트래킹합니다
• 버튼이나 링크에 마젠타/루비 액센트 사용 금지 — 이들은 장식/그래디언트 전용입니다

8. 반응형 동작

브레이크포인트

터치 타겟

• 버튼은 편안한 패딩 사용(수직 8px-16px)
• 내비게이션 링크는 적절한 간격의 14px
• 배지는 탭 타겟을 위한 최소 6px 수평 패딩
• 6px 반지름 버튼의 모바일 내비 토글

축소 전략

• 히어로: 56px 디스플레이 -> 모바일에서 32px, 웨이트 300 유지
• 내비게이션: 수평 링크 + CTA -> 햄버거 토글
• 기능 카드: 3열 -> 2열 -> 단일 열 쌓기
• 다크 브랜드 섹션: 전체 너비 처리 유지, 내부 패딩 축소
• 금융 데이터 테이블: 모바일에서 가로 스크롤
• 섹션 간격: 64px+ -> 모바일에서 40px
• 타이포그래피 스케일 압축: 브레이크포인트 전반에 걸쳐 56px -> 48px -> 32px 히어로 크기

이미지 동작

• 대시보드/제품 스크린샷은 모든 크기에서 블루 틴트 섀도우 유지
• 히어로 그래디언트 장식은 모바일에서 단순화
• 코드 블록은 SourceCodePro 처리 유지, 가로 스크롤 가능
• 카드 이미지는 일관된 4px-6px 테두리 반지름 유지

9. 에이전트 프롬프트 가이드

빠른 색상 참조

• 기본 CTA: Stripe 퍼플 (#533afd)
• CTA 호버: 퍼플 다크 (#4434d4)
• 배경: 순수한 흰색 (#ffffff)
• 헤딩 텍스트: 짙은 네이비 (#061b31)
• 본문 텍스트: 슬레이트 (#64748d)
• 레이블 텍스트: 다크 슬레이트 (#273951)
• 테두리: 소프트 블루 (#e5edf5)
• 링크: Stripe 퍼플 (#533afd)
• 다크 섹션: 브랜드 다크 (#1c1e54)
• 성공: 그린 (#15be53)
• 장식 액센트: 루비 (#ea2261), 마젠타 (#f96bee)

컴포넌트 프롬프트 예시

• “흰 배경의 히어로 섹션을 만드세요. 헤드라인은 48px sohne-var 웨이트 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings ‘ss01’. 서브타이틀은 18px 웨이트 300, line-height 1.40, color #64748d. 퍼플 CTA 버튼(#533afd, 4px 반지름, 8px 16px 패딩, 흰 텍스트)과 고스트 버튼(투명, 1px solid #b9b9f9, #533afd 텍스트, 4px 반지름).”
• “카드를 디자인하세요: 흰 배경, 1px solid #e5edf5 테두리, 6px 반지름. 섀도우: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. 제목은 22px sohne-var 웨이트 300, letter-spacing -0.22px, color #061b31, ‘ss01’. 본문은 16px 웨이트 300, #64748d.”
• “성공 배지를 만드세요: rgba(21,190,83,0.2) 배경, #108c3d 텍스트, 4px 반지름, 1px 6px 패딩, 10px sohne-var 웨이트 300, 테두리 1px solid rgba(21,190,83,0.4).”
• “내비게이션을 만드세요: backdrop-filter blur(12px)의 흰색 고정 헤더. 링크에는 sohne-var 14px 웨이트 400, #061b31 텍스트, ‘ss01’. 오른쪽 정렬된 퍼플 CTA ‘Start now’(#533afd 배경, 흰 텍스트, 4px 반지름). 내비 컨테이너 6px 반지름.”
• “다크 브랜드 섹션을 디자인하세요: #1c1e54 배경, 흰 텍스트. 헤드라인 32px sohne-var 웨이트 300, letter-spacing -0.64px, ‘ss01’. 본문 16px 웨이트 300, rgba(255,255,255,0.7). 내부 카드는 6px 반지름의 rgba(255,255,255,0.1) 테두리 사용.”

반복 가이드

1. sohne-var 텍스트에 항상 font-feature-settings: "ss01" 활성화 — 이것이 브랜드의 타이포그래픽 DNA입니다
2. 웨이트 300이 기본값; 400은 버튼/링크/내비게이션에만 사용
3. 섀도우 공식: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 (Y1/B1은 더 크게(원거리 섀도우), Y2/B2는 더 작게(근거리 섀도우))
4. 헤딩 색상은 #061b31(짙은 네이비), 본문은 #64748d(슬레이트), 레이블은 #273951(다크 슬레이트)
5. 테두리 반지름은 4px-8px 범위 유지 — 필 형태나 큰 모서리 처리 절대 금지
6. 테이블, 차트, 금융 표시의 모든 숫자에 "tnum" 사용
7. 다크 섹션은 #1c1e54 사용 — 검정도, 회색도 아닌, 딥 브랜드 인디고
8. 코드에는 SourceCodePro, 12px/500 웨이트, 가독성을 위한 2.00 line-height(매우 여유로운) 사용