큐레이션 · 오픈 · 무료

Checkout.com

고성능 비즈니스를 위한 글로벌 결제 인프라.

fintechpayments

Checkout.com 스크린샷

↓ 디자인 시스템 다운로드 (16 MB)OpenDesign 에서 열기

원본 사이트: https://www.checkout.com

📦 팩 내용 보기 →

01

디자인 DNA

결제글로벌성능핀테크체크아웃

모든 거래를 외과적 정밀함으로 대하는 프리미엄 금융 인프라 제공자.

02

컬러

#186AFFAccent

#FFFFFFInk

#000000BG

#D9D9D9Muted

rgba(255,255,255,0.1)Line

주요 액션을 위한 단일 기능적 블루 악센트가 포함된 고대비 다크 모드.

03

타이포그래피

geometric-sans · humanist-sans · semi-monospaced

display101px · 500
h156px · 500
body18px · 400
caption14px · 400

04

여백

4px

8px

16px

24px

32px

48px

64px

96px

표준 텍스트 블록을 위한 8px 수직 리듬, 주요 섹션 간 넉넉한 여백.

05

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

sm · 4px

md · 8px

lg · 16px

pill · 999px

최소화하여 배경 대비에 의존. 특정 카드 정의에만 1px 보더 사용.

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

중앙 정렬 콘텐츠와 떠 있는 이미지 모듈이 있는 풀블리드 다크 캔버스.

07

모션과 인터랙션

200msmicro

250mssmall

800msmedium

cubic-bezier(0.755, 0.05, 0.855, 0.06)easing

hover 상태 색상 변화 (0.2초) · 인터랙티브 요소를 위한 이징된 전환

링크와 버튼의 색상 전환 (0.2초). · 상태 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

button 필 라디우스의 단색 블루 기본 CTA; 보조 버튼은 얇은 보더가 있는 투명.
card 16px-20px 라디우스의 이미지 중심 라운딩 모듈로, 떠 있는 비ignet처럼 보임.
chip 밑줄이나 미세한 배경 채움이 있는 간단한 텍스트 링크.
input 미니멀한 다크 필드와 미세한 보더, 밝은 블루 focus 상태.
hero 다크 배경에 중앙 정렬된 거대한 타이포그래피와 역동적인 사진 자산의 콜라주로 둘러싸임.

09

보이스와 금지 목록

톤 자신감 있고 정확하며 권위 있는.
헤드라인 주의를 끄는 큰 전면체 문장.
CTA 직설적이고 실행 지향적 (예: '문의하기').

장식용 세리프 폰트를 사용하지 마세요 — 스크린샷에는 모든 제목에 깨끗하고 현대적인 기하학적산세리프가 보입니다.
복잡한 배경을 사용하지 마세요 — 스크린샷에는 콘텐츠를 우선시하는 깊은 검정, 고대비 배경이 보입니다.
둥근 사각형 버튼을 사용하지 마세요 — 스크린샷에는 주요 액션을 위한 완전히 둥근 '필' 모양 버튼이 보입니다.
무채색 팔레트를 사용하지 마세요 — 스크린샷에는 하나의 고채도 블루 악센트가 있는 날카로운 흑백 구성이 보입니다.
작고 비좁은 타이포그래피를 사용하지 마세요 — 스크린샷에는 강조를 위한 거대하고 자간이 타이트한 전시용 타이포그래피가 보입니다.
가늘고 연약한 라인을 사용하지 마세요 — 스크린샷에는 미세한 스트로크보다는 고대비 색상 블록으로 정의된 명확한 경계가 보입니다.
피하기: 전문 용어
피하기: 단서 표현
피하기: 장난기
피하기: 과도한 형용사

10

팩 안의 실제 스크린샷

Checkout.com — 桌面首屏（hero） — 桌面首屏（hero）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Checkout.com — 移动首屏 — 移动首屏

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

11

System Prompt

Checkout.com은 프리미엄 핀테크 결제 인프라 제공자입니다. 디자인 DNA는 고대비 다크 모드 캔버스(#000000 배경, #FFFFFF 먹색)와 주요 CTA를 위한 단일 고채도 기능적 악센트(#186AFF)로 정의됩니다. 타이포그래피는 전시용으로 대담한 기하학적산세리프, 본문으로 읽기 쉬운 휴머니스산세리프를 사용하며 엄격한 타이포그래피 스케일을 유지합니다. 중요한 제약 조건: 장식용 세리프를 절대 사용하지 않기; 날카롭고 고대비 경계를 위해 미세한 색상 전환 피하기; 기본 버튼은 항상 정사각형이나 반원형 모서리가 아닌 완전히 둥근 '필' 라디우스를 사용하도록 보장합니다.

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

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

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

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