克隆对比
Tide Ledger · 财务看板 DESIGN.md
一个财务概览页面，由紧凑的账户摘要、CSS 图表和数字对齐清晰的流水表组成。
更新于：
这个示例展示了什么
- 财务看板
- CSS 图表
- 流水表格
DESIGN.md
从当前预览对应的同一个页面中提取出的设计规则。
YAML 保存准确的设计值 · Markdown 说明这些值如何使用
颜色15
字体7
布局与响应式10
组件8
基础样式
查看这份文件记录的颜色、排版层级、间距、圆角和阴影。
颜色
15Action Background
#f1f2f4Action Background Dark
#242831Action Foreground
#17181bAction Foreground Dark
#f4f6f8Surface Canvas
#f7f7f8Surface Canvas Dark
#111318Surface Raised
#ffffffSurface Raised Dark
#191c22Surface Raised Foreground
#747780Surface Raised Foreground Dark
#9ca3afText Body
#17181bText Body Dark
#f4f6f8Accent 1
#087cf0Accent 2
#55a7ffAccent 3
#16885c字体
3Body
fontSize: 14px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Display
fontSize: 19px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
H2
fontSize: 15px
沿用页面本身的设计语言
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
样字使用浏览器可用的字体，准确数值保留在文件中。
文字与背景颜色
1| Pattern | Guidance |
|---|---|
| Page | Use color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`. |
各区域的排版
4| Pattern | Guidance |
|---|---|
| Level 1 heading | Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`. |
| Level 2 heading | Use font-size `15px`; margin `0px`. When dark mode, use background `#191c22`. |
| Page | Use font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `14px`. |
| Strong text | Observed alternatives: - Use color `#16885c`; font-size `11px`; font-weight `700`. When dark mode, use background `#191c22`; color `#55c995`. - When dark mode, use background `#191c22`. - When dark mode, use background `#242831`. |
间距
4Step 1
8pxStep 2
12pxStep 3
16pxStep 4
20px圆角
6Step 1
8pxStep 2
9pxStep 3
10pxStep 4
11pxStep 5
12pxStep 6
14px阴影
2rgba(0, 0, 0, 0.03) 0px 1px 2pxrgba(0, 0, 0, 0.2) 0px 8px 24px布局与响应式
只有 DESIGN.md 中存在对应证据时，这里才会显示布局和视口规则。
| Pattern | Guidance |
|---|---|
| Article | Use border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`. Observed alternatives: - Use background `#fff`; min-width `0px`; padding `18px`. When dark mode, use background `#191c22`. When viewport width <= 520px, use padding `14px`. - Use background `rgb(16, 18, 22)`; color `rgb(255, 255, 255)`; padding `22px`. |
| Complementary content | Use background `#fff`; border-right `1px solid #e3e4e8`; display `flex`; flex-direction `column`; gap `22px`; padding `18px 14px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`. |
| Flex container | Use display `flex`. Observed alternatives: - Use align-items `center`; background `#f1f2f4`; border-radius `10px`; justify-content `space-between`; padding `12px`. When dark mode, use background `#242831`. - Use align-items `center`; font-weight `750`; gap `10px`. When dark mode, use background `#191c22`. - Use align-items `center`; gap `10px`. - Use align-items `center`; gap `12px`; justify-content `space-between`; margin-bottom `16px`. - Use align-items `center`; gap `8px`; margin-left `auto`. - Use align-items `end`; gap `8px`; height `170px`; padding-top `20px`. - Use color `rgb(255, 255, 255)`; gap `8px`. |
| Grid container | Use display `grid`. Observed alternatives: - Use only the common rules above. - Use align-items `center`; border-top `1px solid #e3e4e8`; gap `11px`; grid-template-columns `40px 1fr auto`; padding `13px 0px`. - Use gap `10px`. - Use grid-template-columns `232px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`. |
| Header | Use align-items `center`; background `rgba(255, 255, 255, 0.94)`; border-bottom `1px solid #e3e4e8`; display `flex`; gap `12px`; min-height `66px`; padding `12px 24px`; position `sticky`; top `0px`; z-index `2`. When dark mode, use background `rgba(25, 28, 34, 0.94)`. When viewport width <= 900px, use padding `11px 16px`. |
| Main content | Use display `grid`; gap `16px`; margin `0px auto`; padding `18px 24px 40px`; width `min(100%, 1280px)`. When viewport width <= 900px, use padding `14px 16px 32px`. |
| Navigation | Use display `grid`; gap `5px`. |
| Page root | Use margin `0px`; min-height `100%`. |
| Page | Use margin `0`; min-height `100%`. |
| Section | Observed alternatives: - Use background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`; min-width `0px`; padding `18px`. When dark mode, use background `#191c22`. When viewport width <= 520px, use padding `14px`. - Use display `grid`; gap `16px`; grid-template-columns `1.2fr 0.8fr`. When viewport width <= 900px, use grid-template-columns `1fr`. - Use display `grid`; gap `16px`; grid-template-columns `minmax(0px, 1.55fr) minmax(280px, 0.7fr)`. When viewport width <= 520px, use gap `12px`. When viewport width <= 900px, use grid-template-columns `1fr`. |
组件与状态
组件事实汇总同一次页面捕获中可追溯的属性和状态。
组件
4Link
- rounded
- {rounded.step-2}
Rounded Surface
- rounded
- {rounded.step-3}
- height
- 230px
Header
- backgroundColor
- rgba(255, 255, 255, 0.94)
Header Dark Mode
- backgroundColor
- rgba(25, 28, 34, 0.94)
| Pattern | Guidance |
|---|---|
| Button | Use font `inherit`. Observed alternatives: - Use background `#087cf0`; border `0px`; border-radius `10px`; color `white`; 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 14px`. When dark mode, use background `#55a7ff`. When viewport width <= 520px, use padding `0px 10px`. - 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`; 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`. When viewport width <= 900px, use display `none`. - 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`. - Use background `rgb(239, 239, 239)`; border `0px`; border-radius `10px`; color `rgb(0, 0, 0)`; 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 `700`; line-height `inherit`; padding `9px 13px`. |
| Link | Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. When dark mode, use background `#191c22`. |
| Navigation link | Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. Observed alternatives: - Use background `#f1f2f4`; font-weight `700`. When dark mode, use background `#242831`. - When dark mode, use background `#191c22`. |
| Rounded surface | Use background `linear-gradient(rgb(234, 245, 255), transparent), repeating-linear-gradient(0deg, transparent 0px, transparent 45px, rgb(233, 234, 238) 46px)`; border-radius `10px`; height `230px`. When dark mode, use background `linear-gradient(180deg,#242831,transparent),repeating-linear-gradient(0deg,transparent 0 45px,#e3e4e8 46px)`. |
包含的内容
查看这份文件已经记录了哪些网站风格。
未能捕获的内容
- 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- Complementary content: Use background `#fff`; border-right `1px solid #e3e4e8`; display `flex`; flex-direction `column`; gap `22px`; padding `18px 14px`. When dark mode, use background `#191c22`. When viewport width <= 900px, use display `none`.
- Main content: Use display `grid`; gap `16px`; margin `0px auto`; padding `18px 24px 40px`; width `min(100%, 1280px)`. When viewport width <= 900px, use padding `14px 16px 32px`.
- Level 1 heading: Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`.
- Link: Use align-items `center`; border-radius `9px`; color `inherit`; display `flex`; gap `10px`; padding `9px 10px`. When dark mode, use background `#191c22`.
- Action Background: #f1f2f4
- Spacing: 8px · 12px · 16px · 20px
用同样的流程开始开发
把你的公开网页转换成项目，再将源码和 DESIGN.md 交给编程工具继续修改。下方指南介绍了具体步骤。
继续浏览 Gallery
提取你自己的网页
输入你拥有或获准使用的公开网页，获取 Tailwind CSS v4 项目和 DESIGN.md。登录后会保留你的网址。