# Website design reference

This is a project note for an AI coding agent, not a formal format specification
or an installable skill. Replace the placeholders before use. Point AGENTS.md
to this file explicitly. Preserve existing project instructions.

## Purpose

- Page family: [marketing pages, dashboard, or another defined area]
- Primary audience and action: [who uses it and what they need to do]
- Approved visual reference: [authorized local screenshot or URL]

## Existing implementation

- Styles and token definitions: [actual file paths]
- Shared components: [actual file paths]
- Heading and body fonts: [existing font names and loading method]
- Color roles: [existing background, text, border, accent and status variables]

## Layout rules

- Content width and alignment: [observed rule]
- Spacing within groups: [existing spacing tokens]
- Spacing between sections: [existing spacing tokens]
- Narrow-screen behavior: [navigation, columns, wrapping and content priority]

## Components and states

Reuse the existing components above. Record applicable focus, loading, empty,
error and expanded states. Describe exceptions beside the rules they limit.
Do not add decorative elements that compete with the page's main purpose.

## Review

Render after changes. Compare current output with the intended reference at the
same viewport. Inspect desktop and mobile. Confirm type, spacing, color roles,
images and interactions. If browser access is missing, report that limit rather
than claim visual acceptance. Run the project's relevant checks.