Clone comparison
Tide Ledger · Finance dashboard DESIGN.md
A financial overview built from compact account summaries, CSS-rendered charts, and a transaction ledger with clear numeric alignment.
Updated:
What this example demonstrates
- Finance dashboard
- CSS charts
- Transaction table
DESIGN.md
The design rules extracted from the same page as this preview.
YAML contains exact design values · Markdown explains how to use them
Colors15
Typography7
Layout and responsive10
Components8
Foundations
The palette, type hierarchy, spacing, corners, and depth recorded in this file.
Colors
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
#16885cTypography
3Body
fontSize: 14px
Build from the page's own design language
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Display
fontSize: 19px
Build from the page's own design language
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
H2
fontSize: 15px
Build from the page's own design language
Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Samples use fonts available in your browser. Exact values remain in the file.
Text and surface colors
1| Pattern | Guidance |
|---|---|
| Page | Use color `#17181b`. When dark mode, use background `#111318`; color `#f4f6f8`. |
Typography by region
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`. |
Spacing
4Step 1
8pxStep 2
12pxStep 3
16pxStep 4
20pxCorner radius
6Step 1
8pxStep 2
9pxStep 3
10pxStep 4
11pxStep 5
12pxStep 6
14pxShadows
2rgba(0, 0, 0, 0.03) 0px 1px 2pxrgba(0, 0, 0, 0.2) 0px 8px 24pxLayout and responsive
Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.
| 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`. |
Components and states
Component facts group the properties and states that were traced to the same page capture.
Components
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)`. |
What is included
See which parts of the website style are included in this file.
What could not be captured
- 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.
Recreation challenge
Financial pages rely on precise alignment and restrained emphasis. Charts and tabular figures must stay legible without turning the page into a wall of cards.
Limits of this example
Values and charts are static examples, not financial data. Add localization, currency rules, and accessible chart alternatives for a real product.
DESIGN.md
Design facts from the same capture
Download 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
Use this workflow for your own page
Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.
More from Gallery
Extract your own webpage
Enter a public page you own or have permission to use. Get a Tailwind CSS v4 project and DESIGN.md. Your URL is kept when you sign in.