bento-grid-ui

Bento Grid UI

當每個想法都有其專屬區塊，且這些區塊緊密排列成一個整齊的規則網格時，頁面最容易掃讀。

一個由混合跨度的圓角矩形格子組成的網格，每個格子容納一個想法，格子之間有均等的小間距。Apple 的產品頁面從 2022 年起使其成為預設的產品佈局。

時期： 2022–至今 · 年代： 當代與空間 · 領域： 圖形與 UI 設計 · 別名： Bento 佈局、Bento Box 網格、Modular Card 網格

何時載入此技能

在使用者要求以下內容時載入：「bento」、「bento grid」、「bento box layout」、「card grid」、「feature grid」、「modular cards」、「apple-style features」、「tiled layout」、「dashboard tiles」。

適用於：產品特色頁面、SaaS 登陸頁、個人作品集、應用程式儀表板、版本說明頁面。

以下情況不要使用：

• 內容是長篇散文，因為最多 30 字的格子會把論述切成片段。
• 項目有嚴格的順序或排名，需要讀者從上到下依序閱讀。
• 內容不均勻或稀疏，因為少於 5 個格子的網格會留下明顯的空洞。

系統指令

生成 Bento Grid UI 的 UI 或圖形佈局時，你必須：

1. 將頁面劃分為 4 欄或 12 欄的網格，讓每個格子跨越 1、2 或 3 欄以及 1 或 2 列。
2. 在所有格之間保持 12px 到 16px 的統一間距，且絕不混合間距大小。
3. 每個格子的圓角半徑設為 20px 到 28px，並對頁面上所有格子使用相同的半徑。
4. 每個格子放入一個訊息：最多 8 個字的標題、一個視覺元素或一個數字。
5. 特色格設為 2x2，其他格填滿 1x1 或 2x1，讓大小顯示重要性順序。
6. 用同一色系的 2 到 4 種色調填滿格子，再加上一到兩個強調色的格子。
7. 將格子內容對齊到相同的 24px 內邊距，文字錨定在左上角或左下角。

護欄

以下每一行都會破壞風格。在回傳輸出前，請對照這個清單檢查。

• 絕對不要： 網格中不同格子之間使用不同大小的間距。
• 絕對不要： 網格中出現破壞矩形完整性的空洞。
• 絕對不要： 同一頁面上不同格子使用不同的圓角半徑。
• 絕對不要： 一個格子中放入多個訊息或行動呼籲。
• 絕對不要： 第一個視口內超過 8 個格子。
• 絕對不要： 使用會與拼接效果衝突的粗邊框或硬陰影。
• 絕對不要： 格子內出現超過 30 字的段落。

向量配置

軸線	分數	1 表示	5 表示
裝飾性	■■□□□ 2/5	純粹極簡	極繁主義
維度	■■□□□ 2/5	嚴格 2D	全 3D / 空間
格線剛性	■■■■■ 5/5	混亂 / 有機	嚴格的數學網格
擬物寫實	■■□□□ 2/5	抽象數位	照片級寫實材質
字體表現力	■■■□□ 3/5	中性 / 不可見	實驗性 / 插畫

維持這些分數。如果某個要求使任一軸線移動 2 分或更多，你已離開此風格：請前往「系譜備用方案」。

空間與網格邏輯

• 網格機制： 桌面上 4 欄網格，間距 16px，列高 200px 到 280px；格子跨度 1 到 3 欄以及 1 到 2 列；在 768px 以下收縮為 1 或 2 欄。
• 空白比例： 間距佔面積的 5–8%；空白空間移至格子內部，內邊距為 24px 到 32px；間距比例為 8、12、16、24、32 和 64px。
• 對齊規則： 格子邊緣在兩個軸向上對齊網格；格子內文字向左對齊，並錨定在頂部或底部；整個 bento 區塊在寬度 1120px 到 1280px 的容器中置中。
• 容器幾何： 格子為圓角矩形，半徑 24px，無外邊距；格子寬高比為 1:1、2:1 和 1:2，內部的視覺元素裁剪為相同半徑。

字體排印

