返回 Gallery

克隆对比

Range Field Guide · Bento 布局 DESIGN.md

一个使用 Bento 网格组织内容的野外指南，包含实用信息块、环境色提示和可选暗色主题。

更新于：

这个示例展示了什么

  • Bento 布局
  • 主题切换
  • 内容层级

DESIGN.md

从当前预览对应的同一个页面中提取出的设计规则。

YAML 保存准确的设计值 · Markdown 说明这些值如何使用

查看 Google Labs 格式规范
颜色4
字体7
布局与响应式6
组件3

基础样式

查看这份文件记录的颜色、排版层级、间距、圆角和阴影。

颜色

4
Surface Canvas
#f2f4ef
Surface Raised
#ffffff
Surface Raised Foreground
#f2f4ef
Accent 1
#c8f55b

字体

2
Body
fontSize: 15pxlineHeight: 1.45

沿用页面本身的设计语言

Arial,sans-serif

Display
lineHeight: .9letterSpacing: -.06em

沿用页面本身的设计语言

Arial,sans-serif

样字使用浏览器可用的字体，准确数值保留在文件中。

各区域的排版

5
PatternGuidance
Level 1 headingUse background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.
Level 2 headingUse background `#fff`; color `#172019`; font-family `Arial,sans-serif`.
PageUse font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.45`.
ParagraphUse font-family `Arial,sans-serif`. Observed alternatives: - Use background `#172019`; color `#f2f4ef`. - Use background `#c8f55b`; color `#172019`. - Use background `#fff`; color `#172019`.
Strong textUse color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.

布局与响应式

只有 DESIGN.md 中存在对应证据时，这里才会显示布局和视口规则。

PatternGuidance
ArticleUse border `1px solid #d4d9d1`; border-radius `18px`; font-family `Arial,sans-serif`; overflow `hidden`; padding `24px`. When viewport width <= 760px, use grid-column `1`; grid-row `auto`. Observed alternatives: - Use background `#172019`; color `#f2f4ef`; display `flex`; flex-direction `column`; grid-column `span 8`; grid-row `span 2`; justify-content `space-between`. When viewport width <= 760px, use min-height `430px`. - Use background `#c8f55b`; color `#172019`; grid-column `span 4`. - Use background `#fff`; color `#172019`; display `grid`; gap `30px`; grid-column `span 8`; grid-template-columns `1fr 1fr`. When viewport width <= 760px, use grid-template-columns `1fr`. - Use background `#fff`; color `#172019`; grid-column `span 4`. - Use background `linear-gradient(135deg,transparent 48%,#d4d9d1 49% 51%,transparent 52%),#fff`; color `#172019`; grid-column `span 4`; grid-row `span 2`. When viewport width <= 760px, use min-height `280px`.
Flex containerUse color `#172019`; display `flex`; font-family `Arial,sans-serif`. Observed alternatives: - Use align-items `center`; gap `20px`. - Use border-top `1px solid #d4d9d1`; justify-content `space-between`; padding `12px 0`.
HeaderUse align-items `center`; color `#172019`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; margin `auto`; max-width `1280px`; padding-bottom `22px`.
Main contentUse background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
PageUse margin `0`.
SectionUse color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.

组件与状态

组件事实汇总同一次页面捕获中可追溯的属性和状态。

组件

2

Main Content

backgroundColor
{colors.surface-canvas}
textColor
#172019
padding
24px

Main Content Viewport Width At Most 760px

padding
14px
PatternGuidance
CheckboxUse color `#172019`; font `inherit`; font-family `Arial,sans-serif`.

包含的内容

查看这份文件已经记录了哪些网站风格。

未能捕获的内容

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
  • Some page-specific relationships and generated decorations could not be summarized as reusable element styles. Use the accompanying source project for those details.

还原难点

不同尺寸的卡片在宽屏上要维持稳定层级，在单列布局中也要形成自然顺序。

使用边界

指南和环境信息仅作展示，不构成安全建议。真实野外产品需要经过核实的数据、离线能力和位置状态。

DESIGN.md

从同一次捕获中提取的设计事实

下载 DESIGN.md
  • Section: Use color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.
  • Main content: Use background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
  • Strong text: Use color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.
  • Checkbox: Use color `#172019`; font `inherit`; font-family `Arial,sans-serif`.
  • Surface Canvas: #f2f4ef
  • Level 1 heading: Use background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.

用同样的流程开始开发

把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。

继续浏览 Gallery

Orbit Desk一个太空运营控制台，包含明暗主题、密集系统读数，以及在小屏上自然收拢的导航。Workshop Manual一个蓝图风格的技术手册，包含编号步骤、CSS 图示和响应式参考面板。

提取你自己的网页

输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。