---
version: "alpha"
name: "Block Assembly"
colors:
  surface-canvas: "#f4f1e8"
  surface-raised: "#111111"
typography:
  body:
    fontFamily: "Arial,sans-serif"
  h2:
    fontFamily: "Arial,sans-serif"
    fontSize: "34px"
    lineHeight: "1"
  body-text:
    fontFamily: "Arial,sans-serif"
    fontSize: "20px"
spacing:
  step-1: "14px"
  step-2: "22px"
  step-3: "28px"
---

# DESIGN.md

## Overview

Source example: `https://cloneany.com/gallery-assets/gallery/de-stijl-studio/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:** `#f4f1e8`
- **surface-raised:** `#111111`
- Page: Use background `#f4f1e8`; color `#111`.

## Typography

- **body:** fontFamily `Arial,sans-serif`
- **h2:** fontFamily `Arial,sans-serif`, fontSize `34px`, lineHeight `1`
- **body-text:** fontFamily `Arial,sans-serif`, fontSize `20px`
- 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`.

## Layout

Observed spacing scale: `14px`, `22px`, `28px`.
- 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`.

### Extraction limits

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