Our brand identity
This page documents the SimplyTrust design system including our color palette, typography, spacing conventions, and component patterns.
Logo
Download logos for media use
Color Palette
Click any color to copy the hex value
Primary Brand Colors
Primary Blue
--st-primary-blue
#5278F4
Default theme, articles, primary actions
Dark Blue
--st-dark-blue
#111F47
Dark backgrounds, headings, text
Neon Cyan
--st-neon-cyan
#1EC8E5
News, estate planning, accents
Modern Pink
--st-modern-pink
#FF3366
Life changes, probate, errors
Vibrant Green
--st-vibrant-green
#19C37D
Trusts, asset management, success
Gold Orange
--st-gold-orange
#F9A826
Estate terms, warnings
Bright Lavender
--st-bright-lavender
#A78BFA
Financial planning
Supporting Colors
Light Gray Background
#F2F4F7
Near Black
#1A1A1A
White
#FFFFFF
Tag Gray
#6B7280
Gray Scale
#F9FAFB
#F3F4F6
#E5E7EB
#D1D5DB
#9CA3AF
#6B7280
#4B5563
#374151
#1F2937
#111827
Typography
Our font families and heading hierarchy
Inter
Regular (400)
Medium (500)
Semibold (600)
Bold (700)
Used for body text, UI elements, headings, and all general content.
Bellota
Bold Italic (700)
Used exclusively for brand accent text in headlines. Always italic, always bold.
Heading Hierarchy
Spacing & Elevation
Border radius and shadow scales
Border Radius
Buttons and form inputs use sharp edges. Rounded corners are reserved for cards and badges.
none
0px
Buttons, inputs
rounded-xl
12px
Admin cards
rounded-2xl
16px
Content cards
rounded-full
9999px
Pills, badges
Shadow Scale
shadow-sm
Subtle
shadow-lg
Standard
shadow-xl
Interactive
shadow-2xl
Emphasized
shadow-brand
Brand (blue tint)
Component Examples
Buttons, cards, inputs, and badges
Buttons
Card Pattern (BlogPostCard)
Cards use: bg-white rounded-2xl overflow-hidden shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all duration-300
Understanding Living Trusts
A living trust is a legal document that places your assets into a trust during your lifetime, then transfers them to your beneficiaries when you pass away.
Estate Planning After Marriage
Getting married is an exciting milestone, but it also means your estate plan needs updating to reflect your new family structure.
Form Inputs
Inputs use sharp edges (no border-radius) per brand guidelines
This field has an error
Category Pills
Usage Guidelines
Quick reference for design consistency
Do
- Use CSS variables for colors (e.g., var(--st-primary-blue))
- Use sharp edges (no border-radius) on buttons and form inputs
- Apply rounded-2xl to content cards only
- Use Bellota only for italic headline accents
- Use shadow-xl for cards, shadow-2xl for hover states
- Maintain 1.6 line height for body text
Don't
- Hardcode hex values when CSS variables exist
- Add rounded corners to buttons or form fields
- Use Bellota for body text or non-italic headings
- Mix border radius sizes inconsistently
- Skip the hover elevation effect on interactive cards
- Use Inter weights outside 400-700 range