• 分類： 新無襯線體 · 幾何無襯線體
• 字距： 顯示大小使用 -0.03em；正文保持 0；小標題使用 +0.01em。
• 行高： 顯示 1.05 到 1.15；正文 1.45；標題 1.3。
• 層級規則：
  • 特色格標題設為 40px 到 56px，其他標題設為 20px 到 28px，小標題設為 14px。
  • 標題使用粗細 600，小標題使用 400；次要行使用對比度 4.5:1 的柔和顏色。
  • 標題限制在 8 個字以內，小標題限制在 20 個字以內，因為格子空間有限。
  • 為每個關鍵指標配對一個 64px 或更大的大數字與 14px 的小標題。

字體搭配

顯示字體	正文字體	備註
Inter Tight	Inter	緊湊的顯示大小，適合簡短的格子標題。
Geist	Geist	單一字體系列，粗細 400、500 和 600。
Plus Jakarta Sans	Inter	更溫暖的顯示字體，適合消費性產品。

色彩與燈光

• 色板結構： 中性頁面，格子使用同一色系的 2 到 4 種低飽和度色調，以及一兩個覆蓋約 15% 網格的強調色格子。
• 對比規則： 墨色在格子上約為 17:1，石墨色在格子上約為 5:1；白色文字在強調藍色上約為 4.7:1，符合 WCAG AA 正文標準；保持每對格子之間的對比度在 4.5:1 或更高。
• 表面處理： 平面或接近平面的填充；格子可以包含照片、產品渲染圖或兩種相近色調的漸層；一個格子絕不混合多種表面類型。
• 光線與陰影： 大多無陰影；可選用 0 1px 2px rgba(0, 0, 0, 0.06) 的陰影或 1px rgba(0, 0, 0, 0.06) 的邊框，將白色格子與頁面區分開來。

色板

名稱	十六進位	角色
頁面	#F5F5F7	頁面背景
格子	#FFFFFF	預設格子填充
格子色調	#E8E8ED	次要格子填充
墨色	#1D1D1F	文字
石墨色	#6E6E73	次要文字
強調藍色	#0071E3	強調色格子和連結
暗色	#000000	暗色格子填充

材質與紋理

• 表面模擬： 無；格子看起來像是漆器餐盒的隔間，但表面是純色或圖像，不模仿任何材質。
• 邊框規則： 預設無邊框；當白色格子位於白色頁面時，使用 1px solid rgba(0, 0, 0, 0.06) 的邊框；深色模式使用 1px rgba(255, 255, 255, 0.1)。
• 模糊與高度： 預設模糊為 0px；高度限制為頁面上的 0 1px 2px 陰影和懸停時的 0 12px 32px rgba(0, 0, 0, 0.12) 抬升。

裝飾與圖示

• 圖示： 簡單圖示，線條粗細 1.5px 到 2px，圓形端點，尺寸 24px 到 32px，顏色為墨色或在強調色格子上為白色；每個格子最多一個圖示。
• 插圖： 產品渲染圖、UI 截圖和大數字，裁剪至格子圓角半徑；抽象漸層填滿空白格子。
• 裝飾元素： 2x2 特色格 · 超大指標數字 · UI 截圖裁剪 · 藥丸標籤 · 漸層格子

動畫與互動

• 天生為螢幕而生： 是
• 過渡物理： 格子以 40ms 到 60ms 的間隔依次進入，淡入並上升 12px；懸停時格子縮放至 1.02，陰影加深；相鄰格子不移動。
• 緩動函數： cubic-bezier(0.25, 0.1, 0.25, 1)
• 持續時間（毫秒）： 350
• 懸停與啟用： 懸停將格子縮放至 1.02，並添加 0 12px 32px rgba(0, 0, 0, 0.12) 的陰影；啟用時縮放至 0.98；聚焦時添加 2px 的強調藍色環，偏移 2px。

程式碼與 Token 入門

在根元素上設定 data-style="bento-grid-ui" 並貼上 token。檔案 tokens.css 包含相同的 token 和一組參考規則。

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Tailwind 模式：

元素	類別
頁面	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
網格	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
卡片	rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]
特色卡片	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
標題	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

視覺素材包

此風格的圖片和圖示為檔案。請照原樣使用，或將其視為規格並以相同的視覺語言自行繪製。

