큐레이션 · 오픈 · 무료
Atlas
독점적인 글로벌 다이닝, 여행, 라이프스타일 접근을 제공하는 프리미엄 핀테크 플랫폼.
Fintech Editorial Premium
01
디자인 DNA
독점적 글로벌 럭셔리 멤버십 금융
현대 글로벌 시민을 위한 프리미엄 블랙카드 경험.
02
컬러
#001391Accent
#F8F8F8Ink
#808080Ink soft
#1E1E1EBG
#272727BG soft
#000000BG quiet
rgba(255,255,255,0.15)Line
고급스러운 그래디언트 팔레트와 단일 강렬한 블루 악센트를 사용한 고대비 다크 모드.
03
타이포그래피
geometric-sans · monospace
display 56px · 400h1 48px · 400body 17px · 400caption 12px · 500헤드라인은 좁은 음수 자간을 사용합니다. · 모노스페이드 타입은 레이블, 좌표 및 데이터 포인트에만 사용됩니다. · 폰트 웨이트는 최소화하여 주로 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
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
가독성을 위해 중앙 정렬된 콘텐츠와 좁은 열 제한을 둔 전체 폭 섹션.
07
모션과 인터랙션
150ms micro
150ms small
750ms medium
cubic-bezier(0.28, 1.1, 0.74, 1) easing
카드 등장을 위한 부드러운 탄력 있는 전환. · 히어로 요소를 위한 느리고 시네마틱한 페이드 인. · hover 시 미세한 배경색 전환.
인터랙티브 요소에 미세한 밝기 증가와 부드러운 전환. · 버튼과 링크에 마이크로 인터랙션이 적용된 즉각적인 반응.
08
컴포넌트
button 단색 블루 배경(#001391)과 흰색 텍스트를 사용한 알약 모양 버튼. card 미세한 흰색 테두리와 부드러운 그림자가 있는 반투명 글래스모피즘 카드. chip 대문자 모노스페이드 텍스트를 사용한 작은 알약 모양 태그. input 모노스페이드 레이블을 사용한 미니멀리스트 하단 테두리 입력 필드. hero 넓은 자간으로 세팅된 큰 타이포그래피를 사용한 시네마틱하고 풀블리드 사진 또는 그래디언트 히어로 섹션.
09
보이스와 금지 목록
톤 고급스럽고 자신감 있으며 열망을 불러일으키는 어조. 헤드라인 간결하고 강렬하며 이점을 강조하는 스타일. CTA 직설적이고 독점적인 스타일로, 주로 대문자 모노스페이드 텍스트를 사용합니다. 밝고 채도 높은 배경을 사용하지 마십시오 — 스크린샷은 깊고 채도 낮은 다크 테마(#1E1E1E)를 보여줍니다. 장식용 세리프 폰트를 사용하지 마십시오 — 스크린샷은 깔끔하고 기하학적인 산세리프 타이포그래피를 보여줍니다. 복잡하고 다색 그래디언트를 사용하지 마십시오 — 스크린샷은 미세하고 단색 또는 단일 색조 그래디언트를 보여줍니다. 무거운 드롭 섀도우를 사용하지 마십시오 — 스크린샷은 매우 미세하고 부드러우며 확산된 그림자를 보여줍니다. 작고 비좁은 레이아웃을 사용하지 마십시오 — 스크린샷은 넉넉한 여백과 넓은 간격을 보여줍니다. 장난스럽고 둥근 아이콘을 사용하지 마십시오 — 스크린샷은 세련되고 미니멀리스트이며 기하학적인 브랜딩을 보여줍니다. 피하기: 혼란스러운 레이아웃을 피하십시오. 피하기: 눈에 띄고 네온 같은 색상을 피하십시오. 피하기: 장난스럽거나 비공식적인 언어를 피하십시오. 피하기: 일반적이고 흔하게 사용되는 스톡크 이미지를 피하십시오. 피하기: 무겁고 장식적인 테두리를 피하십시오. 피하기: 밀집된 텍스트 블록을 피하십시오.
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Atlas는 글로벌 라이프스타일 접근을 위한 프리미엄 핀테크 플랫폼입니다. 그 디자인 DNA는 깊은 회색(#1E1E1E, #272727)과 선명한 흰색(#F8F8F8)을 사용한 다크, 고대비 미학으로 정의되며, 단일 강렬한 블루 악센트(#001391)를 기반으로 합니다. 타이포그래피는 디스플레이 및 본문 텍스트에 깔끔하고 기하학적인 산세리프를 사용하고, 데이터 및 레이블에는 모노스페이드 폰트를 보완합니다. 레이아웃은 넉넉한 패딩과 헤드라인의 음수 자간을 사용하여 공간감 있게 구성되며, 세련된 에디토리얼 느낌을 연출합니다. 중요한 주의사항: 밝거나 네온 색상을 절대 사용하지 말고, 장식용 세리프 폰트를 피하며, 무거운 테두리나 복잡한 패턴으로 인터페이스를 혼잡하게 만들지 마십시오. 전체적으로 고급스럽고 열망을 불러일으키는 어조를 유지하십시오.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 절제된 표현, 무드 있는 이미지, 최소주의적 고대비 UI를 통해 럭셔리와 독점성을 어떻게 전달할 수 있는지 보여주는 대표적인 사례로 소개할 가치가 있습니다.