큐레이션 · 오픈 · 무료

Mollie

현대 비즈니스를 위한 결제 인프라

01

디자인 DNA

규모와 신뢰를 앞세운 유럽의 Stripe

02

컬러

전략적인 오렌지 포인트를 더한 고대비 모노크롬

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display64px · 400
• heading48px · 400
• body16px · 400

디스플레이 타이포그래피는 타이트한 자간을 사용합니다 · 폰트 웨이트는 계층 구조를 위해 400에서 500까지 다양하게 사용합니다 · 가독성을 위해 넉넉한 행간을 적용합니다

04

여백

4px 단위의 수직 리듬을 기반으로 합니다

05

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

rgba(166,166,166,0.6)를 사용한 미세한 1px 테두리

0px 4px 8px 0px rgba(0, 0, 0, 0.08) · 0px 16px 32px 0px rgba(0, 0, 0, 0.08) · 0px 0px 1px 0px rgba(0, 0, 0, 0.15)

06

레이아웃

제한된 콘텐츠 영역을 가진 풀幅 헤더 및 히어로 섹션

07

모션과 인터랙션

절제된 hover 상태 트랜지션 · 매끄러운 페이지 스크롤

인터랙티브 요소에 절제된 색상 트랜지션 · 상태 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 고대비 프라이머리(블랙 배경, 화이트 텍스트)와 절제된 세컨더리(그레이 배경)
• card 넉넉한 패딩과 미세한 그림자를 가진 큰 둥근 모서리 이미지 카드
• chip 스크린샷에서 보이지 않음
• input 간단한 밑줄 입력 필드
• hero 풀幅 라이프스타일 이미지 위에 대형 타이포그래피가 중앙 정렬되고, 오버레이된 UI 카드가 배치됨

09

보이스와 금지 목록

• 톤 전문적이고 신뢰하며 자신감 있는
• 헤드라인 규모와 신뢰성을 강조하는 크고 굵은 문장
• CTA 직접적이고 행동 지향적인(시작하기, 영업팀 문의)

• 화려하거나 네온색을 사용하지 마세요 — 블랙, 화이트, 그레이가 주를 이루는 절제된 팔레트를 보여줍니다
• 장식적이거나 세리프 디스플레이 폰트를 사용하지 마세요 — 헤드라인에 깔끔한 기하학적 sans-serif를 사용합니다
• 요소를 지나치게 배치하여 레이아웃을 혼란스럽게 하지 마세요 — 넉넉한 여백과 집중된 콘텐츠를 보여줍니다
• 좁고 빡빡한 타이포그래피를 사용하지 마세요 — 넉넉한 행간을 가진 크고 가독성 높은 타입을 사용합니다
• 모든 요소에 날카롭고 직사각형 모서리를 사용하지 마세요 — 넉넉한 border-radius(최대 24px)를 보여줍니다
• 얇고 가느다란 버튼을 사용하지 마세요 — 명확한 대비를 가진 견고하고 충실한 프라이머리 버튼을 보여줍니다
• 피하기: 전문 용어가 지나친 언어
• 피하기: 지나친 느낌표 사용
• 피하기: 너무 캐주얼한 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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