큐레이션 · 오픈 · 무료

GoCardless

B2B 결제 수집을 간소화하도록 설계된 전문적인 핀테크 플랫폼입니다.

01

디자인 DNA

B2B 결제 수집을 간소화하도록 설계된 전문적이고 신뢰 중심의 핀테크 플랫폼입니다.

02

컬러

따뜻한 오프화이트와 짙은 차콜의 절제된 팔레트에 고채도의 일렉트릭 옐로우 강조색 하나를 점으로 배치합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display56px · 700
• h236px · 600
• body18px · 400
• small14px · 400

헤드라인은 강하고 현대적인 존재감을 위해 볼드한 기하학적 sans-serif를 사용합니다. · 본문 텍스트는 편안한 독서를 위해 가독성이 높은 humanist sans-serif를 사용합니다. · 모노스페이스 폰트는 특정 기술적 또는 데이터 관련 맥락에만 사용합니다.

04

여백

일관된 4px 기본 격자와 페이지 주요 섹션 간의 여유로운 수직 리듬(48px/64px)입니다.

05

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

1px solid #D4D1CD

0px 0px 0px 1px inset (버튼 테두리) · 0px 0px 1px 0px rgba(0, 0, 0, 0.1) (카드에 대한 은은한 깊이)

06

레이아웃

데스크톱에서 텍스트 좌/미디어 우, 미디어 좌/텍스트 우와 같은 교차 콘텐츠 블록을 사용하여 시각적 관심을 유발하는 2열 격자입니다.

07

모션과 인터랙션

인터랙티브 요소의 배경, 색상, box-shadow에 대한 빠른 0.1초/0.2초 전환. · 텍스트 링크에 대한 부드러운 0.2초 밑줄 색상 전환.

버튼의 배경색 채우기 또는 테두리색 변화. · 배경 또는 테두리 업데이트를 통한 즉각적인 상태 변화.

08

컴포넌트

• button 두껍고 단단한 짙은 테두리를 가진 알약 모양 버튼; 주요 작업에는 채워진 옐로우를, 보조 작업에는 투명하게 사용합니다.
• card 증언과 파트너 로고에 사용되는, 부드러운 드롭 섀도우와 큰 border-radius(24px/32px)를 가진 깔끔한 카드입니다.
• chip 두드러지게 사용되지 않습니다.
• input 두드러지게 사용되지 않지만, 둥근 테두리를 가진 깔끔한 형태가 예상됩니다.
• hero 대형 볼드 타이포그래피와 고품질 맥락적 사진, 그리고 두드러진 비디오 재생 오버레이가 결합된 형태입니다.

09

보이스와 금지 목록

• 톤 전문적이고 직접적이며, 이점에 초점을 맞춥니다.
• 헤드라인 즉각적인 관심을 끌기 위해 볼드하고 대문자이며 강렬합니다.
• CTA 예: '가입하기', '영업팀 문의'와 같이 명확하고 행동에 초점을 맞춥니다.

• 다크 테마를 사용하지 마세요 — 스크린샷은 밝고 따뜻한 오프화이트 주요 배경(#EFECE7)을 보여줍니다.
• 가늘고 섬세한 타이포그래피를 사용하지 마세요 — 스크린샷은 디스플레이 텍스트에 볼드하고 묵직한 기하학적 sans-serif를 보여줍니다.
• 은은하고 채도 낮은 강조색을 사용하지 마세요 — 스크린샷은 하나의 고채도 일렉트릭 옐로우 강조색(#F1F252)을 보여줍니다.
• 날카롭고 각진 모서리를 사용하지 마세요 — 스크린샷은 버튼과 카드에 큰 알약 모양 반경(24px/32px)을 보여줍니다.
• 복잡한 그래디언트를 사용하지 마세요 — 스크린샷은 단색 채우기와 간단한 사진 배경을 보여줍니다.
• 섬세하고 가느다란 테두리를 사용하지 마세요 — 스크린샷은 인터랙티브 요소에 두드러진 1px solid 짙은 테두리를 보여줍니다.
• 피하기: 지나치게 복잡한 전문 용어
• 피하기: 헤드라인에 수동태 사용
• 피하기: 불명확한 가치 제안

10

팩 안의 실제 스크린샷

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

11

System Prompt

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