큐레이션 · 오픈 · 무료

Qonto

계좌, 도구, AI 기반 관리를 제공하는 종합 비즈니스 재무 플랫폼.

01

디자인 DNA

현대적인 뱅킹과 AI 기반 재무 자동화를 결합한 기업용 프리미엄 핀테크 플랫폼.

02

컬러

근black 배경과 순백 텍스트를 사용한 고대비 단색 팔레트로 프리미엄 느낌을 연출합니다.

03

타이포그래피

geometric-sans

• display56px · 700
• h248px · 700
• body-lg18px · 400
• body16px · 400
• caption14px · 400
• overline12px · 400

디스플레이 텍스트는 효과를 위해 촘촘한 음수 자간(-1px)을 사용합니다 · 본문 텍스트는 가독성을 위해 넉넉한 행간(1.5)을 유지합니다 · 모든 텍스트는 현대적인 일관성을 위해 기하학적 산세리프 계열을 사용합니다

04

여백

4px 기본 단위로 4, 8, 12, 16, 24 배수의 간격을 사용하여 컴포넌트 밀도를 조절합니다

05

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

rgb(204,204,204)를 사용한 1px 실선으로 은은한 구분선을, rgb(255,255,255)를 사용한 1px 실선으로 인터랙티브 요소의 테두리를 만듭니다.

0px 0px 20px 0px rgba(255,255,255,0.08) · 1px 0px 10px 2px rgba(0,0,0,0.1)

06

레이아웃

넉넉한 여백과 뷰포트를 지배하는 큰 히어로 섹션을 가진 12컬럼 그리드

07

모션과 인터랙션

이미지 전환을 위한 background-size 전환 · 로딩 상태를 위한 너비 애니메이션 · 인터랙티브 요소를 위한 부드러운 transform 애니메이션

0.5s ease-out 타이밍을 사용한 미묘한 배경색 전환 · transform 상태를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 24px border-radius를 가진 고대비 버튼, 다크 섹션에서는 흰색 배경을, 라이트 섹션에서는 검은색 배경을 사용합니다
• card 기능 섹션용 은은한 그림자가 있는 큰 둥근 컨테이너(24px radius)
• chip 라벨과 뱃지용 12px radius의 작은 둥근 태그
• input 1px 테두리와 둥근 모서리가 있는 깔끔한 입력 필드
• hero 큰 타이포그래피(56px)와 제품 사진이 있는 풀뷰포트 히어로 섹션

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며, 직접적인 가치 제안을 전달하는 직설적인 어조
• 헤드라인 강조를 위해 마침표로 끝나는 짧고 강력한 문장 (예: '비즈니스 계좌.')
• CTA 명확한 동사로 행동을 유도 (예: '계좌 개설하기', '맞는 플랜 찾기')

• 화려한 그라디언트 사용 금지 — 단색 검은 배경과 흰색 텍스트 사용
• 과도한 애니메이션 추가 금지 — 미묘한 전환과 정적 레이아웃 유지
• 장식용 폰트 사용 금지 — 깔끔한 기하학적 산세리프 폰트 일관되게 사용
• 레이아웃 과다 배치 금지 — 넉넉한 패딩(56px)과 간격 유지
• 작은 텍스트로 헤드라인 작성 금지 — 히어로 섹션에 56px 디스플레이 타이포 사용
• 여러 악센트 색상 혼용 금지 — 검정/흰색/그레이 팔레트 철저히 유지
• 피하기: 과도한 느낌표 사용 피하기 — 차분하게 마침표로 끝나는 문장 유지
• 피하기: 복잡한 금융 용어 피하기 — 단순한 비즈니스 언어 사용
• 피하기: 압도적인 기능 나열 피하기 — 섹션당 하나의 명확한 가치 제시
• 피하기: 지저분한 인터페이스 피하기 — 넉넉한 여백 유지
• 피하기: 화려한 색상 피하기 — 절제된 단색 팔레트 사용
• 피하기: 캐주얼한 언어 피하기 — 전체적으로 전문적인 어조 유지

10

팩 안의 실제 스크린샷

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

11

System Prompt

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