Design Reference

LoanOfficer-T1-Dark
21st Century Lending

A glassy dark dashboard that makes a solo broker feel like a slick data product — the dark twin of LoanOfficer-T1-Light.

Design style: Modern / Fintech Mood: Confident · Fintech-modern · "Platform with a person" Category: Solo mortgage broker / loan officer
c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Loan Officers\LoanOfficer-T1-Dark\style-guide.html
Color Palette

Blue + cyan on a near-black "eigengrau" ground with a faint dot-grid texture. Values are the template's actual --custom-property tokens.

Primary — blues
Bluetiful
--bluetiful
#4353FF
rgb(67, 83, 255)
Sky (hover)
--sky
#197BFF
rgb(25, 123, 255)
Hadfield
--hadfield
#2563EB
rgb(37, 99, 235)
Bluetiful 2
--bluetiful2
#4284F3
rgb(66, 132, 243)
Accent — cyan & semantic
Caribbean (accent)
--caribbean
#06B6D4
rgb(6, 182, 212)
Success
--success
#2BC54D
rgb(43, 197, 77)
Warning / stars
--warning
#FFB542
rgb(255, 181, 66)
Background — dark grounds
Eigengrau (body)
--eigengrau
#171A1F
rgb(23, 26, 31)
Dark Void
--dark-void
#12151A
rgb(18, 21, 26)
Black Knight
--black-knight
#00050D
rgb(0, 5, 13)
Vapor (light panel)
--vapor
#F3FFFF
rgb(243, 255, 255)
Lighthouse
--lighthouse
#F2F5F7
rgb(242, 245, 247)
Text
White (headings)
--white
#FFFFFF
rgb(255, 255, 255)
Text (body)
--t2
#D6DAE4
rgb(214, 218, 228)
Muted
--muted
#888888
rgb(136, 136, 136)
Body (on light)
--body
#555555
rgb(85, 85, 85)
Text dark
--t-dark
#444B57
rgb(68, 75, 87)
Borders & tints (rgba tokens)
Border subtle
--b-subtle
rgba(255,255,255,.06)
Border mid
--b-mid
rgba(255,255,255,.13)
Border strong
--b-strong
rgba(255,255,255,.3)
Cyan soft
--cy-soft
rgba(6,182,212,.3)
Cyan bg
--cy-bg
rgba(6,182,212,.06)

Signature: blue→cyan gradients throughout (e.g. linear-gradient(165deg,rgba(67,83,255,.16),rgba(6,182,212,.04)) on feature cells) plus radial glow "orbs" behind heroes.

Typography

Display: Mona Sans Expanded (weight 300, tight tracking -.015em). Body: Mona Sans (400). Loaded from fonts.cdnfonts.com. Weights used: 300 / 400 / 500 / 600.

H1 · disp 300
clamp(42–90px)Borrow smarter
H2 · disp 300
clamp(32–54px)Someone who's done this 4,000 times
H3 · 600 · 30pxFeature heading
H4 · 600 · 21pxCard title
H5 · 600 · 17pxSub heading
H6 · 600 · uppercaseSection footer label
Lede · 300 · 18pxCompare 60+ lenders in one conversation. No jargon, no runaround — a real advisor with the numbers to back it up.
Body · 400 · 15pxBody copy is set in Mona Sans at 15px with a 1.6 line-height in the muted-light text color --t2 #D6DAE4 against the dark ground.
Small · 13px mutedFine print, labels, and captions use the muted grey #888.
Nav / eyebrow
600 · .16em upperWhy 21st Century

The huge display numerals (hero watermark, process rail, stat band) also use Mona Sans Expanded 300 with cyan accent units (e.g. $2.3B, 4,000).

Spacing & Radius System

Generous radius language (999 / 24 / 18 / 13 / 11 / 10px), a 1280px container, and a single shared easing curve.

Border-radius scale
999px · pills / tags
24px · panels / CTA
18px · bento cards
13px · icon tiles
11px · inputs / chips
10px · buttons
Layout & motion tokens
Container max
--maxw: 1280px
Wrap padding
0 34px (mobile 0 20px)
Section padding
120px 0 (mobile 84px 0)
Bento gap
14px
Section head margin
56px bottom
Easing
--ease: cubic-bezier(.22,.61,.36,1)
Button transition
.26s var(--ease)
Dot-grid texture
26px 26px radial
Buttons

Soft-rounded rectangles (10px). Hover the samples to see the real states.

Primary (.btn-primary): solid --bluetiful #4353FF, white text, large soft blue glow 0 10px 34px -10px rgba(67,83,255,.75). Hover → background shifts to --sky #197BFF and lifts translateY(-2px).
Ghost (.btn-ghost): 1px strong white border, white text. Hover → border + text turn --caribbean cyan with a faint cyan wash. On both, the inline arrow SVG slides right 4px on hover.

Form Elements

Translucent inputs (rgba(255,255,255,.04)) with 11px radius; focus turns the border blue and adds a faint blue fill. Click a field to see the focus state.

Select uses a custom inline-SVG chevron (grey #888). Placeholder text is #5b626c. The range slider thumb is a 22px blue circle with a white ring and blue glow — used in the "Find your fit" calculator.

UI Components

Signature reusable pieces rendered with their real styles.

Section eyebrow / tag & lender chip
Why 21st Century CommBank Westpac ING
Bento cards (18px glass; cyan top-wipe + lift on hover)

60+ lenders, one advisor

The feature cell rides a blue→cyan gradient with a blue border — used for the hero benefit in the bento grid.

Explore lenders →

$2.3B settled

Standard glass card: translucent white fill, subtle border, cyan accent wipe animates in on hover.

Learn more →
Navigation — rate ticker + blurred nav with segmented pill
OO P&I  5.74%Investor  6.09%Fixed 3yr  5.89%
✆ 1300 000 000

Nav is sticky, rgba(18,21,26,.78) with backdrop-filter:blur(18px). Active tab gets a blue tint + inset blue ring.

Stat band (oversized Expanded numerals, cyan units)
$2.3B
Total settled
4,000+
Loans placed
60+
Lenders on panel
Footer
Ready when you are.

Marcus Reed — Principal Lending Advisor. Australian Credit Licence holder. $2.3B settled across 60+ lenders.

infig

Company

AboutServicesContact

Loans

Home loansRefinanceInvestment

Icons throughout are inline SVG (stroke-based, currentColor) — no icon font. Cyan accents on hover across nav, footer links and social chips.

Visual Example — Combined Showcase

Buttons, type, a card and a form together on the template's real eigengrau ground.

Find your fit

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

Compare 60+ lenders in one conversation — with a real advisor who's settled $2.3B.

Your borrowing power

Real glass feature card on a blue→cyan gradient, with the cyan top-wipe on hover.

Generated as a design reference for LoanOfficer-T1-Dark · 21st Century Lending. All tokens, fonts, and component styles mirror the template's implementation. No tracking or external scripts.