# KidMatch brand & master design · v1.0

KidMatch helps parents find their family’s people. The voice is warm, direct, and parent-led. Name actions clearly and distinguish sample content from real families.

## Identity
Use `/kidmatch-logo.png` on light surfaces without stretching or recoloring. Leave clear space equal to the height of its K. Family photography must be parent selected or used with permission.

## Canonical implementation
`app/brand.css` supplies shared tokens and interaction states and loads after legacy styles. `/brand-guide` demonstrates the system. Reuse `AppHeader`, `BottomNavigation`, `BackButton`, and `PublicBackLink` rather than creating competing patterns.

## Palette
| Role | Value | Pairing |
| --- | --- | --- |
| Primary | #5100A8 | White text |
| Hover | #410087 | White text |
| Pressed | #310068 | White text |
| Highlight | #FFD700 | #310068 text |
| Supporting action | #008080 | White text |
| Body | #252033 | White or #F7F4FB |
| Supporting text | #665D73 | White or #F7F4FB |
| Canvas | #F7F4FB | Dark text |

Success #146B4E; error #A31927; warning #795400. Always include meaningful text, not color alone.

## Type and layout
Native system sans serif. Body 16px; supporting text 14px; short labels 12px. App headings 30–40px, section headings 20–24px. Spacing scale 4/8/12/16/24/32/48px. Control radius 12px; card radius 24px. Primary controls 48px high; compact controls default to 44px with sufficient width and spacing. This product default exceeds WCAG's 24px minimum target-size baseline; it is not a claim that every existing element passes an audit.

## Interaction
Hover changes surface and border without movement. Pressed states deepen primary color. Keyboard focus uses a 3px ring with offset and contrasting separation. Disabled controls cannot activate. Loading actions describe progress. Error messages explain a recovery action. Respect reduced motion and forced colors.

## Navigation
Mobile uses persistent primary destinations and header notifications/profile. Desktop uses the same view model in a rail. App fragment navigation supports browser Back/Forward. Header Back follows internal history, with Today as the direct-link fallback. Public detail pages link to their parent collection. Onboarding preserves values when moving back. Conversations offer a labeled inbox return.

## Screen acceptance checklist
- Reuse shared tokens, controls, navigation, and spacing.
- Provide loading, empty, success, and recoverable error states where applicable.
- Use persistent field labels, specific errors, and clear save feedback.
- Keep focus visible and controls keyboard operable.
- Check narrow widths, zoom, touch targets, long content, and reduced motion before release.
- Never present local preview data as a cloud save or successful message delivery.

## Standards references
- [Visible focus](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)
- [Minimum target size](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [Text contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

This reference establishes design rules. It does not certify full accessibility compliance.