Internal Reference · v1.0
CMS Mortgage
Brand Guide
Design tokens, components, and patterns for CMS Mortgage digital products. Click color swatches to copy values.
Logos
Official logo assets and usage across backgrounds
Light Background
cms-logo.png
cms-icon.png
Brand Blue
cms-logo.png
cms-icon.png
Dark Navy
cms-logo.png
cms-icon.png
Colors
Brand palette — click to copy hex, Shift+click to copy CSS variable
💡 Click a swatch to copy its hex · Shift+Click to copy the CSS variable name
Brand Blues
Brand Oranges
Surfaces
Status Colors
Text
Typography
Gilroy for UI text, JetBrains Mono for numbers and labels
Gilroy — Primary Typeface
Used for all headings and body copy
Display / H1
800 · 4.5rem
The Home You Want, The Rate You Deserve
H2
700 · 2.5rem
Smarter Mortgages for Every Stage of Life
H3
600 · 1.875rem
FHA, VA, Conventional & More
H4
500 · 1.25rem
Work with a loan officer who has your back.
Body
400 · 1rem
We make the mortgage process simple, transparent, and human. Whether you're buying your first home or refinancing, our team guides you every step of the way.
Small / Caption
300 · 0.875rem
NMLS #12345 · Licensed in FL, TX, CA · Equal Housing Lender
JetBrains Mono — Numbers & Labels
Used for rates, loan amounts, stats, and data labels
Rate Display
3.875%
Stat Value
$487,500
Label
LOAN AMOUNT
Weights
Inputs
Text, number, select, and textarea — all interaction states
Text Input — States
Default
With Value
Error State
Please enter a valid phone number.
Success State
Number Input — with Prefix
Dollar Amount
Percentage
Select
Loan Purpose
Property Type
Textarea
Default
Error State
Please provide more detail about your situation.
Badges & Tickers
Agency tickers, tier badges, and process step circles
Agency Tickers
Used in TrustBar and loan product listings
Tier Badges
Escalating visual weight — Tier 4 uses gold/premium styling
Starter
weight: 600
Active
weight: 700
Advanced
weight: 800
Elite
weight: 900
Step Circles
Used in mortgage process flow visualizations
Small — 32px
Medium — 48px
Active vs Inactive