Clone comparison

Atlas Dispatch · Operations dashboard DESIGN.md

A dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.

Updated: September 13, 2026

What this example demonstrates

Preview

DESIGN.md

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

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

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

The page must keep many live-looking signals readable without flattening its hierarchy or letting the wide table break the mobile layout.

The data is illustrative and the static clone does not connect to a dispatch backend. Review table overflow and real data states before product use.

DESIGN.md

Grid container: Use display `grid`. Observed alternatives: - Use gap `15px`. - Use gap `7px`. - Use grid-template-columns `232px minmax(0px, 1fr)`; min-height `100vh`. When viewport width <= 900px, use grid-template-columns `1fr`.
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`.
Level 1 heading: Use font-size `19px`; margin `0px`. When viewport width <= 520px, use font-size `16px`.
Table row: When viewport width <= 520px, use font-size `12px`.
Success: #16885c
Spacing: 4px · 8px · 12px · 16px

Turn your public webpage into a project, then give the source and DESIGN.md to your coding tool. These guides walk through the steps.

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.