便当网格（旧版）Bento Grids (Legacy)
初代便当布局：等大圆角卡片 + 柔和阴影，对比度与排版弹性弱于新版 Bento Box Grid。保留用于复刻旧项目。
典型场景旧版产品官网（已弃用）
编号53
年代2020s Apple/Linear
复杂度Low
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
初代便当布局：等大圆角卡片 + 柔和阴影，对比度与排版弹性弱于新版 Bento Box Grid。保留用于复刻旧项目。
关键词
Apple-stylemodularcardsorganizedcleanhierarchygridroundedsoft
效果与动效
Hover scale (1.02), soft shadow expansion, smooth layout shifts, content reveal
设计系统变量
--grid-gap20px--card-radius24px--card-bg#FFFFFF--page-bg#F5F5F7--shadowsoft配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Off-white #F5F5F7, Clean White #FFFFFF, Text #1D1D1F
辅色 / Secondary
Subtle accents, soft shadows, blurred backdrops
强调色在页面底色上的对比度约 4.3:1，适合大字与图形，正文需另配深色。
适用场景
适合 / Best For
- Product features
- dashboards
- personal sites
- marketing summaries
- galleries
避开 / Do Not Use For
- Long-form reading
- data tables
- complex forms
框架兼容
css-gridtailwind
能力矩阵
浅色模式支持
深色模式支持
移动适配可适配
转化导向强High
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Grid layout (CSS Grid),
- Rounded corners 16-24px,
- Varied card spans,
- Content fits card size,
- Responsive re-flow,
- Apple-like aesthetic
CSS / 技术关键词
display: grid, grid-template-columns: repeat(auto-fit, minmax(...)), gap: 1rem, border-radius: 20px, background: #FFF, box-shadow: subtle
该条目在上游数据中标记为已弃用，插件检索默认排除；查询中包含
legacy 或 deprecated 时才会召回。AI 提示词
Design a Bento Grid layout. Use: modular grid system, rounded corners (16-24px), different card sizes (1x1, 2x1, 2x2), card-based hierarchy, soft backgrounds (#F5F5F7), subtle borders, content-first, Apple-style aesthetic.