精選 · 開放 · 免費
July Fund
一個風格精緻、編輯風的創投基金網站,採用大型襯線展示字體與簡潔的卡片式佈局。
EditorialCurationCleanRefinedConsumer
01
設計氣質 DNA
創投投資編輯風格精緻策展
一本融合經典編輯排版與簡潔數位卡片佈局的現代策展投資手記。
02
色彩
#56D270Accent
#433E3CInk
#EEE7E5BG
#F0E7E4BG soft
#9A9390Muted
rgba(67, 62, 60, 0.1)Line
溫暖、柔和的中性色調,搭配單一明亮的綠色作為互動元素與標籤的強調色。
03
字型
didone-serif · humanist-sans
- display
56px · 400 - h2
36px · 400 - body
16px · 400 - small
10px · 700
小型 UI 元素與徽章使用大寫字母搭配寬字距。 · 內文保持高度易讀性,行高充裕。 · 大型 didone 衬線字體僅保留用於主要展示文字。
04
間距
4px
8px
12px
16px
20px
24px
32px
40px
60px
以 4px 為基準單位,確保所有卡片組件的內距一致。
05
表面 (圓角 / 陰影 / 邊線)
sm · 8px
md · 12px
lg · 20px
pill · 999px
卡片無可見硬邊框;透過背景對比與寬裕的圓角營造深度感。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面端採用多欄類瀑布流卡片網格,手機端則堆疊為單欄。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
懸停時的 CSS background-color 與 transform 過渡 · 頁面揭曉時的流暢 opacity 過渡
背景色彩過渡與細微的元素位移。 · 所有互動元素採用標準游標指標交互。
08
組件
- button 膠囊形按鈕,採用大寫文字、1px 邊框與透明背景。
- card 圓角容器,具有細微的背景色調變化(例如:淺色與深色模式卡片),文字居中。
- chip 小型、鮮豔色調(綠色或紫色)的膠囊形徽章,採用大寫且字距寬鬆的文字。
- input 在提供的視圖中並未顯著呈現。
- hero 大型襯線字標置中於簡短描述段落之上,背景為溫暖的中性色。
09
文案語氣與禁用清單
- 語氣 權威且平易近人,融合高端金融與現代科技感。
- 標題風格 大型經典襯線字標與小寫新聞標題。
- 按鈕文案 低調、大寫、膠囊形按鈕搭配細邊框。
- 勿使用尖銳方形邊角 — 螢幕截圖顯示卡片採用寬裕的 20px 圓角。
- 勿將內文全部大寫 — 螢幕截圖顯示大寫僅保留用於小型徽章與日期。
- 勿使用厚重的陰影效果 — 螢幕截圖顯示平面表面透過背景色調對比定義。
- 勿使用冷調、臨床感的藍色調色盤 — 螢幕截圖使用溫暖、大地感的中性色與綠色強調色。
- 勿使用 grotesque-sans 字體作為展示文字 — 螢幕截圖使用經典 didone 衬線字體。
- 勿使用高對比、多色漸層 — 螢幕截圖使用純色背景與偶爾的柔和圖片紋理。
- 避免: 避免使用多種競爭色調造成介面雜亂。
- 避免: 避免使用現代無襯線字體作為主要標題。
- 避免: 避免使用尖銳、方形的容器邊角。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(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
此設計系統代表一個風格精緻、編輯風的創投基金網站。它以溫暖、柔和的中性色調為核心(#EEE7E5 背景、#433E3C 墨色),搭配鮮明的綠色強調色(#56D270)用於狀態徽章與標籤。排版以大型優雅的 didone 衬線字體主導展示元素,內文則使用簡潔的 humanist-sans 字體。佈局建基於卡片式網格,採用寬裕的 20px 圓角,依賴背景色調變化而非陰影來營造深度感。按鈕設計低調、呈膠囊形且為大寫。關鍵禁忌:勿使用尖銳邊角、勿施加厚重陰影,且勿使用現代無襯線字體作為大型展示標題。
en · zh-CN · zh-TW · ja · ko