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
DESIGN.md
The design rules extracted from the same page as this preview.
YAML contains exact design values · Markdown explains how to use them
Foundations
The palette, type hierarchy, spacing, corners, and depth recorded in this file.
Colors
2#f4f1e8#111111Typography
3Build from the page's own design language
Arial,sans-serif
Build from the page's own design language
Arial,sans-serif
Build from the page's own design language
Arial,sans-serif
Samples use fonts available in your browser. Exact values remain in the file.
Text and surface colors
1| Pattern | Guidance |
|---|---|
| Page | Use background `#f4f1e8`; color `#111`. |
Typography by region
5| Pattern | Guidance |
|---|---|
| Emphasized text | Use font-size `12px`. Observed alternatives: - Use background `#f4f1e8`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`; font-size `12px`. |
| 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`. |
| 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`. |
| Page | Use font-family `Arial,sans-serif`. |
| Paragraph | Observed alternatives: - Use background `#f4f1e8`. - Use background `#f4f1e8`; font-size `20px`; max-width `34ch`. - When sibling position 2, use background `#111`; color `#fff`; font-family `Arial,sans-serif`. |
Spacing
314px22px28pxLayout and responsive
Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.
| Pattern | Guidance |
|---|---|
| Article | Use min-height `230px`; padding `28px`. When viewport width <= 700px, use border-bottom `6px solid`; min-height `180px`. Observed alternatives: - Use border-right `10px solid`. When viewport width <= 700px, use border `0`. - When last sibling, use border `0`; border-right `10px solid`; color `#111`; font-family `Arial,sans-serif`; min-height `230px`; padding `28px`. - When sibling position 2, use background `#111`; border-right `10px solid`; color `#fff`; font-family `Arial,sans-serif`; min-height `230px`; padding `28px`. When viewport width <= 700px, use border `0`. |
| Column container | Use border-right `10px solid`; display `flex`; flex-direction `column`; justify-content `space-between`; padding `5vw`. When viewport width <= 700px, use border `0`; border-bottom `6px solid`; min-height `430px`. |
| 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`. |
| Main content | Use min-height `100vh`. |
| Page | Use margin `0`. |
| Section | Use display `grid`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use grid-template-columns `1fr 1fr 1fr`. - Use grid-template-columns `2fr 1fr`; min-height `500px`. |
Components and states
Component facts group the properties and states that were traced to the same page capture.
No component facts are included in this DESIGN.md.
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 value.
- 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
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.