Brand & UI Reference

Chateau Health & Wellness — Design Kit

A single-page reference of the Chateau brand system: logo, color, typography, buttons, overlays, spacing, cards, and photography. Sourced from the project's preview library and design tokens. For internal share-out and partner handoff.

Version April 2026
Source /project/preview
Tokens colors_and_type.css
02

Color

brand · neutrals · status
Burnt Orange is a sparing accent — approved for the 4px accent bar, eyebrow labels, inline text links, and one accent CTA per section. Not for large fills, overlays, or button backgrounds.
Brand & Status
Steel Blue
#2C4A67
--brand-primary · Primary CTA
Muted Teal
#50717A
--brand-secondary
Dark Teal
#354B51
--brand-secondary-dark
Burnt Orange
#D17400
--accent · SPARING only
Text & Ink
950
#181A21
Footer bg
900
#303442
Headings
700
#626571
Body
500
#9295A1
Muted
300
#C2C5D0
Borders
Backgrounds
Page
#FFFFFF
--bg-page
Card
#FFFFFF
--bg-card
White
#FFFFFF
--bg-white
03

Typography

EB Garamond · Arial
Headings — EB Garamond
H1
48px / 400

Healing Begins Here

H2
36px / 400

Evidence-Based Treatment

H3
28px / 400

Trauma-Informed Care

H4
24px / 700

Residential Programs

Body & UI — Arial
Label
14px Bold
Body Lg
18px / 1.625

Chateau Health & Wellness provides intimate, trauma-informed residential treatment in Utah's Wasatch Mountains, serving first responders, veterans, and professionals.

Body
16px / 1.6

Joint Commission-accredited with Master's Level Clinicians. Ages 26+ only. FOP Approved Wellness Provider since 2012.

Small
14px / 1.5

All inquiries are 100% confidential. (435) 222-5225 · Oakley, Utah

Card Title
20px Bold
First Responders
Editorial & Pull Quote
Founded in 2012, Chateau Health & Wellness was built on the belief that healing requires more than a clinical setting — it requires a place that feels like home, surrounded by the quiet strength of the mountains.
“You've carried the weight of others for years. Let us carry some of yours.”
— Testimonial attribution, Name · Role · Department
04

Buttons

CTA system · light + dark contexts
Get Help Now Get Help Now
Get Help Now Get Help Now
Explore Programs
Verify Insurance
Get Help Now Verify Insurance
Get Help Now Verify Insurance
05

Image Overlays

near-black cinematic system

All photographic surfaces use the near-black cinematic family. Orange overlays are deprecated. Use the directional sweep for hero, the bottom fade for cards, the center wash for testimonials, and the subtle wash for decorative section tints.

▶ Near-Black Cinematic — approved overlay system
Chateau Health & Wellness
Where first responders
reclaim their lives
Get Help Now
Verify Insurance
cinematic-hero · var(--overlay-cinematic-hero)
Blue Split
Text-left / image-right layouts
overlay-blue
Cinematic Bottom Fade
Program cards · team photos · gallery tiles
overlay-cinematic-bottom
Cinematic Center
Testimonial full-bleed · centered text sections
overlay-cinematic-center
Cinematic Subtle
Section tints · decorative wash
overlay-cinematic-subtle
✕ Deprecated — orange overlays (do not use in new work)
Deprecated
overlay-orange
Replaced by overlay-cinematic-center
Deprecated
overlay-warm
Replaced by overlay-cinematic-subtle
06

Spacing & Tokens

space · radius · elevation

Space Scale

--space-2 · 8px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px
--space-16 · 64px
--space-20 · 80px

Border Radius

sm·4
md·8
lg·12
pill

Shadows

sm
card
hover
lg
07

Cards

paths · approach · banners · accreditation · supporting
Path Cards — Who We Serve
For those in service

First Responders

Support for PTSD, trauma, depression, anxiety, and substance use, built for the culture.

  • Confidential, structured care
  • Family support options
  • Admissions support for employers
Explore First Responder Care
For families

Help for a Loved One

Guidance for spouses, parents, and families, plus next steps that actually reduce uncertainty.

  • What to say, what not to say
  • How admissions works
  • Family programming overview
Get Family Guidance
For professionals

Adults 26+

Care designed for working adults and established life patterns, privacy, and performance.

  • Trauma-informed mental health
  • Co-occurring support
  • Discreet admissions process
Explore Adult Programs
Approach Card — image + checklist

Holistic Approach

We treat the whole person through evidence-based therapies combined with wellness practices.

  • Individual & group therapy
  • Mindfulness & meditation
  • Nutrition & fitness programs
  • Adventure therapy in nature
Explore Our Approach
Image Banner Card — Program Spotlight (4 variants)
Variant 1 — Dimmed image + dark gradient overlay

Solves: preserves a full-bleed cinematic feel while guaranteeing legibility. Image opacity dropped to 55% under a 0.85→0.20 directional gradient — heading clears ~13:1 and body copy ~9.5:1, comfortably above WCAG AA 4.5:1.

Variant 2 — Split layout

Solves: zero contrast compromise — image at full opacity on its side, text on pure white. Body ≈ 12.6:1, heading ≈ 9.7:1. Best for environmental hero shots worth preserving faithfully.

Variant 3 — Framed image

Solves: editorial, calm presentation — image contained in an inset rounded frame. Same contrast as Variant 2 with a "card-within-card" feel. Best for program-directory lists with many banners in sequence.

Variant 4 — Full-bleed scrim

Solves: maximum cinematic impact — image at 100% with a one-sided dark scrim (0.05 → 0.85 black) behind text only. White heading ≈ 17:1; body (white 0.88) ≈ 12.5:1. Editorial serif-italic ghost CTA replaces the prior burnt-orange pill.

Accreditation Card

Nationally Accredited & Recognized

Gold Seal of Approval
FOP Approved Provider

“Meeting the highest standards in healthcare quality and safety.”

Supporting — Stat, Value, Blog
14
Bed Boutique
4.8/5
Google Rating
12+
Years of Care
Specialized Expertise

First-responder-specific tracks, peer support, and confidentiality built for the culture.

First Responders

Understanding PTSD in Law Enforcement

6 min read · April 2026
08

Photography

facility · team · program
Commons
Commons / Great Room
Reception
Reception Desk
Lobby Logo
Lobby Logo Wall
Bedroom
Client Bedroom
Entrance
Entry Foyer
Therapy
Therapy Office
Team
Staff Team
With dog
Therapy Dogs