精選 · 開放 · 免費
Jupi
一個為在 AI 驅動速度中航行的科技領袖設計的精緻、淺色系決策系統。
EditorialProductRefined
01
設計氣質 DNA
決策智慧領導力效率目標明確
一個為高風險策略決策準備的冷靜、專注的指揮中心。
02
色彩
#000000Ink
rgba(0,0,0,0.57)Ink soft
#F5F4EEBG
#3B3B3BMuted
rgba(0,0,0,0.09)Line
在柔和的暖調灰白色上使用高對比墨色,為嚴肅的決策創造一個冷靜、專注的環境。
03
字型
geometric-sans · humanist-sans · monospace
- display
36px · 400 - headline
36px · 500 - body
16px · 400 - caption
11px · 400
大型展示標題與標題文字使用幾何無襯線字體 · 內文與介面文字使用人文無襯線字體 · 程式碼片段與技術內容使用等寬字體
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
透過 8 的倍數的 padding 和 gap 強制執行 8px 垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 99999999px
1px solid rgba(0,0,0,0.09)
0px 1px 8px -2px rgba(0,0,0,0.06) · 0px 4px 7px 0px rgba(0,0,0,0.05) · 0px 1px 2px 0px rgba(0,0,0,0.07)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
以中央單欄主視覺佈局為主,主要文字區域嵌套在一個淺色卡片中。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素在 hover 時輕微的 opacity 轉場 · 互動元素的顏色與 background-color 平滑轉場
互動元素在 hover 時輕微的背景或顏色變化。 · 透過顏色或 opacity 變化提供即時視覺回饋。
08
組件
- button 膠囊形狀並具有高對比;實心黑色填充或帶有輕微陰影的淺色填充。
- card 淺灰白色容器,帶有輕微的內陰影和柔和邊框。
- chip 小型圓角矩形,用於快速選擇選項。
- input 大型文字輸入區,帶有柔和陰影和圓角。
- hero 以中央文字為主的區塊,包含一個大型粗體聲明和輔助標題。
09
文案語氣與禁用清單
- 語氣 自信、直接且專業。
- 標題風格 簡潔有力的陳述,用以框定問題或洞見。
- 按鈕文案 以行動為導向且清晰,使用如「對談」或「試用」等動詞。
- 不要使用鮮豔、飽和的強調色 —— 畫面截圖顯示為嚴格的單色調色板搭配暖調灰白色背景。
- 不要使用厚重的投影 —— 畫面截圖顯示非常輕微、柔和的陰影來營造深度。
- 不要使用銳利的 90 度角 —— 畫面截圖顯示一致的圓角,即使是按鈕也是如此。
- 不要使用細薄、輕巧的字體作為標題 —— 畫面截圖顯示展示文字與內文文字之間明顯的粗細對比。
- 不要使用寬闊、方塊狀的佈局 —— 留面截圖顯示一個居中、寬敞的佈局,留有大量的空白。
- 不要使用複雜、多彩的漸層 —— 畫面截圖顯示輕微、幾乎是單色的背景變化。
- 避免: 標題中過多術語或過於技術性的語言
- 避免: 削弱決策嚴肅性的俏皮或非正式語言
- 避免: 模糊或被動的措辭
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個為決策工具設計的精緻 SaaS 落地頁,將自身定位為科技領袖的必要系統。視覺識別乾淨且冷靜,建立在暖調灰白色背景(#F5F4EE)上,並使用高對比的墨色(#000000)作為文字。字體使用幾何與人文無襯線字體類別以確保清晰度與親和力。關鍵設計規則包括:1) 維持嚴格的單色調色板,不使用彩色強調色,2) 使用輕柔、細微的陰影和圓角來營造輕盈與專注感,以及 3) 保持佈局居中且寬敞以強調主要訊息。整體感覺是克制、專業的權威感。
en · zh-CN · zh-TW · ja · ko