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:
What this example demonstrates
- Operations dashboard
- Dense data views
- Responsive tables
DESIGN.md
The design rules extracted from the same page as this preview.
YAML contains exact design values · Markdown explains how to use them
Colors17
Typography8
Layout and responsive11
Components15
Foundations
The palette, type hierarchy, spacing, corners, and depth recorded in this file.
Colors
17Success
#16885cSuccess Dark
#55c995Action 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
#b76b11Typography
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
5| 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 | When dark mode, use background `#191c22`. Observed alternatives: - Use only the common rules above. - Use text-align `left`; white-space `nowrap`. When viewport width <= 520px, use font-size `12px`. |
| Table heading | Use border-top `1px solid #e3e4e8`; color `#747780`; font-size `11px`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When dark mode, use background `#191c22`; color `#9ca3af`. Observed alternatives: - Use only the common rules above. - When dark mode and viewport width <= 520px and sibling position 3, use border-top `1px solid #e3e4e8`; color `#9ca3af`; font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; font-size `11px`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When viewport width <= 520px and sibling position 3, use display `none`. |
Spacing
4Step 1
4pxStep 2
8pxStep 3
12pxStep 4
16pxCorner radius
6Step 1
8pxStep 2
9pxStep 3
10pxStep 4
11pxStep 5
12pxStep 6
14pxShadows
3rgba(0, 0, 0, 0.03) 0px 1px 2pxrgba(0, 0, 0, 0.07) 0px 1px 3pxrgba(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 background `#fff`; border `1px solid #e3e4e8`; border-radius `14px`; box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px`. When dark mode, use background `#191c22`. Observed alternatives: - Use min-width `0px`; padding `18px`. When viewport width <= 520px, use padding `14px`. - Use padding `16px`. When viewport width <= 520px, use padding `13px`. |
| Column container | Use color `#747780`; display `flex`; flex-direction `column`; font-size `9px`; inset `17px auto 32px 9px`; justify-content `space-between`; position `absolute`. When dark mode, use color `#9ca3af`. |
| 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`; 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`. When viewport width <= 520px, use align-items `flex-start`; flex-direction `column`. - Use align-items `center`; gap `12px`; justify-content `space-between`; margin-bottom `16px`. - Use align-items `center`; gap `8px`; justify-content `space-between`. - Use align-items `center`; gap `8px`; margin-left `auto`. - Use bottom `8px`; color `#747780`; font-size `9px`; justify-content `space-between`; left `35px`; position `absolute`; right `10px`. When dark mode, use color `#9ca3af`. - Use color `#747780`; font-size `9px`; gap `12px`; position `absolute`; right `14px`; top `10px`. When dark mode, use color `#9ca3af`. - Use justify-content `space-between`. |
| 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`. |
| 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%`. |
Components and states
Component facts group the properties and states that were traced to the same page capture.
Components
5Link
- rounded
- {rounded.step-2}
Tab List
- rounded
- {rounded.step-4}
- padding
- 4px
Header
- backgroundColor
- rgba(255, 255, 255, 0.94)
Header Dark Mode
- backgroundColor
- rgba(25, 28, 34, 0.94)
Image
- backgroundColor
- rgb(251, 252, 254)
- rounded
- {rounded.step-3}
- height
- 230px
| 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`; 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`. |
| Image | Use background `rgb(251, 252, 254)`; border-radius `10px`; height `230px`; overflow `hidden`; padding `8px 8px 26px 34px`; position `relative`. |
| 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 | Observed alternatives: - Use background `#087cf0`; border-radius `inherit`; height `100%`. When dark mode, use background `#55a7ff`. - Use background `#f1f2f4`; border-radius `999px`; height `7px`; overflow `hidden`. When dark mode, use background `#242831`. |
| Tab list | Use background `#f1f2f4`; border-radius `11px`; display `flex`; gap `4px`; padding `4px`. When dark mode, use background `#242831`. |
| Table cell | Use border-top `1px solid #e3e4e8`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When viewport width <= 520px, use font-size `12px`. Observed alternatives: - Use only the common rules above. - When dark mode and viewport width <= 520px and sibling position 3, use border-top `1px solid #e3e4e8`; color `#f4f6f8`; font-family `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`; padding `12px 10px`; text-align `left`; white-space `nowrap`. When dark mode, use background `#191c22`. When viewport width <= 520px and sibling position 3, use display `none`; font-size `12px`. - When dark mode, use background `#191c22`. |
| Table row | When viewport width <= 520px, use font-size `12px`. |
| Table | Use border-collapse `collapse`; width `100%`. When viewport width <= 520px, use font-size `12px`. |
| Vector graphic | Use display `block`; height `100%`; max-width `100%`; overflow `visible`; width `100%`. |
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
The page must keep many live-looking signals readable without flattening its hierarchy or letting the wide table break the mobile layout.
Limits of this example
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
Design facts from the same capture
Download 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
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.