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

DESIGN.md

The design rules extracted from the same page as this preview.

YAML contains exact design values · Markdown explains how to use them

Read the Google Labs format specification
Colors2
Typography9
Layout and responsive6
Components2

Foundations

The palette, type hierarchy, spacing, corners, and depth recorded in this file.

Colors

2
Surface Canvas
#0647a7
Text Body
#edf5ff

Typography

5
Body
fontSize: 14pxlineHeight: 1.5

Build from the page's own design language

'Courier New',monospace

Display
fontWeight: 700lineHeight: 0.9letterSpacing: -.06em

Build from the page's own design language

Arial,sans-serif

H2
fontSize: 22pxfontWeight: 700

Build from the page's own design language

Arial,sans-serif

Body Text
fontSize: 14pxlineHeight: 1.5

Build from the page's own design language

Arial,sans-serif

Body Text 2
fontSize: 18pxlineHeight: 1.5

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
PatternGuidance
PageUse color `#edf5ff`.

Typography by region

4
PatternGuidance
Level 1 headingUse 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`.
Level 2 headingUse font-family `Arial,sans-serif`; font-size `22px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; line-height `normal`.
PageUse font-family `'Courier New',monospace`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.5`.
ParagraphUse font-family `Arial,sans-serif`. Observed alternatives: - Use only the common rules above. - Use font-size `18px`; max-width `44ch`.

Spacing

3
Step 1
12px
Step 2
14px
Step 3
24px

Layout and responsive

Layout and viewport rules appear here only when the DESIGN.md contains matching evidence.

PatternGuidance
ArticleUse min-height `210px`; padding `24px`. When viewport width <= 700px, use border-bottom `2px solid`. Observed alternatives: - Use border-right `2px solid`; font-family `Arial,sans-serif`. - When last sibling, use border `0`; border-right `2px solid`; color `#edf5ff`; font-family `Arial,sans-serif`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.5`; min-height `210px`; padding `24px`.
Flex containerUse 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`.
HeaderUse 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`.
Main contentUse font-family `Arial,sans-serif`; min-height `100vh`; padding `22px 3vw`.
PageUse margin `0`.
SectionUse border `2px solid`; border-top `0`; display `grid`; font-family `Arial,sans-serif`. Observed alternatives: - Use grid-template-columns `1fr 1fr`. When viewport width <= 700px, use grid-template-columns `1fr`. - Use grid-template-columns `repeat(4,1fr)`. When viewport width <= 700px, use grid-template-columns `1fr 1fr`.

Components and states

Component facts group the properties and states that were traced to the same page capture.

Components

1

Rounded Surface

rounded
50%
PatternGuidance
Rounded surfaceUse border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.

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, opaque-background 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

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.