Clone comparison
Block Assembly · Asymmetric grid DESIGN.md
A studio portfolio driven by asymmetric blocks, sharp geometry, primary colors, and a deliberately unconventional reading path.
Updated:
What this example demonstrates
- Asymmetric grid
- Primary colors
- Mobile reflow
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
Its identity depends on exact proportion and overlap. The mobile reflow must preserve character without copying desktop coordinates literally.
Limits of this example
Project names and imagery are sample material. Replace them and test focus order carefully because visual order can differ from document order.
DESIGN.md
Design facts from the same capture
Download DESIGN.md- Grid container: Use display `grid`. Observed alternatives: - Use grid-template-columns `1fr 2fr`. - Use grid-template-rows `1fr 1.2fr`. When viewport width <= 700px, use height `260px`.
- Header: Use border-bottom `10px solid`; display `grid`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use border-width `6px`; grid-template-columns `1fr auto`.
- Level 1 heading: Use background `#f4f1e8`; font-size `clamp(60px,10vw,150px)`; letter-spacing `-.08em`; line-height `.72`; margin `0`; max-width `7ch`. When viewport width <= 700px, use font-size `68px`.
- Surface Canvas: #f4f1e8
- Spacing: 14px · 22px · 28px
- Level 2 heading: Use font-size `34px`; line-height `1`; margin `48px 0 10px`. When viewport width <= 700px, use margin-top `25px`. Observed alternatives: - Use background `#f4f1e8`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`; font-size `34px`; line-height `1`; margin `48px 0 10px`.
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.