MY RENT SOLUTION — BRAND AND INTERFACE GUIDE

Purpose
Help people navigate Michigan rentals, rent-to-own options and credit-readiness support with a clear, practical, trustworthy experience. Keep the existing product flows, legal disclosures and components intact unless a change is explicitly requested.

Color and appearance
- The application uses a light appearance throughout, regardless of a device's dark-mode setting or an old saved theme preference. Do not add a dark-mode switch without explicit product approval.
- Brand blue: #004090. Use for navigation, links, headings and primary informational actions.
- Deep blue: #002F6B. Use for blue hover states and occasional brand panels or the footer, with readable light text.
- Brand red: #D4141C. Use for the main call to action and selective emphasis; hover red is #A50F16.
- White: #FFFFFF for page and card surfaces. Light blue-gray #F3F6FB and soft blue #E6EEF8 are supporting surfaces, not a dark theme.
- Main text: #14202B. Supporting text: #3B4756. Borders: #E3E7EE; blue borders: #BFD0E8.
- Reuse the semantic tokens in src/app/globals.css and the existing shadcn/ui components. Do not introduce purple, neon gradients or an unrelated palette. Keep established success, warning and error indicators distinguishable.
- Normal text must meet 4.5:1 contrast; large text and essential UI boundaries/focus indicators must meet 3:1. Color must not be the only way to communicate state.

Logo and typography
- Use the existing homepage logo from src/lib/brand.ts. Preserve its proportions, full brand name, legibility and clear space; do not stretch or recolor the artwork. Browser and app icons must use the matching red, white and blue artwork.
- Public marketing pages use Public Sans for body copy and Bricolage Grotesque for headline accents. Existing app screens use Inter. Preserve readable system fallbacks and existing component hierarchy.
- Scale headings to fit narrow screens; long words must not force horizontal scrolling. Never truncate essential text or legal disclosures just to fit a layout.

Navigation and interaction
- Give mobile users a compact, clearly labeled navigation. Keep high-use destinations discoverable; group secondary links in the existing accessible shadcn Sheet. Do not use a menu label that implies a filter, page or action its destination does not provide.
- Preserve role-specific destinations and authorization. Signed-out visitors must see sensible public links; renters, vendors and admins must retain access to their own tools.
- Use visible focus, descriptive labels, keyboard-operable menus, proper dialog titles and at least 44 by 44 CSS-pixel primary touch targets. Avoid covering content with fixed navigation; account for device safe areas.
- Respect reduced-motion preferences. Keep forms, status feedback, existing wording and functional behavior intact unless changes are explicitly requested.

Editorial and legal
Use plain, helpful language. Do not invent eligibility, pricing, credit outcomes or guarantees. Preserve fair-housing notices, disclosures and the meaning of renter-facing information.

Maintenance
Before every website or app UI update, read this guide together with AGENT.md and any applicable DESIGN.md. Update both ./branding.txt and public/branding.txt together, and verify the public /branding.txt matches the project copy. Verify affected pages in both system light and dark preferences at desktop and mobile widths; visit authenticated views with isolated synthetic data where necessary.