# Frontend Design: Forma decision sheet

## Plan before implementation

Audience: a studio lead planning the day before a client review. Job: choose the next decision and see what blocks progress.
Palette: blueprint #DCE9F4, midnight #183D5D, paper #FFFFFF, pencil #546778, proof violet #4C3CC8.
Type: Helvetica Neue for the studio's working interface; a large medium-weight heading carries identity rather than a display/body serif pairing. System font availability is an explicit constraint of this lab.
Layout: left-aligned project header; a wide decision-first panel; a narrow, quieter review appointment alongside; task rows below.
Wireframe: [project / progress] [decision 2fr | appointment 1fr] [three task rows]. Mobile collapses the appointment after the decision without hiding the primary action.
Principles: studio proofing, decisive type, one large visual focal point, genuine state color only.

## Review before code

Rejected the first generic plan of three statistic cards: none helped the lead decide what to do. Replaced it with the actual homepage decision and put progress in one plain line. Avoided generic serif-on-cream and tracked eyebrow treatments flagged in the skill.

## Applied instructions

SKILL.md: ground choices in the subject, spend boldness in one place, make typography active, use structural devices only when they encode information, label controls with their real action. The large decision area is the one expressive element; everything else is a compact working list.

## Interactions and limits

Prepare review opens a local preparation summary and moves focus; Close and Escape return it. View all tasks navigates to the real list. Mobile navigation is a native disclosure containing its actual blocker. Initial project facts are unchanged. No typography download, generated photo, analytics or data persistence. Source-guided Codex execution only.

## Source-guided colour refinement — 2026-10-21

The pinned SKILL.md was reread for this bounded refinement. Its instruction to spend boldness in one place still governs the page: the homepage decision is the focal region, while appointment and task rows remain quiet. This palette supersedes the initial palette above: blueprint canvas #E2EAFB, cobalt decision #234ADB, blue ink #18336D, paper #FFFFFF, pencil #4D6086 and review ink #1C3BB1. Supporting colours are rule #B6C8ED, decision copy/hover #E9EEFF, review fill #CBD9FF and neutral status #F7F9FF. The existing amber blocker uses #73511A on #F6E7C8; the decision's keyboard-focus ring uses #F5D66E.

- The muted midnight decision panel becomes saturated cobalt, so the actual approval request is recognizable at preview scale.
- The white Prepare review button gains stronger separation from the decision surface; its hover and focus colours are explicit. No extra action was added.
- A stronger blue review state and a heavier Friday appointment make the owner/status/deadline relationship easier to find without turning progress into a competing metric card.

This is a subsequent source-guided colour and hierarchy refinement of the original instruction-guided result, not a fresh native skill run or a claim of complete conformance. The original prompt, input, source pin and execution date are preserved. All copy, local interactions, mobile structure and reduced-motion handling remain intact.