Back to Gallery

Clone comparison

Workshop Manual · Technical layout DESIGN.md

A technical workshop manual with blueprint styling, numbered procedures, CSS diagrams, and responsive reference panels.

Updated:

What this example demonstrates

  • Technical layout
  • CSS diagrams
  • Responsive steps

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

Dense instructional content must keep its sequence, diagram labels, and cross-references clear as the page narrows.

Limits of this example

The procedures are fictional and should not be treated as operating instructions. Validate real technical content and print behavior separately.

DESIGN.md

Design facts from the same capture

Download DESIGN.md
  • Header: Use border `2px solid`; display `grid`; font-family `Arial,sans-serif`; grid-template-columns `2fr 1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr auto`.
  • Flex container: Use display `flex`; font-family `Arial,sans-serif`; gap `35px`; padding `20px 0`; text-transform `uppercase`. When viewport width <= 700px, use flex-wrap `wrap`; gap `10px 25px`.
  • Level 1 heading: Use font-family `Arial,sans-serif`; font-size `clamp(44px,7vw,100px)`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; letter-spacing `-.06em`; line-height `0.9`; margin `15px 0`. When viewport width <= 700px, use font-size `56px`.
  • Rounded surface: Use border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.
  • Surface Canvas: #0647a7
  • Spacing: 12px · 14px · 24px

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

Orbit DeskA space-operations console with light and dark themes, dense system readings, and navigation that contracts cleanly on smaller screens.Atlas DispatchA dense dispatch dashboard with status cards, an operational table, restrained color roles, and compact responsive navigation.

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.