精選 · 開放 · 免費
Cubitts
一個精緻的英國眼鏡品牌，將鏡框提升至手工藝品的境界。
EditorialProductTypographyCleanCuration
01
設計氣質 DNA
工藝傳承精準英國
眼鏡界的訂製裁縫，融合現代極簡主義與傳統工藝精神。
02
色彩
#0B0B0BInk
#FFFFFFBG
#F5F5F5BG soft
#7A7575Muted
rgba(11,11,11,0.15)Line
高對比極簡主義，以黑色墨調為空間基調，溫潤灰色則提供細微的深度感。
03
字型
geometric-sans
- display
32px · 400 - body
16px · 400 - caption
12px · 400
標題使用標準句首大寫，字母間距適中。 · 內文維持一致的 400 字重以確保可讀性。 · 小字體僅用於法律免責聲明與功能標籤。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
採用靈活的 4px 基準網格，並根據不同版面密度調整為 64px 與 12px 的間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 24px
lg · 32px
pill · 999px
以 1px 的細實線邊框（#0B0B0B 或 #D8D8D8）來界定輸入框與互動區域。
0px 0px 30px 0px rgba(0, 0, 0, 0.15)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
採用乾淨的 12 欄網格，優先確保充裕的留白與置中的內容區塊。
07
動效與互動
220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
運用流暢的透明度與背景色彩過渡效果，作為互動回饋。 · 基於變換（Transform）的動畫，用於較大規模的結構性變化。
按鈕在懸停時，背景色產生細微變化或色彩反轉。 · 點擊時立即提供視覺回饋，例如背景變暗或結構性位移。
08
組件
- button 藥丸形或圓角矩形按鈕，搭配黑色背景與白色文字。
- card 無邊框的乾淨容器，透過細微的背景變化（#F5F5F5）來分組內容。
- 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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計系統代表一個融合極簡主義與傳承的精緻英國眼鏡品牌（Cubitts）。視覺語言以 #0B0B0B 墨色在 #FFFFFF 背景上的高對比單色調為基調，#F5F5F5 用於柔和的表面，#7A7575 用於柔和的功能性文字。主要排版採用幾何無襯線字體（Fold Grotesque），以 400 字重廣泛用於標題與內文。版面佈局依賴充裕的留白與 12 欄網格。關鍵的禁忌包括：避免裝飾性襯線字體、避免使用鮮豔的多色調色盤、避免在互動元件上使用銳利的直角。此系統透過克制與精準的間距，強調一種高端、精選的質感。
en · zh-CN · zh-TW · ja · ko