Color Palette
Brand colors and usage guidelines
Core Brand Colors
Irreantum
#133351
irreantum
Skyline
#3DB3E3
skyline
Sapphire
#267283
sapphire
Jade
#40C9A2
jade
Accent Colors
Sunset
#FFC569
sunset
Lilac
#C7A8E0
lilac
Ember
#FF564F
ember
Mint
#A3F7B5
mint
Neutral Colors
White
#FFFFFF
white
Sand Light
#FDFDFE
sand-light
Sand
#F3F6F8
sand
Stone
#6A7177
stone
Midnight
#02070A
midnight
Typography
Type scale and font families
Primary
Aeonik
Headlines, body text, UI elements
Monospace
AeonikFono
Code, numbers, data
Labels
DIN Next
Eyebrows, labels, categories
Display XL
text-display-xl48pxBanking made simple
Hero headlines
Display LG
text-display-lg36pxBanking made simple
Section headers
Display MD
text-display-md30pxBanking made simple
Subsection titles
Display SM
text-display-sm24pxBanking made simple
Card titles
Body
text-body15pxBanking made simple
Body text
Eyebrow
text-eyebrow12pxCHECKING ACCOUNTS
Labels
Section Headers
Eyebrow component and heading styles
theme: lightChecking Accounts
Choose the Right Account
theme: darkMember Benefits
Exclusive Perks
Form Elements
Input fields and controls
Cards
Card component variants
Default Card
Standard card styling
Cards group related content and provide visual hierarchy.
Elevated Card
Enhanced shadow depth
More prominent visual separation from background.
Page Sections
SectionWrapper configuration and component standards
SectionWrapper Props
| Property | Options | Description |
|---|---|---|
theme | light | dark | brand | Color scheme and text colors |
spacing | none | compact | default | spacious | Vertical padding amount |
background | transparent | white | sand | irreantum | midnight | Background color |
Spacing Guidelines
compactpy-16 (64px) - Use for dense content or when sections need to feel connected
defaultpy-32 (128px) - Standard spacing for most sections
spaciouspy-40 (160px) - Use for hero-like sections or important content
Button Size Standards
size="wide"Use for primary section CTAs (bottom of sections)
size="default"Use for buttons inside cards or inline actions
Animation Delay Pattern
| Element | Delay | Example |
|---|---|---|
| Eyebrow | 0 | <AnimatedTitle delay={0}> |
| Heading | 0.08 | <AnimatedTitle delay={0.08}> |
| Description | 0.16 | <AnimatedTitle delay={0.16}> |
| Content items | 0.1 + index * 0.05 | <AnimatedTitle delay={0.1 + index * 0.05}> |
Page Builder Components
Live component previews with navigation between variants
Content & Information
9 components
Content Section
Flexible content with prose, features, or cards modes
contentSectionAbout Us
Banking Built on Your Values
At Deseret First Credit Union, we believe financial services should align with your principles. As a member-owned institution, we reinvest profits into better rates, lower fees, and community programs that matter to you.
Our 77,000+ members enjoy personalized service from people who understand their unique needs, whether saving for a mission, funding education, or building generational wealth.
Cards & CTAs
4 components
CTA Section
Call-to-action cards with gradient backgrounds
ctaSection
Join 77,000+ Members Banking With Purpose
Experience the credit union difference with better rates, personalized service, and a commitment to your financial success.
Products & Services
2 components
Account Product Pages
4 components
Product Highlight
Hero-style spotlight for a single product with rate display
productHighlightSectionMost Popular
High-Yield Savings
Mission Savings Account
Earn more while you save for what matters most. Our Mission Savings account offers one of the highest APYs in Utah.
4.15%APY
on balances up to $15,000
- No monthly maintenance fees
- No minimum balance requirement
- Unlimited deposits
- Free online & mobile banking
- NCUA insured up to $250,000
*APY = Annual Percentage Yield. Rate effective as of January 2024. Rates subject to change.
Mobile & Location
3 components
Mobile Tools
Mobile app features showcase
mobileToolsSectionMobile Banking
Banking in Your Pocket
Everything you need, right on your phone.
Download the App
Your phone has never felt more like a branch.
Download the App
Your phone has never felt more like a branch.
Naming Conventions
Sanity CMS to frontend component mapping
| Schema Name | Page Builder Title | Frontend File |
|---|---|---|
contentSection | Content Section | ContentSection.tsx |
gridCardsSection | Grid Cards | GridCardsSection.tsx |
ctaSection | CTA Section | CTASection.tsx |
featuresSection | Features Section | FeaturesSection.tsx |
productHighlightSection | Product Highlight | ProductHighlightSection.tsx |
requirementsChecklistSection | Requirements Checklist | RequirementsChecklistSection.tsx |
benefitsIconGridSection | Benefits Icon Grid | BenefitsIconGridSection.tsx |
rateSpotlightSection | Rate Spotlight | RateSpotlightSection.tsx |