# Hillcrest Living Brand Style Guide

## Brand Identity
- **Business Name:** HILLCREST LIVING LTD
- **Domain:** `hillcrestlivingltd.co.uk`
- **Service Positioning:** Supported living for older adults (65+) who value independence with structured day-to-day support.

## Logo
- Primary logo asset:
  - `assets/c__dev-proj_hillcrest-web_hillcrest-living-logo.jpg`
- Keep clear spacing around logo equal to at least the height of the `L` in "LIVING".
- Do not stretch, skew, rotate, or apply heavy shadow/glow effects.

## Color System (Logo-Derived)
Use semantic tokens so palette changes are easy later without redesigning components.

### Core Palette
- `brand-navy`: `#3F4A5C`
- `brand-gold`: `#B99147`
- `brand-charcoal`: `#2F3744`
- `brand-mist`: `#F5F6F8`
- `brand-white`: `#FFFFFF`
- `brand-text-soft`: `#6B7280`

### Semantic Tokens (Use in UI)
- `color-primary`: `brand-navy`
- `color-accent`: `brand-gold`
- `color-heading`: `brand-navy`
- `color-body`: `brand-charcoal`
- `color-body-muted`: `brand-text-soft`
- `color-surface`: `brand-white`
- `color-surface-alt`: `brand-mist`
- `color-border`: `#E5E7EB`

### Suggested Contrast Pairings
- Primary CTA: `brand-gold` background + `brand-white` text
- Secondary CTA: `brand-white` background + `brand-navy` border/text
- Section headings: `brand-navy`
- Body text: `brand-charcoal`

## Typography
Best-fit pairing for trust, readability, and modern care-sector presentation:

- **Headings / Display:** `Plus Jakarta Sans` (600/700)
- **Body / UI text:** `Inter` (400/500)

Fallback stack:
- `Plus Jakarta Sans`, `Inter`, `Segoe UI`, `Arial`, `sans-serif`

### Type Scale (Recommended)
- H1: 40-52px desktop, 32-38px mobile
- H2: 30-36px desktop, 24-30px mobile
- H3: 22-28px desktop, 20-24px mobile
- Body: 16-18px
- Small helper text: 14px

## Spacing and Layout
- Use generous whitespace to project a premium, calm feel.
- Standard section padding:
  - Desktop: `py-20` to `py-28`
  - Mobile: `py-12` to `py-16`
- Max content width: `max-w-7xl`
- Keep CTAs visible in each major section block.

## UI Component Styling Rules
- Buttons:
  - Rounded medium (`rounded-lg`)
  - Strong hover/focus state
  - Clear disabled state
- Cards:
  - Soft borders, light shadow
  - Hover raise effect only on interactive cards
- Inputs:
  - High contrast labels
  - 44px minimum touch target height

## Motion and Interactions
- Use subtle motion, never distracting:
  - fade-up / fade-in for section entry
  - 150-250ms hover transitions
- Keep animations accessible and reduce motion where user preference requests it.

## Accessibility Standards
- Minimum WCAG AA contrast for text and controls.
- Keyboard-visible focus states on all links/buttons/forms.
- Alt text required for all meaningful images.
- Avoid long dense paragraphs; keep copy scannable.

## Content Voice
- Warm, clear, reassuring, and professional.
- Emphasize dignity, confidence, independence, and safety.
- Avoid over-clinical language unless legally/compliance required.

## Brand Governance
- Treat this document as the source of truth for design decisions.
- Any color or typography change must update:
  - this style guide
  - admin theme settings defaults
  - component token mappings

## Version History
- `2026-05-03`: Initial style guide created from logo palette and approved brand direction.