精選 · 開放 · 免費

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

卡片顯示採用流暢的彈性過渡效果。 · 主視覺元素採用緩慢、電影感的淡入淡出。 · 懸停時背景顏色有細微的過渡變化。

互動元素上有細微亮度提升與流暢過渡效果。 · 按鈕與連結上立即產生回應並帶有微互動。

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) 為基調。排版依賴簡潔、幾何感的無襯線字體作為標題與內文，並以等寬字體補充數據與標籤。佈局寬裕，使用寬裕的內距與標題的負字距來營造精緻的編輯感。關鍵禁忌：切勿使用明亮或霓虹色彩，避免裝飾性襯線字體，絕不用厚重邊框或複雜圖案使介面雜亂。全程保持精緻、具啟發性的語調。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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