큐레이션 · 오픈 · 무료

N26

시그니처 틸 악센트를 활용하여 사용자를 단일 주요 행동으로 이끄는 깨끗하고 자신감 넘치는 핀테크 UI입니다.

fintechbank
N26 스크린샷
↓ 디자인 시스템 다운로드 (7 MB)OpenDesign 에서 열기

원본 사이트: https://n26.com

📦 팩 내용 보기 →

01

디자인 DNA

뱅킹핀테크모바일 퍼스트신뢰단순함

명확성과 신뢰를 우선시하는 현대적이고 친근한 은행 지점이 주머니에 들어와 있습니다.

02

컬러

#088177Accent
#1B1B1BInk
#FAF8F5BG
#6D6D6DMuted
rgba(233, 233, 233, 1.0)Line

따뜻한 오프화이트 배경과 지배적인 틸 악센트는 금융 활동을 위한 신뢰할 수 있고 접근 가능한 대비를 만듭니다.

03

타이포그래피

geometric-sans

04

여백

4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px

여유로운 공간감을 위한 표준 4px 기본 그리드와 넉넉한 padding

05

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

sm · 4px
md · 8px
lg · 24px
pill · 999px

구조적 분리 및 인터랙티브 요소를 위한 미묘한 1px border

rgba(0, 0, 0, 0.2) 0px 4px 8px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

섹션 사이에 넉넉한 수직 여백을 둔 중앙 정렬 컨테이너

07

모션과 인터랙션

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소의 배경색, transform 및 scale에 대한 매끄러운 트랜지션

매끄러운 트랜지션이 적용된 배경색 또는 색상 변화 · 즉각적인 피드백을 위한 scale 또는 translate transform

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

N26은 친근하고 접근 가능한 톤과 전문적인 신뢰를 조화시키는 프리미엄 핀테크 뱅킹 플랫폼입니다. 시각적 아이덴티티는 따뜻한 오프화이트 배경(#FAF8F5) 위의 시그니처 틸 악센트(#088177)를 중심으로 구축되어, 금융 활동을 위한 높은 대비이자 환영하는 환경을 만듭니다. 타이포그래피는 가독성과 현대적 느낌을 우선시하는 깨끗한 기하학적 산세리프이며, 주요 헤드라인에는 큰 디스플레이 크기를 사용합니다. 레이아웃은 넉넉하고 중앙 정렬되어 있으며, 일관된 4px 기본 그리드와 넉넉한 padding에 의존하여 정보 과부하를 방지합니다. 알약 형태의 border-radius를 가진 주요 CTA가 거의 모든 섹션의 초점입니다. 인터랙션 디자인은 미묘하며, hover 및 click 시 매끄러운 0.3s 트랜지션을 사용합니다. 핵심 디자인 제약 조건: 여러 경쟁 악센트 색상을 절대 사용하지 마세요; 순수 화이트 배경을 절대 사용하지 마세요; 주요 콘텐츠 카드에 거칠고 각진 모서리를 절대 사용하지 마세요; 밀도 높고 전문 용어가 많은 텍스트 블록을 피하세요; 그리고 깨끗하고 집중된 사용자 경험을 유지하기 위해 각 섹션에 단일하고 강력한 주요 행동 유도(CTA)를 유지하세요.

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

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

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

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