精選 · 開放 · 免費
Atmos Leeroy Ca
一場沉浸式的超現實數位體驗，將大膽的襯線字型與氛圍漸層融為一體
EditorialPremiumGradientTypographyGallery
01
設計氣質 DNA
超現實氛圍感沉浸式高端實驗性
一本空靈而寬廣的奢華數位雜誌或藝廊空間
02
色彩
#FFFFFFInk
#000000Ink soft
#0A1A99BG
#C5D2F0BG soft
rgba(0, 0, 0, 0.1)Line
空靈的藍白漸層喚起大氣、超現實的天空感，搭配高對比的白色字型
03
字型
didone-serif · humanist-sans
- display
200px · 400 - heading
50px · 700 - subtitle
30px · 400 - body
25px · 400 - small
20px · 400
使用 DM Sans 作為內文與 UI 元素 · 使用 Didone 襯線體（如 Times New Roman 或 _NewYork）作為主要品牌字標 · 導覽與環形文字元素維持嚴格的大寫格式
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
144px
250px
寬裕的內邊距，使用 144px 與 250px 間距打造沉浸式主視覺區塊
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 50px
1px 底部邊框（白色或黑色），膠囊型按鈕圓角 50px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全版漸層背景，搭配置中內容與寬裕的垂直間距
07
動效與互動
220msmicro
500mssmall
1000msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
背景與透明度變更使用 1 秒線性轉場 · 互動元素使用 0.5 秒 cubic-bezier 緩動 · 環形文字元素持續旋轉動畫
細微轉場，使用 0.5 秒 cubic-bezier 節奏 · 標準 pointer 互動，特定元素使用 grab 游標
08
組件
- button 膠囊型（圓角 50px），白色背景搭配大寫藍色文字
- card 極簡，可能為透明或漸層背景，搭配寬裕內邊距
- chip 畫面中未顯示
- input 畫面中未顯示
- hero 全螢幕漸層，搭配巨大的置中襯線字標與旋轉環形文字
09
文案語氣與禁用清單
- 語氣 空靈、精緻，帶有些許神秘感
- 標題風格 巨大的襯線字標，搭配簡潔的無襯線副標題
- 按鈕文案 膠囊容器中的極簡大寫文字
- 避免雜亂的佈局——畫面顯示寬裕的留白與置中的極簡構圖
- 避免使用明亮的強調色——畫面僅顯示藍白漸層搭配白色字型
- 避免為主要字標使用無襯線體——畫面顯示「ATMOS」使用襯線字型
- 避免為主要訊息使用小字型——畫面顯示主要品牌使用 200px 展示字型
- 避免在互動元素上使用尖角——畫面顯示 50px 圓角膠囊按鈕
- 避免使用複雜的導覽——畫面僅顯示單一「EXPLORE」行動呼籲按鈕
- 避免: 雜亂的介面
- 避免: 繁複的背景
- 避免: 複雜的導覽模式
- 避免: 侵略性的行動呼籲
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一場沉浸式的超現實數位體驗，使用藍白大氣漸層與巨大的襯線字型。設計核心為 200px 的 Didone 襯線體「ATMOS」字標，搭配 humanist-sans 的 DM Sans 作為內文與 UI 元素。色彩限定於漸層藍（#0A1A99 至 #C5D2F0 至 #FFFFFF），搭配純白（#FFFFFF）文字與黑色（#000000）強調。關鍵設計原則包括寬裕的間距（144px 與 250px 內邊距）、膠囊型按鈕（圓角 50px），以及流暢的 1 秒線性轉場。關鍵禁忌：避免雜亂佈局、不要為主要字標使用無襯線體、不要引入破壞空靈漸層美學的明亮強調色。系統使用 DM Sans 作為功能文字，襯線字體作為展示字型，營造頂級編輯感受。
en · zh-CN · zh-TW · ja · ko