# Brand Implementation Directive

You are applying the VESPER brand kit to an existing website or app.

Use this kit as the source of truth for visual design and copy tone. Preserve the product's existing information architecture, behavior, routes, forms, and data flows unless the user explicitly asks for structural changes.

## Source Files

- Import CSS: `tokens/globals.css`
- Design tokens: `tokens/tokens.json`
- Header/logo asset: `logos/primary.svg`
- App icon asset: `logos/app-icon.png`
- Favicons/PWA manifest: `favicons/`
- Voice guide: `voice/voice-guidelines.md`

## Implementation Priorities

1. Apply the tokens first.
   - Replace hard-coded colors with the provided semantic tokens.
   - Treat the color theme as token-complete, not approximate: backgrounds, panels, borders, text, muted text, links, focus rings, buttons, hover states, shadows, gradients, and decorative surfaces should all resolve to kit tokens or explicitly named derived tokens.
   - Do not invent near-match colors such as extra blacks, grays, glows, or overlay tints just because they look close. If a derived token is necessary, define it from the kit palette once, name its role, and use it consistently.
   - Keep only true product state colors outside the brand palette, such as destructive errors, warnings, success states, and external preview backgrounds; document those exceptions in the deliverable summary.
   - Use the supplied typography, spacing, radius, border, and shadow rules.
   - Keep contrast accessible. Do not use brand colors in combinations the kit marks as failing.
   - Prefer reusable theme variables/components over page-specific styling.

2. Use brand assets correctly.
   - Build a visible header lockup from the supplied header/logo asset and, when available, the square mark/app icon. Do not leave the header as text-only branding when kit logo assets exist.
   - Size the header lockup as a primary brand signal: legible at desktop sizes, still usable on mobile, and not visually smaller than surrounding navigation.
   - Use the app icon only for favicon, app tile, avatar, launcher, or square icon placements.
   - Do not stretch, crop, recolor, redraw, trace, add shadows to, or otherwise modify logo assets unless the kit provides that variant.

3. Match the brand's product UI style.
   - Update navigation, buttons, cards, forms, tables, empty states, alerts, modals, and major page sections.
   - Keep app screens practical and usable. Do not convert product UI into a marketing landing page unless asked.
   - Apply the spatial system consistently across desktop and mobile.
   - Use dark theme as the default visual direction unless the host app already has a stronger theme requirement.

4. Apply the brand voice.
   - Update visible headings, calls to action, labels, helper text, empty states, and error copy to match the voice guide.
   - Preserve factual meaning and product promises.
   - Do not add fake metrics, unsupported claims, decorative filler, or new feature promises.

5. Be conservative with scope.
   - Do not remove product functionality.
   - Do not introduce new dependencies unless required to load or apply the brand kit.
   - Do not invent new colors, fonts, logos, icons, illustrations, or motion styles when this kit already provides direction.
   - If a needed token or asset is missing, use the closest existing token or asset and note the gap.

## Verification Checklist

- The app imports and uses `tokens/globals.css` or an equivalent local token mapping.
- A color audit shows visible UI colors are kit tokens or named derived tokens, with only documented semantic state exceptions.
- Header, favicon/app icon, and brand-identification areas use supplied assets.
- Primary flows, not just the landing page, reflect the palette, type, spacing, component style, and voice.
- Mobile and desktop layouts remain usable, readable, and free of overlapping text.
- No major old-brand colors, fonts, logos, or copy tone remain in visible UI.
- Contrast-sensitive UI still meets the kit's accessibility guidance.

## Deliverable Summary

After implementation, report:
- Which assets, tokens, and voice rules were applied.
- Which pages/components changed.
- Any places where the host product conflicted with the brand kit.
- Any missing kit assets or tokens that limited fidelity.
