# design.md template

Copy this file into the project you are designing. Replace every empty field. Delete this note. Do not leave Harbor Ledger, Signalnest, or any example company in the copy you give an agent.

The browser paints CSS. This file tells an agent which existing values and components to use, and which decisions it must not invent.

When two sources disagree:

1. Customer facts and approved content win for claims, names, prices, and policies.
2. The current product behaviour shows what the page actually does.
3. This file states the intended visual and interaction rules.
4. Change the implementation when it does not match an approved rule. Do not rewrite the rule merely to describe a mistake.

Delete every empty row before using the file. A blank rule is not a decision. Do not add a third value inside a component to hide a disagreement.

The headings match the annotated Harbor Ledger example. That example is fictional. Empty fields below are for the real project.

## Reader and page job

- Reader:
- Decision this page should help them make:
- Primary action, including the destination:
- Approved facts the page may state:
- Facts that are still proposals:
- Gaps the page must not fill with invention:

## Refusals

List the specific additions you keep deleting. A refusal names the thing and the reason.

- Do not:
- Do not:

## Tokens

Name the custom properties that already exist. Do not restate a second hex.

- File that declares them:
- Page background:
- Text:
- Muted text:
- Accent and text on accent:
- Error color, with a non-color cue:
- Spacing steps the agent may use:
- Type families already loaded:

## Layout

- Opening stack, and what must stay in the first screen:
- Reading measure:
- Desktop width and side padding:
- Narrow width and side padding:
- How many times the primary action may appear:

## Components and states

For each component, name the file, the job, and the states that already exist.

- Primary action:
- Price or offer:
- Form field, label, and error:
- Shell: header, skip link, current page, footer:

## Assets

- Image job, or none:
- Crop and focal point:
- Text that must not appear in the image:
- Alt text for an informative image:
- Empty alt for decorative images:
- Assets you will not invent:

## Motion

- Default:
- What motion is allowed:
- Reduced-motion behavior:
- What must not autoplay:

## Accessibility and responsive behavior

- Heading order:
- Keyboard path and visible focus:
- Minimum body text size:
- What must remain visible at a 390 × 844 px viewport:
- Contrast to check:

## Do and do not

Do:

-

Do not:

-

## Checks

- Desktop first screen shows:
- At a 390 × 844 px viewport the same meaning is still visible:
- The primary control is the existing component:
- Refusals that are absent from the page:
- The stylesheet and this file name the same custom properties:
- Approved facts win for claims, names, prices, and policies. This file states the intended design. Change the implementation when it breaks an approved rule. Examples in a skill come last.