핀테크 디자인 시스템
핀테크와 금융 웹사이트에서 추출한 디자인 시스템이에요. 결제, 은행, 투자, 암호화폐, 빌링 제품이 여기에 해당해요. 신뢰가 핵심이라 신중한 색상 사용, 명확한 숫자 타이포그래피, 안심하고 누를 수 있도록 디자인된 폼과 버튼을 볼 수 있어요.
이 카테고리의 DESIGN.md 예시 3개: Klarna, PayPal 및 Stripe. 각 사이트의 공개 페이지에서 추출한 것으로, 공식 브랜드 가이드라인이 아니에요. 이 형식이 처음이라면 DESIGN.md란 무엇인지 읽어 보세요.
Klarna
Klarna의 디자인 시스템은 세련된 짙은 네이비 기본 색상(#0b051d)을 중심으로 하며, 시그니처 핑크(#ffa8cd)를 비롯한 밝은 강조 색상을 함께 사용합니다. Klarna 전용 폰트와 시스템 폰트를 함께 사용하고, 32px을 가장 많이 쓰는 둥근 모서리를 강조하며, 접근성을 위해 높은 명암 대비를 유지합니다. 넉넉한 여백과 명확한 타이포그래피 위계를 통해 전문성과 친근함의 균형을 맞춘 디자인입니다.
PayPal
PayPal의 네덜란드어 홈페이지는 선명한 하늘색(#60cdff) 히어로 섹션과 극도로 굵은 검은색 디스플레이 타이포그래피(PayPal Pro w900)를 중심으로 한 대담하고 소비자 지향적인 디자인을 보여 줍니다. 내비게이션은 흰색 바탕에 검은색 텍스트를 사용하며, 테두리만 있는 "Inloggen" 버튼과 채워진 검은색 "Rekening openen" 버튼이라는 뚜렷이 구분되는 두 가지 CTA 버튼을 갖추고 있습니다. 페이지 상단에는 짙은 네이비색 공지 배너가 자리합니다. 전체적으로 고대비, 둥근 알약형 모서리, 브랜드 서체 중심의 표현을 사용하여 폭넓은 소비자 금융 이용자층에게 신뢰감과 접근성을 전달합니다.
Stripe
Stripe의 마케팅 홈페이지는 엄격하게 관리되는 디자인 시스템(HDS, Stripe Design System)을 바탕으로 합니다. 가벼운 굵기(300~400)의 가변 폰트 "sohne-var"를 사용하고, 짙은 네이비에서 인디고로 이어지는 브랜드 팔레트는 #533afd(Stripe Indigo)를 중심으로 구성되어 있습니다. 대표적인 특징은 화면 전체를 채우는 스펙트럼 그라데이션 히어로입니다. 컴포넌트는 4~6px의 낮은 모서리 반경과 평면에 가깝고 최소한의 그림자를 사용하며, 8px 기본 간격 그리드에 맞춰 구조화되어 있습니다. 전체적인 톤은 권위 있으면서도 친근합니다. 자신감 있는 타이포그래피와 절제된 색 사용을 통해 금융 인프라를 전달합니다.
원하는 사이트가 없나요?
URL만 붙여 넣으면 어떤 웹사이트든 DESIGN.md로 추출해요. 색상, 타이포그래피, 간격, 토큰을 AI 워크플로에 바로 쓸 수 있어요.