精選 · 開放 · 免費
Hourly App
一個生產力應用程式的登陸頁面，以巨大、緊湊的排版和極簡的黑紅奶油配色來定義。
Bold TypographyApp UIMinimalMobile UITooling
01
設計氣質 DNA
極簡大膽俏皮功能性
一款實用應用程式的高對比排版海報
02
色彩
#D0021BAccent
#EEE1C1Ink
#0A0A0ABG
rgba(238, 225, 193, 1)Line
極致的對比，採用黑色、奶油色與紅色的嚴格三色配色。
03
字型
grotesque-sans
- display
217px · 700 - headline
44px · 700 - body
16px · 700
所有主要文字均使用粗體 grotesque-sans 字體。 · 全文採用緊湊的字距與行高。 · 文字經常作為主要的視覺元素。
04
間距
不規則，由大型排版區塊驅動，而非一致的網格。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid #EEE1C1 的水平分隔線，用於區隔區塊。
06
版面
1280container
1columns
768breakpoints
全寬垂直堆疊，包含巨大的排版首頁區塊和手機模型。
07
動效與互動
200msmicro
250mssmall
0msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
在 hover 與互動時的簡單過渡。
游標在互動元素上變為指標。 · 標準指標互動。
08
組件
- button 簡單的文字型行動呼籲（「下載」），無外框。
- card 無，手機模型用作主要的視覺呈現。
- chip 無
- input 無
- hero 全螢幕，以一個單詞為主的支配性排版填滿整個視口。
09
文案語氣與禁用清單
- 語氣 直接、有力且極簡。
- 標題風格 超大號、緊密堆疊的詞語。
- 按鈕文案 簡單的小寫文字（「下載」）。
- 避免使用寬鬆的字距——截圖顯示為緊湊的字距。
- 避免使用細體字重——截圖顯示僅使用粗體文字。
- 避免使用多樣化的背景色——截圖顯示為純色深色背景。
- 避免使用陰影——截圖顯示完全扁平的排版。
- 避免使用裝飾性的邊框或框架——截圖使用簡單的水平分隔線。
- 避免對大型區塊使用置中對齊——截圖顯示為左對齊且重疊的區塊。
- 避免: 華麗或過度描述性的語言。
- 避免: 細微或柔和的配色方案。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（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
此設計是一個極簡、高衝擊力的行動應用程式登陸頁面，幾乎完全依賴巨大、緊湊設定的粗體排版來傳達訊息。核心配色限制為三色：接近黑色的背景（#0A0A0A）、用於主要文字與邊框的溫暖奶油色（#EEE1C1），以及用於強調的鮮明紅色（#D0021B）。排版為粗體 grotesque-sans 無襯線字體，常被放大到巨大尺寸，並以極緊的行高與字距設定。關鍵設計約束包括避免任何細體字重、避免寬鬆字距、避免陰影或複雜背景，並維持極簡、高對比的美學。佈局為單欄垂直堆疊，手機模型穿插於文字區塊之間。
en · zh-CN · zh-TW · ja · ko