큐레이션 · 오픈 · 무료

Atlas

독점적인 글로벌 다이닝, 여행, 라이프스타일 접근을 제공하는 프리미엄 핀테크 플랫폼.

FintechEditorialPremium
Atlas 스크린샷
↓ 디자인 시스템 다운로드 (56 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

독점적글로벌럭셔리멤버십금융

현대 글로벌 시민을 위한 프리미엄 블랙카드 경험.

02

컬러

#001391Accent
#F8F8F8Ink
#808080Ink soft
#1E1E1EBG
#272727BG soft
#000000BG quiet
rgba(255,255,255,0.15)Line

고급스러운 그래디언트 팔레트와 단일 강렬한 블루 악센트를 사용한 고대비 다크 모드.

03

타이포그래피

geometric-sans · monospace

헤드라인은 좁은 음수 자간을 사용합니다. · 모노스페이드 타입은 레이블, 좌표 및 데이터 포인트에만 사용됩니다. · 폰트 웨이트는 최소화하여 주로 Regular(400)에 의존합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

넉넉한 수직 패딩과 스몰 캡스에 넓은 자간을 적용하여 공기감 있고 프리미엄적인 느낌을 연출합니다.

05

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

sm · 4px
md · 14px
lg · 24px
pill · 128px

카드와 섹션을 정의하기 위해 rgba(255,255,255,0.15) 또는 rgba(255,255,255,0.09)를 사용한 미세한 1px 테두리.

0px 2px 4px 0px rgba(0, 0, 0, 0.04) · 0px 2px 20px 0px rgba(0, 0, 0, 0.15)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

가독성을 위해 중앙 정렬된 콘텐츠와 좁은 열 제한을 둔 전체 폭 섹션.

07

모션과 인터랙션

150msmicro
150mssmall
750msmedium
cubic-bezier(0.28, 1.1, 0.74, 1)easing

카드 등장을 위한 부드러운 탄력 있는 전환. · 히어로 요소를 위한 느리고 시네마틱한 페이드 인. · hover 시 미세한 배경색 전환.

인터랙티브 요소에 미세한 밝기 증가와 부드러운 전환. · 버튼과 링크에 마이크로 인터랙션이 적용된 즉각적인 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Atlas — 桌面首屏（hero）
桌面首屏（hero）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Atlas — 移动首屏
移动首屏

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

11

System Prompt

Atlas는 글로벌 라이프스타일 접근을 위한 프리미엄 핀테크 플랫폼입니다. 그 디자인 DNA는 깊은 회색(#1E1E1E, #272727)과 선명한 흰색(#F8F8F8)을 사용한 다크, 고대비 미학으로 정의되며, 단일 강렬한 블루 악센트(#001391)를 기반으로 합니다. 타이포그래피는 디스플레이 및 본문 텍스트에 깔끔하고 기하학적인 산세리프를 사용하고, 데이터 및 레이블에는 모노스페이드 폰트를 보완합니다. 레이아웃은 넉넉한 패딩과 헤드라인의 음수 자간을 사용하여 공간감 있게 구성되며, 세련된 에디토리얼 느낌을 연출합니다. 중요한 주의사항: 밝거나 네온 색상을 절대 사용하지 말고, 장식용 세리프 폰트를 피하며, 무거운 테두리나 복잡한 패턴으로 인터페이스를 혼잡하게 만들지 마십시오. 전체적으로 고급스럽고 열망을 불러일으키는 어조를 유지하십시오.

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

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

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

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