檔案	內容
pack/hero.svg	主視覺模板，800x600。以該風格視覺語言繪製的抽象圖片。
pack/pattern.svg	圖案磁磚，80x80。可向兩個方向重複。
pack/icons.svg	圖示集合：home、search、heart、star、bell、user、mail、calendar、image、bolt、play、check、close、sliders。

• 圖示： 輪廓線，在 24px 網格上線條粗細 1.75，圓形端點，圓形接合，容器：圓角。用法：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。圖示使用 currentColor。
• 圖示系列： 該集合取自 Lucide (Regular)，作者為 Lucide Contributors，授權 ISC。原因：單一粗細的簡單圓形線條：在格子中不顯眼，是當前產品介面的預設風格。它是示範用途的開源替代品。對於產品，請使用品牌的圖示庫，並根據以下規則選擇系列。
• 顯示字體： 粗細 600，字距 -0.03em，行高 1.05，大小寫：無。
• 粗細： 顯示 600，副標題 500，正文 400，文字中的粗體 600，標籤和按鈕 500。該風格僅使用 3 種粗細（400、500、600），無其他。顯示比正文重 200。強調是大小：較大的字就是強調，因此粗細保持少量。
• 正文字體： 16px，行高 1.5。
• 頁面： 主視覺堆疊，左對齊，緊湊密度，強調傾斜 0°。
• 文字顏色： --color-text 僅用於主要閱讀區域。在每個區域上，使用其對應的 token：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何選擇圖示包

圖示包是圖片的字體。請以與選擇文字字體相同的謹慎態度來選擇它。這些規則同時適用於開源套件和授權庫。

1. 線條粗細與字幹匹配。 在文字大小下將圖示放在正文旁邊。圖示的線條寬度與字母的字幹粗細相同。
2. 端點和角點遵循半徑 token。 平頭端點和斜角接合用於半徑為零的情況。圓形端點和圓形接合用於較小的圓角半徑。
3. 填充模式遵循時代技術。 印刷時代使用實心形狀。具有深度的螢幕時代填充並為形狀添加陰影。當前的產品介面繪製輪廓線。
4. 隱喻不比風格年輕。 每個圖片都是該時代已知的物體。使用較晚時代隱喻的圖示會破壞時代感。
5. 一個系列，一個網格。 所有圖示來自同一個系列和變體，繪製在同一個網格上。請勿在同一表面上混合系列。
6. 該系列涵蓋產品。 在決定之前，列出產品所需的每個概念。如果某個系列缺少其中任何一個圖示，就是錯誤的系列。
7. 顏色是一個 token。 圖示使用 currentColor。第二種色調來自 token，而非檔案。
8. 授權允許使用。 閱讀套件的授權條款。在授權要求的地方提供署名。具有品牌的產品使用其授權庫，並應用相同的規則來選擇系列。

系譜備用方案

當使用者要求變體時，請勿即興創作。逐步轉向此處命名的相鄰風格，並載入其技能。

• 如果使用者要求更有條理：轉向 swiss-international（瑞士國際風格）。將圓角半徑設為 0px，移除格子填充，並用 1px 的規則線條分隔格子；保留 12 欄網格和字體比例。

• 如果使用者要求更玻璃質感：轉向 glassmorphism（玻璃態）。用 rgba(255, 255, 255, 0.18) 填充格子，並在漸層頁面上使用 backdrop-filter blur(20px)；保留間距和圓角半徑。

• 如果使用者要求更大膽：轉向 neo-brutalism-ui（新粗獷主義 UI）。添加 3px 黑色邊框和 4px 4px 0 0 #000000 的陰影，並用鮮豔的平塗色調填充格子；保留網格和 16px 間距。

• 如果使用者要求更平面：轉向 flat-design（平面設計）。移除陰影和邊框，使用無照片的實心格子填充；保留 24px 圓角半徑和間距。

• 源自（如需更正統的版本請前往）： flat-design、swiss-international

• 與以下風格搭配良好： glassmorphism、swiss-international

• 向量配置最接近： bauhaus、material-design、swiss-international

情感目標

有序的好奇心：觀看者覺得產品組織良好、緊湊，且能在幾秒鐘內輕鬆掃讀。

關鍵字

...

[截斷以利翻譯]