返回 Gallery

克隆对比

Relay Mailroom · 三栏邮件 DESIGN.md

一个三栏邮件工作区，在文件夹导航、邮件浏览和专注阅读之间保持平衡。

更新于：

这个示例展示了什么

  • 三栏邮件
  • 消息层级
  • 移动端阅读

DESIGN.md

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

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

查看 Google Labs 格式规范
颜色17
字体9
布局与响应式10
组件9

基础样式

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

颜色

17
Action Background
#f1f2f4
Action Background Dark
#242831
Action Foreground
rgb(255, 255, 255)
Action Foreground Dark
#f4f6f8
Control Background
#ffffff
Control Background Dark
#191c22
Surface Canvas
#f7f7f8
Surface Canvas Dark
#111318
Surface Raised
#ffffff
Surface Raised Dark
#191c22
Surface Raised Foreground
#747780
Surface Raised Foreground Dark
#9ca3af
Text Body
#17181b
Text Body Dark
#f4f6f8
Accent 1
rgb(52, 65, 86)
Accent 2
#16885c
Accent 3
#55c995

字体

4
Body
fontSize: 14px

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Display
fontSize: 20px

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

H2
fontSize: 26px

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Body Text
fontSize: 14pxlineHeight: 1.7

沿用页面本身的设计语言

Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

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

文字与背景颜色

1
PatternGuidance
PageUse color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`.

各区域的排版

5
PatternGuidance
Level 1 headingUse font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
Level 2 headingUse font-size `26px`; margin `0px 0px 16px`. When dark mode, use background `#191c22`.
PageUse font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`.
ParagraphUse color `rgb(66, 69, 77)`; line-height `1.7`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Strong textObserved alternatives: - Use color `inherit`. When dark mode, use background `#111318`. - Use color `inherit`. When dark mode, use background `#191c22`. - When dark mode, use background `#111318`. - When dark mode, use background `#191c22`.

间距

5
Step 1
4px
Step 2
8px
Step 3
12px
Step 4
20px
Step 5
28px

圆角

6
Step 1
8px
Step 2
9px
Step 3
10px
Step 4
11px
Step 5
12px
Step 6
14px

阴影

1
rgba(0, 0, 0, 0.2) 0px 8px 24px

布局与响应式

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

PatternGuidance
ArticleUse max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
Complementary contentUse background `#fff`; border-right `1px solid #e3e4e8`; padding `18px 12px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`.
Flex containerUse display `flex`. Observed alternatives: - Use align-items `center`; background `#f7f7f8`; border `1px solid #e3e4e8`; border-radius `12px`; justify-content `space-between`; margin-top `28px`; padding `14px`. When dark mode, use background `#111318`. - Use align-items `center`; color `inherit`; gap `9px`. - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; gap `11px`; margin `22px 0px`. - Use align-items `center`; gap `8px`; margin-left `auto`. - Use border-bottom `1px solid #e3e4e8`; gap `8px`; padding `16px 22px`.
Grid containerUse display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
HeaderUse border-bottom `1px solid #e3e4e8`; padding `18px`.
Main contentUse background `#fff`; min-width `0px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use min-height `100vh`.
NavigationUse display `grid`. Observed alternatives: - Use only the common rules above. - Use gap `4px`.
Page rootUse margin `0px`; min-height `100%`.
PageUse margin `0`; min-height `100%`.
SectionUse background `rgb(251, 251, 252)`; border-right `1px solid #e3e4e8`; min-width `0px`. When dark mode, use background `#111318`. When viewport width <= 900px, use display `none`.

组件与状态

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

组件

6

Paragraph

textColor
rgb(66, 69, 77)

Paragraph Dark Mode

textColor
{colors.action-foreground-dark}

Section

backgroundColor
rgb(251, 251, 252)

Section Dark Mode

backgroundColor
{colors.surface-canvas-dark}

Header

padding
18px

Text Input

rounded
{rounded.step-3}
PatternGuidance
ButtonUse font `inherit`. Observed alternatives: - Use background `#17181b`; border `0px`; border-radius `11px`; color `rgb(255, 255, 255)`; font-weight `750`; margin `18px 0px`; padding `11px`; width `100%`. When dark mode, use background `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; color `#17181b`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; padding `0px 12px`. When dark mode, use background `#242831`; color `#f4f6f8`. - Use background `#f1f2f4`; border `0px`; border-radius `10px`; font-family `inherit`; font-feature-settings `inherit`; font-size `inherit`; font-stretch `inherit`; font-style `inherit`; font-variant `inherit`; font-variation-settings `inherit`; font-weight `650`; line-height `inherit`; min-height `34px`; width `34px`. When dark mode, use background `#242831`. - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `999px`; bottom `14px`; box-shadow `rgba(0, 0, 0, 0.2) 0px 8px 24px`; color `#17181b`; display `grid`; height `36px`; place-items `center`; position `fixed`; right `14px`; width `36px`; z-index `20`. When dark mode, use background `#191c22`; color `#f4f6f8`.
Navigation linkUse color `inherit`. Observed alternatives: - Use background `#f1f2f4`; border-radius `8px`; display `flex`; font-weight `700`; justify-content `space-between`; padding `9px 10px`. When dark mode, use background `#242831`. - Use background `#fff`; border-bottom `1px solid #e3e4e8`; box-shadow `inset 3px 0 #087cf0`; display `grid`; gap `7px`; padding `15px 18px`. When dark mode, use background `#191c22`; box-shadow `inset 3px 0 #55a7ff`. - Use border-bottom `1px solid #e3e4e8`; display `grid`; gap `7px`; padding `15px 18px`. - Use border-radius `8px`; display `flex`; justify-content `space-between`; padding `9px 10px`.
Text inputUse background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.

包含的内容

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

未能捕获的内容

  • The capture does not establish every font-size, font-weight, letter-spacing, line-height, opaque-background value.
  • Some combinations of layout, theme and interaction states could not be established from this capture.
  • Some conditional styles are not described because their affected elements could not be established.
  • 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
  • Grid container: Use display `grid`; grid-template-columns `208px 330px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
  • Article: Use max-width `760px`; padding `38px 42px`. When viewport width <= 900px, use padding `28px 22px`.
  • Level 1 heading: Use font-size `20px`; margin `0px 0px 12px`. When dark mode, use background `#111318`.
  • Text input: Use background `#fff`; border `1px solid #e3e4e8`; border-radius `10px`; font `inherit`; padding `10px 12px`; width `100%`. When dark mode, use background `#191c22`.
  • Action Background: #f1f2f4
  • Spacing: 4px · 8px · 12px · 20px · 28px

用同样的流程开始开发

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

继续浏览 Gallery

Range Field Guide一个使用 Bento 网格组织内容的野外指南，包含实用信息块、环境色提示和可选暗色主题。Block Assembly一个由非对称色块、锐利几何、原色和非常规阅读路径构成的工作室作品集。

提取你自己的网页

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