# Pencil Design

## Active `.pen` Source
- `pencil-new.pen`

## Screens
- `MarkupFlow Homepage` -> screen id `bi8Au`
- `MarkupFlow Product Detail` -> screen id `LpyYx`

## Screen Notes
- the homepage screen contains:
  - hero
  - capabilities
  - MCP service
  - closing CTA
- the product detail screen contains:
  - desktop workspace hero
  - three-step pipeline
  - workspace modules
  - closing CTA

## Implementation Notes
- preserve the dark desktop-software visual language
- keep the structural emphasis on three core capabilities on page one
- keep the import, annotate, publish pipeline readable on page two

## Validation Notes
- both screens were reviewed in Pencil during authoring
- no obvious clipping, overlap, or alignment failures were observed in the design pass