Safe Harbor

Why it looks this way.

Typography

Lora Bold sets the headline at about 90 pixels, a gentle serif with calligraphic curves that sounds like a calm voice. Source Sans 3 handles body text and is clear and neutral. The serif adds comfort while the sans supplies the practical information.

• Lora headlines
• Source Sans 3 body text

Color

The page is warm sand (#EFE6D8) with deep brown text (#3A2619), a chestnut brand colour (#6B3F25) and a muted teal (#3E6F68) accent. The dark theme uses light tan (#D2A27E). The palette is earthy and quiet, and avoids bright colours that might feel clinical or alarming.

• Page #EFE6D8
• Cards #F8F2E8
• Text #3A2619
• Brand #6B3F25
• Accent #3E6F68

Layout

A sand bar has a brown logo tile, six links and a brown Donate button. A four-cell strip under the hero shows hours and location, and a stats band reports 24/7 hotline, 210 families sheltered and 85 percent finding stable housing. Circle icons and donor avatars appear lower on the page.

Pages: Home, About, Visit, Programs, Stories, Events, Donate, Contact

Hero

A full-width photo of four people with arms around each other, seen from behind in warm light, fills the first screen. 'You are safe here.' is set in white on a single line. The eyebrow says 24/7 confidential hotline, and a small chip shows the next hotline shift.

Calls to action

'Get help now' is a brown button, and 'How to help' is outlined. The help button is the first thing in the hero, ahead of donation. A real site should also add a quick-exit button, so someone in danger can leave the page at once.

Photography

The photo is taken from behind, so no faces are visible, which protects privacy and suits a confidential service. A real shelter must never show the building, its address or any resident.

Accessibility

Dark brown on sand is about 11.5 to 1, and white on the brown button about 9 to 1. Phone numbers should be tap-to-call links. A real build for this audience should also clear browsing history guidance and avoid tracking.