Back to Gallery

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

Code-driven rebuild

Reads the page structure and CSS directly, then builds a clean Tailwind CSS v4 project.

Complete page assets

Keeps layouts, variables, and assets in a safe static preview.

Responsive layouts

Light and dark themes

Change the device width or theme and both previews show the same state. Webpages scroll together, while each HTML pane scrolls on its own.

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

Atlas DispatchA dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.Workshop ManualA technical workshop manual with blueprint styling, numbered procedures, CSS diagrams, and responsive reference panels.

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.