큐레이션 · 오픈 · 무료

Stripe

세련된 그라데이션과 고대비 타이포그래피를 정교하게 활용하는, 깔끔하고 프리미엄한 개발자 중심 핀테크 플랫폼입니다.

FintechEditorialPremiumGradient
Stripe 스크린샷
↓ 디자인 시스템 다운로드 (30 MB)OpenDesign 에서 열기

원본 사이트: https://stripe.com

📦 팩 내용 보기 →

01

디자인 DNA

결제인프라글로벌개발자 중심신뢰성

인터넷 경제의 신뢰할 수 있는, 보이지 않는 중추입니다.

02

컬러

#533AFDAccent
#061B31Ink
#50617AInk soft
#FFFFFFBG
#F8FAFDBG soft
#E5EDF5BG quiet
#64748DMuted
rgba(229, 237, 245, 1)Line

딥 네이비 잉크와 활기찬 퍼플 악센트를 주도로 하는 깔끔하고 고대비 팔레트이며, 부드러운 중립 그레이와 다이내믹한 그라데이션이 이를 뒷받침합니다.

03

타이포그래피

grotesque-sans · monospace

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

4px 기본 그리드를 기반으로 한 넉넉한 수직 간격은 명확한 시각적 계층과 가독성을 보장합니다.

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

엣지와 입력 필드를 정의하는 얇고 은은한 라이트 그레이 또는 퍼플 틴트의 그레이 보더입니다.

0px 14.088px 21.132px -14.088px rgba(3, 3, 39, 0.25) · 0px 18px 36px -18px rgba(0, 0, 0, 0.1) · 0px 15px 35px 0px rgba(23, 23, 23, 0.08) · 0px 3px 6px 0px rgba(23, 23, 23, 0.06)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

넉넉한 좌우 여백과 구조화된 다중 컬럼 그리드를 갖춘 넓은 중앙 정렬 컨테이너입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing

hover 상태에서의 부드러운 색상 및 transform 전환 · 텍스트 및 UI 요소를 위한 단계별 fade-in 애니메이션

텍스트와 버튼의 색상 변화, 그림자를 통한 미묘한 높이 변화입니다. · 약간의 크기 조절이나 색상 깊이 변화로 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Stripe — 桌面首屏（hero）
桌面首屏（hero）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 移动首屏
移动首屏

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

11

System Prompt

Stripe의 디자인 DNA는 프리미엄, 개발자 중심 핀테크 인프라 제공업체로서 명확성, 신뢰성, 현대적 전문성을 강조합니다. 팔레트는 흰색 배경(#FFFFFF), 딥 네이비 잉크(#061B31), 활기찬 퍼플 악센트(#533AFD)를 중심으로 하며 부드러운 중립 그레이(#F8FAFD, #E5EDF5)로 뒷받침됩니다. 타이포그래피는 디스플레이와 본문 모두에 깔끔한 grotesque-sans를 사용하여 가독성과 현대적인 기술적 느낌을 우선시합니다. 핵심 제약 조건: 다크 모드 인터페이스를 피하고, 지나치게 장난기 있거나 둥근 서체를 사용하지 않으며, 무거운 테두리나 공격적인 비주얼 요소 대신 미묘하고 깔끔한 서피스로 넉넉한 여백을 유지합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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