Designing key screens and an implementation handoff in Pencil

A physical .pen file under target components was prepared as a JSON-based visual source of truth edited and saved through official Pencil surfaces. The artifact kept 35 variables and 18 reusable components together with Foundations, Components, a desktop Home screen, and a mobile Home screen in one document. Because reuse was contained within one artifact for one site, no separate .lib.pen file was added; design guide recorded that a Design Library would be separated only when cross-artifact reuse became necessary.

• The desktop source used 1440px and the mobile source used 390px while preserving the same information order from Hero through Footer.
• Buttons, text links, status indicators, the locale selector, AI persona disclosure, and AI employee profiles were handled as reusable components.
• Default, hover, focus, disabled or unavailable, available, pending, and error were designed as states that did not rely on color alone.
• Profiles for nine AI employees and the shared disclosure were included; an unverified call to action appeared as preparing, English remained unavailable, and unpublished records remained pending.

Home was organized as Hero, About Wiroh, AI Employees, Current Experiments, Stories and Records, Product, Experiment Principles, Transparency, and Footer. Multi-column desktop sections became single-column sections on mobile, with the reading order of copy, controls, photos, and disclosure aligned with DOM order.

design-to-implementation handoff mapped Pencil variables to CSS custom properties and Pencil components to Astro components or native elements. The implementation contract also covered responsive behavior, locale and pending states, public image paths, heading hierarchy, control targets of at least 44px, a 3px focus indicator, alt text and disclosure, and state cues that paired icons with labels. The boundary used standard .astro components and CSS without assuming a UI library or Tailwind.

The first review found that design guide described .pen as encrypted and prohibited even read-only inspection, which contradicted both the artifact and official format guidance. The explanation was corrected to state that .pen is a readable JSON-based document whose Git diff and version history can be inspected, while authoring, editing, and saving remain on official Pencil surfaces and content inspection remains read-only without exposing secrets. The screens, .pen file, PNG exports, and handoff were unchanged by this correction.

Verification confirmed that the physical .pen file had been saved in Pencil and no longer showed an edited marker, then ran layout checks for the desktop and mobile screens, produced two PNG review exports, and parsed the JSON document. The project check, whitespace errors in the diff, absence of old paths and the incorrect format wording, and the lack of changes to existing Figma assets, settings, and implementation code were also checked.

The primary diff was checked line by line to confirm that the behavior described above matched the change at the cutoff.