Brand Identity System
Berry Rock Homes
Style Guide
Visual identity standards for content creators, designers, and marketing partners.
01 — Color
Primary Brand Colors
BRH Navy
#1a3056
Primary brand color. Use for headings, navigation, footer, and anchor elements. Commands trust and authority.
BRH Coral
#E8553D
Action color. CTAs, buttons, highlights, and emphasis. Warm and energetic — use to drive attention and clicks.
BRH Sky Blue
#38bdf8
Accent and highlight color. Step numbers, links, icon accents, and decorative UI elements. Friendly and approachable.
ⓘ
Hover states: Coral darkens to #c43e29 on hover. Navy darkens to #152335 on hover. Sky deepens to #0ea5e9.
Navy Tint Scale
#1a3056
#24405d
#2a4b6f
#335e89
#4376a4
#6494bd
#95b7d3
#c1d3e5
#dde7f1
#f0f4f8
Coral Tint Scale
#c43e29
#E8553D
#FF7C6A
#e4a4a4
#fae8df
#fdf5f0
Sky Blue Tint Scale
#0369a1
#0ea5e9
#38bdf8
#7dd3fc
#bae6fd
#f0f9ff
02 — Typography
Outfit — The BRH Font
ⓘ
Outfit is the sole brand typeface. It is a geometric sans-serif available free on Google Fonts. All digital and print content should use Outfit exclusively. Download at fonts.google.com/specimen/Outfit.
Display — 56px / 800 weight
Own Your Future.
H1 Heading — 40px / 700 weight
Your Path to Homeownership Starts Here
H2 Heading — 28px / 600 weight
How Our Lease-to-Own Program Works
H3 Heading — 20px / 600 weight
Step 1: Get Pre-Qualified in Minutes
Body Copy — 16px / 400 weight
Berry Rock Homes gives aspiring homeowners a clear, affordable path to ownership. Our lease-to-own program is designed for people who are ready for a home but need a bridge to get there — no perfect credit required.
Small / Caption — 13px / 400 weight
Terms and conditions apply. Program availability varies by location. Contact us for full program details.
Eyebrow Label — 11px / 700 weight / uppercase / tracked
How It Works
03 — UI Elements
Button Styles
On Light Backgrounds
Get Pre-Qualified
Learn More
Explore Homes
See How It Works
On Dark (Navy) Backgrounds
Get Pre-Qualified
Explore the Pathway
Learn More
04 — Usage Guidelines
Color Application Rules
Do
- Use BRH Navy for all headings and primary text
- Use BRH Coral exclusively for CTAs and key action elements
- Use Sky Blue as an accent — step numbers, links, icon highlights
- Pair navy backgrounds with white or sky blue type
- Use coral tints (50–100) for warm background sections
- Maintain sufficient contrast — navy on white, white on coral/navy
Don't
- Don't use coral for body text or decorative elements
- Don't place sky blue on white without sufficient weight/size
- Don't use more than 2 primary colors in a single component
- Don't mix coral and sky blue as competing focal points
- Don't substitute other fonts for Outfit
- Don't use font weights below 400 for body text
Coral — Primary CTA
- "Get Pre-Qualified" / "Apply Now" buttons
- Key stat callouts and highlights
- Badge labels and tags
- Inline emphasis in headlines
Navy — Structure & Authority
- All H1–H3 headings
- Navigation bar
- Footer background
- Secondary buttons and borders
Sky Blue — Friendliness & Flow
- Step / process numbers
- Hyperlinks
- Icon accents and indicators
- Decorative UI elements
Neutrals — Supporting Roles
- Body copy: slate-600 (#4b5563)
- Card / panel backgrounds: #f0f4f8
- Off-white page background: #fafafa
- Dividers and borders: #e5e5e5
05 — Quick Reference
All Values at a Glance
| Name |
Hex |
Role |
Swatch |
| BRH Navy |
#1a3056 |
Primary / Headings / Nav / Footer |
|
| BRH Coral |
#E8553D |
CTAs / Buttons / Highlights |
|
| BRH Sky Blue |
#38bdf8 |
Accents / Step Numbers / Links |
|
| Coral Hover |
#c43e29 |
CTA hover state |
|
| Sky Hover |
#0ea5e9 |
Sky blue hover/active state |
|
| Body Text |
#4b5563 |
Paragraph / secondary copy |
|
| Off-White BG |
#fafafa |
Page background |
|
| Typeface |
Outfit |
All text — weights 300–900 |
Aa |
Berry Rock Homes
Brand Style Guide v1.0 — April 2026
Questions? Contact the BRH design lead
for brand assets and template files.