精选 · 开放 · 免费
Atlas
一个提供专属全球餐饮、旅行与生活方式入口的高端金融科技平台。
FintechEditorialPremium
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 · 400 - h1
48px · 400 - body
17px · 400 - caption
12px · 500
标题采用紧凑的负字间距。 · 等宽字体专用于标签、坐标和数据点。 · 字重保持极简,主要依赖常规体 (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
组件
- button 药丸形按钮,采用纯蓝色背景 (#001391) 与白色文字。
- card 半透明的玻璃拟态卡片,带有细微的白色边框与柔和的阴影。
- chip 小型药丸形标签,采用大写等宽文字。
- input 极简的底部边框输入框,搭配等宽字体标签。
- hero 电影感的、全出血的摄影或渐变主视觉版块,搭配大号且字间距紧凑的排版。
09
文案语气与禁用清单
- 语气 精致、自信且富有憧憬。
- 标题风格 简短、有力、以利益为导向。
- 按钮文案 直接且具有排他性,常使用大写等宽文字。
- 避免使用明亮、高饱和度的背景 — 截图中展示的是深沉、柔和的深色主题 (#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 是一个高端金融科技平台,提供全球生活方式入口。其设计基因定义为深沉、高对比度的美学,使用深灰色 (#1E1E1E, #272727) 与纯白色 (#F8F8F8),并以一个醒目的蓝色点缀 (#001391) 作为锚点。排版上,主要使用简洁的几何无衬线字体用于标题与正文,辅以等宽字体用于数据与标签。布局开阔,采用慷慨的内边距与标题的负字间距,以营造精致、编辑感的体验。关键禁忌:切勿使用明亮或霓虹色,避免装饰性衬线字体,绝不让界面因厚重边框或复杂图案而显得杂乱。始终保持一种精致、富有憧憬的基调。
en · zh-CN · zh-TW · ja · ko