Clone comparison
Range Field Guide · Bento layout DESIGN.md
A field guide organized as a bento grid with practical content blocks, environmental color cues, and an optional dark theme.
Updated:
What this example demonstrates
- Bento layout
- Theme switch
- Content hierarchy
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
Cards of different size need a stable hierarchy on wide screens and a natural sequence when the grid becomes one column.
Limits of this example
Guidance and conditions are illustrative, not safety advice. A real field product needs verified data, offline behavior, and location-aware states.
DESIGN.md
Design facts from the same capture
Download DESIGN.md- Section: Use color `#172019`; display `grid`; font-family `Arial,sans-serif`; gap `14px`; grid-auto-rows `minmax(150px,auto)`; grid-template-columns `repeat(12,1fr)`; margin `auto`; max-width `1280px`. When viewport width <= 760px, use grid-template-columns `1fr`.
- Main content: Use background `#f2f4ef`; color `#172019`; font-family `Arial,sans-serif`; min-height `100vh`; padding `24px`. When viewport width <= 760px, use padding `14px`.
- Strong text: Use color `#172019`; font-family `Arial,sans-serif`. Observed alternatives: - Use background `#c8f55b`; display `block`; font-size `74px`; line-height `1`; margin-top `36px`. When viewport width <= 760px, use font-size `56px`. - Use background `#fff`; font-size `42px`.
- Checkbox: Use color `#172019`; font `inherit`; font-family `Arial,sans-serif`.
- Surface Canvas: #f2f4ef
- Level 1 heading: Use background `#172019`; color `#f2f4ef`; font-family `Arial,sans-serif`; font-size `clamp(42px,6vw,82px)`; letter-spacing `-.06em`; line-height `.9`; margin `30px 0`.
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.