EP WEALTH ADVISORS
Design System
A working inventory of the visual language, reusable elements, and writing conventions used across the current site.
System at a glance
3
Font families
217
Color tokens
28
Text styles
15
Local components
FOUNDATIONS
Color system
The project contains brand, neutral, semantic, feedback, and extended tonal ramps. Every token is shown below with its current light-mode value.
core
25
rgb(253, 253, 253)
100
rgb(245, 245, 245)
500
rgb(107, 114, 120)
600
rgb(0, 48, 87)
600
rgb(83, 88, 98)
600
rgb(212, 93, 0)
800
rgb(43, 47, 51)
900
rgb(148, 65, 0)
900
rgb(24, 29, 39)
White
rgb(255, 255, 255)
navy
25
rgb(230, 234, 238)
50
rgb(204, 214, 221)
100
rgb(153, 172, 188)
200
rgb(128, 152, 171)
300
rgb(102, 131, 154)
400
rgb(51, 89, 121)
500
rgb(26, 69, 104)
600
rgb(0, 48, 87)
700
rgb(0, 43, 78)
800
rgb(0, 38, 70)
900
rgb(0, 29, 52)
sky
25
rgb(252, 252, 253)
50
rgb(224, 235, 243)
100
rgb(194, 214, 231)
200
rgb(179, 204, 225)
300
rgb(163, 194, 218)
400
rgb(133, 173, 206)
500
rgb(117, 163, 200)
600
rgb(102, 153, 194)
700
rgb(92, 138, 175)
800
rgb(82, 122, 155)
900
rgb(61, 92, 116)
teal
25
rgb(230, 242, 245)
50
rgb(204, 230, 236)
100
rgb(153, 204, 216)
200
rgb(128, 192, 207)
300
rgb(102, 179, 197)
400
rgb(51, 153, 177)
500
rgb(26, 141, 168)
600
rgb(0, 128, 158)
700
rgb(0, 115, 142)
800
rgb(0, 102, 126)
900
rgb(0, 77, 95)
rust
25
rgb(251, 239, 230)
50
rgb(246, 223, 204)
100
rgb(238, 190, 153)
200
rgb(234, 174, 128)
300
rgb(229, 158, 102)
400
rgb(221, 125, 51)
500
rgb(216, 109, 26)
600
rgb(212, 93, 0)
700
rgb(191, 84, 0)
800
rgb(170, 74, 0)
900
rgb(148, 65, 0)
taupe
25
rgb(243, 242, 241)
50
rgb(230, 228, 226)
100
rgb(205, 201, 197)
200
rgb(193, 188, 183)
300
rgb(181, 174, 169)
400
rgb(156, 147, 140)
500
rgb(143, 134, 125)
600
rgb(131, 120, 111)
700
rgb(118, 108, 100)
800
rgb(105, 96, 89)
900
rgb(79, 72, 67)
sage
25
rgb(248, 248, 245)
50
rgb(241, 242, 236)
100
rgb(227, 228, 217)
200
rgb(221, 222, 207)
300
rgb(214, 215, 197)
400
rgb(200, 201, 178)
500
rgb(193, 195, 169)
600
rgb(186, 188, 159)
700
rgb(167, 169, 143)
800
rgb(149, 150, 127)
900
rgb(112, 113, 95)
wine
25
rgb(243, 233, 236)
50
rgb(231, 210, 217)
100
rgb(207, 166, 179)
200
rgb(195, 144, 160)
300
rgb(182, 121, 141)
400
rgb(158, 77, 103)
500
rgb(146, 54, 84)
600
rgb(134, 32, 65)
700
rgb(121, 29, 59)
800
rgb(107, 26, 52)
900
rgb(80, 19, 39)
neutral
0
rgb(255, 255, 255)
25
rgb(250, 251, 252)
50
rgb(247, 248, 250)
50
rgb(246, 244, 239)
100
rgb(241, 243, 246)
100
rgb(233, 228, 218)
200
rgb(231, 234, 238)
200
rgb(216, 210, 199)
300
rgb(214, 219, 225)
400
rgb(164, 167, 174)
500
rgb(107, 114, 120)
500
rgb(107, 114, 120)
600
rgb(83, 88, 98)
600
rgb(83, 88, 98)
700
rgb(65, 70, 81)
700
rgb(65, 70, 81)
800
rgb(43, 47, 51)
900
rgb(24, 29, 39)
900
rgb(43, 47, 51)
Black
rgb(0, 0, 0)
Slate-950
rgb(28, 42, 54)
White
rgb(255, 255, 255)
paper
25
rgb(253, 252, 249)
50
rgb(251, 248, 244)
100
rgb(247, 242, 233)
200
rgb(238, 229, 216)
300
rgb(225, 211, 193)
400
rgb(202, 185, 165)
success
25
rgb(246, 254, 249)
50
rgb(236, 253, 243)
100
rgb(209, 250, 223)
200
rgb(166, 244, 197)
300
rgb(108, 233, 166)
400
rgb(50, 213, 131)
500
rgb(18, 183, 106)
600
rgb(3, 152, 85)
700
rgb(2, 122, 72)
800
rgb(5, 96, 58)
900
rgb(5, 79, 49)
warning
25
rgb(255, 252, 245)
50
rgb(255, 250, 235)
100
rgb(254, 240, 199)
200
rgb(254, 223, 137)
300
rgb(254, 200, 75)
400
rgb(253, 176, 34)
500
rgb(247, 144, 9)
600
rgb(220, 104, 3)
700
rgb(181, 71, 8)
800
rgb(147, 55, 13)
900
rgb(122, 46, 14)
error
25
rgb(255, 251, 250)
50
rgb(254, 243, 242)
100
rgb(254, 228, 226)
200
rgb(254, 205, 202)
300
rgb(253, 162, 155)
400
rgb(249, 112, 102)
500
rgb(240, 68, 56)
600
rgb(217, 45, 32)
700
rgb(180, 35, 24)
800
rgb(145, 32, 24)
900
rgb(122, 39, 26)
accent
Navy
rgb(0, 48, 87)
Rust
rgb(212, 93, 0)
Sage
rgb(186, 188, 159)
Sky
rgb(102, 153, 194)
Taupe
rgb(131, 120, 111)
Teal
rgb(0, 128, 158)
Wine
rgb(134, 32, 65)
brand
Blue-500
rgb(102, 153, 194)
Burgundy-700
rgb(134, 32, 65)
Navy-900
rgb(0, 48, 87)
Orange-600
rgb(212, 93, 0)
Sage-400
rgb(186, 188, 159)
Teal-600
rgb(0, 128, 158)
WarmGray-600
rgb(131, 120, 111)
background
Accent
rgb(102, 153, 194)
Accent Subtle
rgb(224, 235, 243)
Brand
rgb(0, 48, 87)
Brand Strong
rgb(0, 29, 52)
Brand Subtle
rgb(230, 234, 238)
Canvas
rgb(251, 248, 244)
Disabled
rgb(241, 243, 246)
Error Subtle
rgb(254, 243, 242)
Paper
rgb(247, 242, 233)
Primary
rgb(255, 255, 255)
Secondary
rgb(247, 242, 233)
Success Subtle
rgb(236, 253, 243)
Tertiary
rgb(238, 229, 216)
Warning Subtle
rgb(255, 250, 235)
border
Accent
rgb(102, 153, 194)
Brand
rgb(0, 48, 87)
Default
rgb(214, 219, 225)
Error
rgb(240, 68, 56)
Focus
rgb(117, 163, 200)
Strong
rgb(164, 167, 174)
Subtle
rgb(231, 234, 238)
text
Brand
rgb(0, 48, 87)
Brand Strong
rgb(0, 29, 52)
Disabled
rgb(164, 167, 174)
Error
rgb(217, 45, 32)
Link
rgb(0, 48, 87)
Link Hover
rgb(0, 43, 78)
On Accent
rgb(0, 29, 52)
On Brand
rgb(255, 255, 255)
Primary
rgb(24, 29, 39)
Secondary
rgb(65, 70, 81)
Success
rgb(2, 122, 72)
Tertiary
rgb(107, 114, 120)
Warning
rgb(181, 71, 8)
feedback
Error
rgb(217, 45, 32)
Info
rgb(102, 153, 194)
Success
rgb(3, 152, 85)
Warning
rgb(247, 144, 9)
semantic · action
Accent
rgb(212, 93, 0)
Primary
rgb(0, 48, 87)
Secondary
rgb(102, 153, 194)
semantic · backgrounds
Inverse
rgb(28, 42, 54)
Page
rgb(246, 244, 239)
Section
rgb(255, 255, 255)
Section-Alt
rgb(233, 228, 218)
Surface
rgb(255, 255, 255)
Surface-Muted
rgb(246, 244, 239)
semantic · border
Default
rgb(216, 210, 199)
Strong
rgb(131, 120, 111)
semantic · status
Error
rgb(217, 45, 32)
Success
rgb(3, 152, 85)
semantic · text
Inverse
rgb(255, 255, 255)
Link
rgb(0, 48, 87)
Primary
rgb(43, 47, 51)
Secondary
rgb(107, 114, 120)
FOUNDATIONS
Typography
Museo Sans is the project’s sole text-style typeface and should be used across headings, body copy, labels, and controls.
Museo Sans
Aa Bb Cc 0123
Text style presets
Body/Body · Museo Sans · 400 · 16px · 24px
Build and preserve your wealth with confidence.
Body/Body Medium · Museo Sans · 300 · 18px · 28px
Build and preserve your wealth with confidence.
Body/Large · Museo Sans · 400 · 18px · 28px
Build and preserve your wealth with confidence.
Body/Strong · Museo Sans · 600 · 16px · 25px
Build and preserve your wealth with confidence.
Button · Museo Sans · 600 · 16px · 24px
Get My Free Assessment
Caption · Museo Sans · 400 · 12px · 16px
Supporting information and important details.
Display · Museo Sans · 600 · 56px · 62px
Build and preserve your wealth with confidence.
Display · Museo Sans · 600
Build and preserve your wealth with confidence.
Display · Museo Sans · 600
Build and preserve your wealth with confidence.
Eyebrow · Museo Sans · 600 · 13px · 16px
FINANCIAL PLANNING
Heading 1 · Museo Sans · 600
Build and preserve your wealth with confidence.
Heading 1 · Museo Sans · 600
Build and preserve your wealth with confidence.
Heading 2 · Museo Sans · 600
Build and preserve your wealth with confidence.
Heading 2 · Museo Sans · 600
Build and preserve your wealth with confidence.
Heading 3 · Museo Sans · 400
Build and preserve your wealth with confidence.
Heading 3 · Museo Sans · 400
Build and preserve your wealth with confidence.
Heading 4 · Museo Sans · 600
Build and preserve your wealth with confidence.
Heading 4 · Museo Sans · 600
Build and preserve your wealth with confidence.
Headings/Heading 1 · Museo Sans · 600 · 48px · 60px
Build and preserve your wealth with confidence.
Headings/Heading 2 · Museo Sans · 600 · 32px · 40px
Build and preserve your wealth with confidence.
Headings/Heading 3 · Museo Sans · 400 · 24px · 32px
Build and preserve your wealth with confidence.
Headings/Heading 4 · Museo Sans · 600 · 20px · 28px
Build and preserve your wealth with confidence.
Label · Museo Sans · 400 · 14px · 18px
FINANCIAL PLANNING
Link · Museo Sans · 400 · 16px · 1.5em
Explore financial planning services
Link · Museo Sans · 400
Explore financial planning services
Link · Museo Sans · 400
Explore financial planning services
Small · Museo Sans · 400 · 14px · 20px
Supporting information and important details.
Sub-Header · Museo Sans · 600 · 16px · 24px
FINANCIAL PLANNING
INTERFACE
Elements and components
The current project combines reusable canvas components with embedded campaign forms. The specimens below show the principal interaction patterns and component states.
Buttons
Selection controls
$750K
$1M+
MOST COMMON
Link styles
Local component index
01
Header
Page structure
02
_Feature text
Content section
03
Button
Interaction
04
Footer
Page structure
05
Navigation
Page structure
06
Awards
Content section
07
About EPWA
Content section
08
About EPWA - Metrics
Content section
09
Featured in:
Content section
10
CTA
Content section
11
What Happens Next
Content section
12
_Feature text 2
Content section
13
4 Selection
Interaction
14
Selection Button
Interaction
15
Disclousures
Legal
CONTENT
Writing style
The brand voice makes complex financial topics feel understandable, specific, and actionable without losing authority.
Professional and reassuring
Lead with expertise, then translate financial complexity into plain, useful language.
Clear and benefit-led
Use concise sentences, concrete outcomes, and scannable explanations instead of abstract claims.
Specific and credible
Use accurate terms such as fiduciary, fee-only, investable assets, RMDs, and tax-loss harvesting—then explain their relevance.
Do
Use Title Case for headlines. Start CTAs with a clear verb. State the benefit. Support claims with specific, verifiable detail. Keep complex explanations approachable.
Avoid
Avoid passive phrasing, generic promises, unexplained jargon, alarmist language, and vague calls to action such as Learn More when a clearer benefit is available.
CTA formula
Action verb + tangible value + low-friction qualifier
Get My Free Assessment · Download Your Free Guide · Schedule Your Free Assessment
REFERENCE
Patterns and usage rules
These values summarize the reusable layout and interface decisions documented in this design system.
Spacing
8px dense gaps · 10px vertical input padding · 14px horizontal input padding · 16px form spacing · 96px desktop section padding
Corner radius
Use 8px for buttons, inputs, and cards. Keep structural and full-width layout containers square.
Elevation
Use one subtle shadow for controls and cards. Avoid heavy layering or decorative depth.
Layout
Use stacks as the default composition model. Use grids for repeated feature groups and inventories.
Forms
Campaign forms are currently embedded. Match white fields, 8px corners, compact labels, and subtle elevation when creating native equivalents.
Iconography
Use restrained line icons inside square 8px containers. Keep icons secondary to the content they clarify.