精选 · 开放 · 免费

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

标题采用紧凑的负字间距。 · 等宽字体专用于标签、坐标和数据点。 · 字重保持极简，主要依赖常规体 (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

卡片展开时使用平滑的弹性过渡。 · 主视觉元素采用缓慢的电影式淡入淡出。 · 交互元素在悬停时有细微的背景色变化。

交互元素在悬停时亮度轻微提升，并有平滑的过渡效果。 · 按钮与链接在点击时立即响应，并伴有微交互。

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 是一个高端金融科技平台，提供全球生活方式入口。其设计基因定义为深沉、高对比度的美学，使用深灰色 (#1E1E1E, #272727) 与纯白色 (#F8F8F8)，并以一个醒目的蓝色点缀 (#001391) 作为锚点。排版上，主要使用简洁的几何无衬线字体用于标题与正文，辅以等宽字体用于数据与标签。布局开阔，采用慷慨的内边距与标题的负字间距，以营造精致、编辑感的体验。关键禁忌：切勿使用明亮或霓虹色，避免装饰性衬线字体，绝不让界面因厚重边框或复杂图案而显得杂乱。始终保持一种精致、富有憧憬的基调。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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