Clone comparison
North Index · Editorial grid DESIGN.md
An editorial research publication that uses a disciplined grid, generous reading measure, and fluid typography rather than dashboard chrome.
Updated:
What this example demonstrates
- Editorial grid
- Fluid type
- Mobile layout
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
3#e33b2e#f3f1eb#111111Typography
4Build 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
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 `#f3f1eb`; color `#111`. |
Typography by region
4| Pattern | Guidance |
|---|---|
| Level 1 heading | Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(54px,8vw,128px)`; letter-spacing `-.075em`; line-height `.82`; margin `18px 0`. When viewport width <= 700px, use font-size `58px`. |
| Level 2 heading | Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`. |
| Page | Use font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`. |
| Paragraph | Use background `#f3f1eb`; font-family `Arial,sans-serif`. Observed alternatives: - Use only the common rules above. - Use font-size `11px`; letter-spacing `.1em`; text-transform `uppercase`. - Use font-size `20px`; max-width `52ch`. |
Layout and responsive
Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.
| Pattern | Guidance |
|---|---|
| Article | Use padding-top `16px`. Observed alternatives: - Use border-top `6px solid`; font-family `Arial,sans-serif`. - When sibling position 2, use border-color `#e33b2e`; border-top `6px solid`; color `#111`; font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`; padding-top `16px`. |
| Flex container | Use border-top `1px solid`; display `flex`; font-family `Arial,sans-serif`; justify-content `space-between`; padding `14px 0`. |
| Grid container | Use align-content `end`; display `grid`; font-family `Arial,sans-serif`. |
| Header | Use align-items `end`; border-bottom `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `1fr 2fr auto`; padding-bottom `18px`. When viewport width <= 700px, use grid-template-columns `1fr auto`. |
| Main content | Use font-family `Arial,sans-serif`; min-height `100vh`; padding `24px 4vw`. |
| Navigation | Use display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`. |
| Page | Use margin `0`. |
| Section | Use display `grid`; font-family `Arial,sans-serif`. When viewport width <= 700px, use grid-template-columns `1fr`. Observed alternatives: - Use border-bottom `1px solid #bbb8b0`; gap `5vw`; grid-template-columns `1.55fr .75fr`; padding `70px 0`. When viewport width <= 700px, use padding `40px 0`. - Use gap `24px`; grid-template-columns `2fr 1fr 1fr`; padding `30px 0`. |
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
The layout needs to retain its editorial rhythm and asymmetric emphasis as columns collapse across breakpoints.
Limits of this example
Article copy and citations are illustrative. Replace them with reviewed content and add the publishing workflow your project requires.
DESIGN.md
Design facts from the same capture
Download DESIGN.md- Header: Use align-items `end`; border-bottom `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `1fr 2fr auto`; padding-bottom `18px`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
- Navigation: Use display `flex`; font-family `Arial,sans-serif`; gap `20px`. When viewport width <= 700px, use font-size `12px`; gap `10px`.
- Level 1 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(54px,8vw,128px)`; letter-spacing `-.075em`; line-height `.82`; margin `18px 0`. When viewport width <= 700px, use font-size `58px`.
- Border Default: #e33b2e
- Level 2 heading: Use background `#f3f1eb`; font-family `Arial,sans-serif`; font-size `clamp(24px,3vw,48px)`; line-height `1`; margin `12px 0`.
- Page: Use font-family `Arial,sans-serif`; font-size `15px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.4`.
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.