---
version: "alpha"
name: "Workshop Manual"
colors:
  surface-canvas: "#0647a7"
  text-body: "#edf5ff"
typography:
  body:
    fontFamily: "'Courier New',monospace"
    fontSize: "14px"
    lineHeight: "1.5"
  display:
    fontFamily: "Arial,sans-serif"
    fontWeight: "700"
    lineHeight: "0.9"
    letterSpacing: "-.06em"
  h2:
    fontFamily: "Arial,sans-serif"
    fontSize: "22px"
    fontWeight: "700"
  body-text:
    fontFamily: "Arial,sans-serif"
    fontSize: "14px"
    lineHeight: "1.5"
  body-text-2:
    fontFamily: "Arial,sans-serif"
    fontSize: "18px"
    lineHeight: "1.5"
spacing:
  step-1: "12px"
  step-2: "14px"
  step-3: "24px"
components:
  rounded-surface:
    rounded: "50%"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/blueprint-workshop/source/index.html`.

Each component group lists its common rules once. Choose one observed alternative together with those common rules; its theme, interaction and responsive changes stay with that alternative.

## Colors

- **surface-canvas:** `#0647a7`
- **text-body:** `#edf5ff`
- Page: Use color `#edf5ff`.

## Typography

- **body:** fontFamily `'Courier New',monospace`, fontSize `14px`, lineHeight `1.5`
- **display:** fontFamily `Arial,sans-serif`, fontWeight `700`, lineHeight `0.9`, letterSpacing `-.06em`
- **h2:** fontFamily `Arial,sans-serif`, fontSize `22px`, fontWeight `700`
- **body-text:** fontFamily `Arial,sans-serif`, fontSize `14px`, lineHeight `1.5`
- **body-text-2:** fontFamily `Arial,sans-serif`, fontSize `18px`, lineHeight `1.5`
- 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`.
- Level 2 heading: Use font-family `Arial,sans-serif`; font-size `22px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `700`; line-height `normal`.
- Page: Use font-family `'Courier New',monospace`; font-size `14px`; font-stretch `normal`; font-style `normal`; font-variant `normal`; font-weight `normal`; line-height `1.5`.
- Paragraph: Use font-family `Arial,sans-serif`. Observed alternatives:
  - Use only the common rules above.
  - Use font-size `18px`; max-width `44ch`.

## Layout

Observed spacing scale: `12px`, `14px`, `24px`.
- Article: Use 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 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`.
- 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`.
- Main content: Use font-family `Arial,sans-serif`; min-height `100vh`; padding `22px 3vw`.
- Page: Use margin `0`.
- Section: Use 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

- Rounded surface: Use border `2px solid`; border-radius `50%`; font-family `Arial,sans-serif`.

### Extraction limits

Missing facts and unresolved conditions:
- 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.