Template Style Guide

LoanOfficer-T1-Light
21st Century Lending

Design style: Modern (confident fintech). One-line identity: the bright version of the broker dashboard — a clean, airy, trust-forward daytime UI; the light twin of LoanOfficer-T1-Dark.

Category: Solo mortgage broker / loan officer Brand: Marcus Reed, Principal Lending Advisor Entry: home-light.html
c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Loan Officers\LoanOfficer-T1-Light
02 — Color Palette

Brand accents are shared with the dark twin; the ground, surfaces, text and borders are the light remap (body.light). Cyan is darkened to #0A8AA0 for contrast on white. Note: the ticker, footer and .sec-black blocks stay dark on purpose and there restore the raw cyan #06B6D4.

Primary (brand)
--bluetiful
#4353FF · rgb(67,83,255)
--sky (primary hover)
#197BFF · rgb(25,123,255)
--hadfield
#2563EB · rgb(37,99,235)
--bluetiful2
#4284F3 · rgb(66,132,243)
Accent
--caribbean (light)
#0A8AA0 · rgb(10,138,160)
cyan (dark anchors)
#06B6D4 · rgb(6,182,212)
--success
#2BC54D · rgb(43,197,77)
--warning (stars)
#FFB542 · rgb(255,181,66)
Background / Surface
--eigengrau (ground)
#F4F7FB · rgb(244,247,251)
--dark-void (surface)
#FFFFFF · rgb(255,255,255)
inset fills (filt/slot)
#EDF1F7 · rgb(237,241,247)
--black-knight (anchors)
#00050D · rgb(0,5,13)
Text
--white (headings/ink)
#0C1016 · rgb(12,16,22)
--t2 (body)
#3B4350 · rgb(59,67,80)
--t-dark
#444B57 · rgb(68,75,87)
--muted
#667085 · rgb(102,112,133)
--body
#555555 · rgb(85,85,85)
Borders (on light)
--b-subtle
rgba(16,24,40,.08)
--b-mid
rgba(16,24,40,.13)
--b-strong
rgba(16,24,40,.28)
--cy-bg
rgba(6,182,212,.10)
03 — Typography
Display / Headings
Mona Sans Expanded
Body
Mona Sans
Icons
inline SVG
Display weight 300Body 400Medium 500Semibold 600
Heading hierarchy (Mona Sans Expanded, weight 300)
H1 · clamp→90pxBorrow with confidence
H2 · clamp→54pxOne application, 60+ lenders
H3 · ~30pxFind your fit
H4 · ~22pxFixed-rate refinance
H5 · ~18pxIndicative rates today
H6 · ~15pxPrincipal Lending Advisor
Body / lede / small

Lede — One application, 60+ lenders, and an advisor who treats your loan like a strategy, not a transaction. (18px, weight 300, --t2)

Body — Modern technology doing the busywork, a real person making the calls. Base body text is 15px in Mona Sans, color --t2 (#3B4350), line-height 1.6.

Small — Joint income profile · indicative only. (13px, --muted #667085)

Tracked uppercase label / eyebrow
Marcus Reed · Principal Lending Advisor
04 — Spacing & Radius
Container max-width
--maxw: 1280px
Wrap padding
0 34px (mobile 0 20px)
Section padding
120px 0 (mobile 84px)
Section head margin
margin-bottom: 56px
Bento gap
14px
Easing curve
cubic-bezier(.22,.61,.36,1)
Transition
.2s–.32s
Card shadow
0 1px 2px rgba(16,24,40,.05)
Border-radius scale
8px · nav pill item
10px · buttons
11px · inputs / chips
13px · icon tile
18px · cards / tiles
24px · large wraps / CTA
999px · tag pill
05 — Buttons

Primary--bluetiful #4353FF fill, white text, glow shadow 0 10px 34px -10px rgba(67,83,255,.75); radius 10px, padding 14px 24px, weight 600. Hover: background shifts to --sky #197BFF and lifts translateY(-2px); the arrow icon slides +4px right.
Secondary (ghost) — transparent with a --b-strong border; on the light theme its text is #0C1016. Hover: border + text turn cyan --caribbean #0A8AA0 with a faint --cy-bg wash. Hover the samples above to see the real states.

06 — Form Elements

Light fields use a #F4F7FB fill, --b-mid border, 11px radius, 14px×16px padding, #0c1016 text. Focus swaps the border to --bluetiful with a rgba(67,83,255,.06) wash.

07 — UI Components
Section tag / eyebrow (.tag)
Why 21st Century
Card (.bx bento box)

60+ lenders, one application

We compare the whole panel and bring you the loan that actually fits — not the one that pays the most commission.

Explore lenders →

White surface, 18px radius, --b-mid border, soft shadow. Hover lifts the card and reveals a cyan top-edge gradient. Icon chips on light become solid --bluetiful with white glyphs.

Navigation (sticky segmented pill nav)

Translucent white bar (rgba(255,255,255,.84) + 18px blur). Active pill uses rgba(67,83,255,.1) with a blue inset ring and --bluetiful text.

Badge / lender chip & stars
ANZ ★★★★★ 4.9 · 2,300+ reviews
Footer (INTENTIONAL dark anchor)
Ready to talk numbers with someone who's on your side?

21st Century Lending — modern mortgage advice, 60+ lenders on a single application.

The footer, the top ticker and .sec-black blocks deliberately stay dark (--black-knight #00050D) in this light theme for contrast, and inside them the tokens revert to the dark palette (raw cyan #06B6D4, light text #D6DAE4).

Icons

Inline SVG throughout (Lucide-style 24×24, 2px stroke, currentColor) — no icon font or external sprite.

08 — Visual Example
Marcus Reed · Principal Lending Advisor

Borrow with someone
who's done this 4,000 times.

One application, 60+ lenders, and an advisor who treats your loan like a strategy — not a transaction.

$2.3B settled

Across 2,300+ borrowers, on a single application comparing 60+ lenders.

See how it works →
Get my rate

Generated as a design reference for LoanOfficer-T1-Light. Values mirror the inline styles in home-light.html. No tracking or external scripts.