Loading...
Design System
Comprehensive style guide and component library for HELOC Accelerator
Table of Contents
Navigate through the design system components
Semantic Tokens
Neutrals
Use neutral tokens for base UI chrome and text.
bg-card
Card + raised panels
bg-muted
Muted chrome + table headers
A
text-foreground
Primary text on light surfaces
A
text-foreground-muted
Secondary text and hints
border-border
Dividers, cards, and inputs
A
text-primary-foreground
Text on primary/CTA fills
Status
Use status tokens for meaning, not chrome.
Success
Use for data highlights/messages
Warning
Use for data highlights/messages
Error
Use for data highlights/messages
Info
Use for data highlights/messages
Tables (Light/Dark)
Neutral Chrome + Token Highlights
Use bg-card, bg-muted, text-foreground, text-foreground-muted, border-border. Use status tokens only for highlights.
| Month | Payment | Net Surplus |
|---|---|---|
| 1 | $2,100 | $250 |
| 2 | $2,100 | $265 |
Logo
Logo Variants
Different logo styles for various contexts
Default Logo
Logo with Text
HELOC AcceleratorWhite Logo (on dark background)
Logo Sizes
Different logo sizes for various use cases
Small (32px)
Medium (48px)
Large (64px)
Extra Large (96px)
Colors
Primary Colors
Blue-gray palette from brand identity
Primary 50
bg-primary-50
Primary 100
bg-primary-100
Primary 200
bg-primary-200
Primary 300
bg-primary-300
Primary 400
bg-primary-400
Primary 500 (Brand)
bg-primary-500
Primary 600
bg-primary-600
Primary 700
bg-primary-700
Primary 800
bg-primary-800
Primary 900
bg-primary-900
Secondary Colors
International orange accent palette
Secondary 50
bg-secondary-50
Secondary 100
bg-secondary-100
Secondary 200
bg-secondary-200
Secondary 300 (Primary Accent)
bg-secondary-300
Secondary 400
bg-secondary-400
Secondary 500
bg-secondary-500
Secondary 600
bg-secondary-600
Secondary 700
bg-secondary-700
Secondary 800
bg-secondary-800
Secondary 900
bg-secondary-900
Neutral Colors
Grayscale palette for text and backgrounds
Neutral 50 (Off-white)
bg-muted
Neutral 100 (Light Gray)
bg-muted
Neutral 200 (Borders)
bg-muted
Neutral 300 (Dividers)
bg-card
Neutral 400 (Disabled)
bg-card
Neutral 500 (Placeholder)
bg-card
Neutral 600 (Secondary Text)
bg-card
Neutral 700 (Body Text)
bg-card
Neutral 800 (Headers)
bg-card
Neutral 900 (Primary Text)
bg-card
Semantic Colors
State Colors
Colors for success, warning, error, and info states
Success
Positive outcomes, confirmations
bg-success
Warning
Cautions, important notices
bg-warning
Destructive
Errors, destructive actions
bg-destructive
Info
Information, neutral notices
bg-info
Financial Colors
Colors for financial data visualization
Income
Positive cash flow, earnings
bg-income
Expense
Outgoing payments, costs
bg-expense
Savings
Accumulated funds, investments
bg-savings
Debt
Outstanding balances, loans
bg-debt
Chart Colors
Color palette for data visualization and charts
Chart Primary
bg-chart-primary
Chart Secondary
bg-chart-secondary
Chart Tertiary
bg-chart-tertiary
Chart Quaternary
bg-chart-quaternary
Chart Quinary
bg-chart-quinary
Color Usage Examples
How to use brand colors in your components
CSS Custom Properties
/* Use semantic tokens for theming */
background-color: oklch(var(--color-primary) / <alpha-value>);
color: oklch(var(--color-foreground) / <alpha-value>);
/* Direct brand colors */
background-color: oklch(0.61726 0.20968 255.86); /* primary-600 */
color: oklch(0.68077 0.21289 38.58); /* accent-500 */Tailwind Classes
/* Semantic classes (recommended) */
className="bg-primary text-primary-foreground"
className="text-foreground bg-background
/* Brand color classes */
className="bg-primary-500 text-white"
className="text-secondary-300 bg-mutedComponent Examples
Primary Button
Using semantic primary color
Secondary Button
Using semantic secondary color
Success State
Using semantic success color
Typography
Typography Scale
Consistent text sizing and hierarchy
Display Text
3.5rem (56px) / Line height: 1.1 / Weight: 700
Heading 1
3rem (48px) / Line height: 1.2 / Weight: 700
Heading 2
2.25rem (36px) / Line height: 1.3 / Weight: 600
Heading 3
1.875rem (30px) / Line height: 1.3 / Weight: 600
Heading 4
1.5rem (24px) / Line height: 1.4 / Weight: 600
Heading 5
1.25rem (20px) / Line height: 1.4 / Weight: 500
Heading 6
1.125rem (18px) / Line height: 1.4 / Weight: 500
Body Large Text
1.125rem (18px) / Line height: 1.6 / Weight: 400
Body Text
1rem (16px) / Line height: 1.6 / Weight: 400
Body Small Text
0.875rem (14px) / Line height: 1.5 / Weight: 400
Caption Text
0.75rem (12px) / Line height: 1.4 / Weight: 400
Spacing
Spacing Scale
8px base unit spacing system
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
40px
3xl
48px
4xl
64px
5xl
80px
6xl
96px
Form Elements
Input Fields
Text inputs with various states
This is helper text
This field is required
Select Dropdown
Dropdown selection component
Select one option from the list
Please select an option
Checkboxes
Checkbox inputs for multiple selections
This is a description for the checkbox
This field is required
Radio Groups
Radio button groups for single selection
Description for option 1
Description for option 2
Cards
Default Card
A simple card with default styling
This is the content area of the card. You can put any content here.
Elevated Card
A card with shadow elevation
This card has a shadow to create depth and visual hierarchy.
Outlined Card
A card with prominent border
This card uses a thicker border for emphasis.
Badges
Badge Variants
Status indicators and labels
Variants
Default
Primary
Secondary
Success
Warning
Danger
Info
Sizes
Small
Medium
Large
Alerts
Information
This is an informational alert. Use it to provide helpful information to users.
Success
This is a success alert. Use it to confirm that an action was completed successfully.
Warning
This is a warning alert. Use it to warn users about potential issues or important information.
Error
This is an error alert with a close button. Use it to inform users about errors or critical issues.
This is an alert without a title. Sometimes you just need a simple message.
Modals
Modal Examples
Dialog overlays for important interactions
Dropdowns
Dropdown Menu
Contextual menus and action lists
Tabs
Tab Navigation
Organize content into switchable panels
Tab 1 Content
This is the content for the first tab. You can put any components or content here.
Progress Indicators
Linear Progress
Show completion progress with bars
Progress65%
Success Progress85%
Warning Progress45%
Circular Progress & Spinners
Circular progress indicators and loading spinners
Circular Progress
Loading Spinners
Tooltips
Tooltip Examples
Contextual help and information overlays
Tooltip Placements
Tooltip Triggers
Custom Styling
Animations
Basic Animations
Entrance and transition animations
Fade In
This content fades in smoothly
Slide In Up
This content slides in from below
Scale In
This content scales in from center
Staggered Animations
Coordinated animations for multiple elements
Staggered List
List item 1
List item 2
List item 3
List item 4
Advanced Form Components
Validated Inputs
Form inputs with built-in validation
We'll never share your email
Password must be at least 8 characters
Maximum 500 characters
Form Structure
Organized form layouts with sections
Dark Mode & Theming
Theme Toggle
Switch between light and dark themes
Theme Controls
Toggle between light and dark themes
Theme-Aware Components
This component adapts to the current theme automatically
Card backgrounds and text colors change with the theme
CSS Custom Properties
How theming works under the hood
Light Theme Variables
:root {
--color-primary: 0.61726 0.20968 255.86;
--color-secondary: 0.59906 0.17195 252.13;
--color-background: 0.97318 0.01305 251.56;
--color-foreground: 0.30070 0.10318 256.13;
--color-border: 0.87929 0.05535 249.29;
}Dark Theme Overrides
[data-theme="dark"] {
--color-primary: 0.70945 0.16712 241.60;
--color-secondary: 0.68183 0.15284 248.64;
--color-background: 0.26520 0.07137 255.90;
--color-foreground: 0.97318 0.01305 251.56;
--color-border: 0.43330 0.13813 255.25;
}Usage in Tailwind
// Tailwind classes use the CSS variables
className="bg-primary text-primary-foreground"
// Which resolves to:
background-color: oklch(var(--color-primary));
color: oklch(var(--color-primary-foreground));Usage Guidelines
Accessibility
WCAG compliance and best practices
- • All colors meet WCAG AA contrast requirements (4.5:1 minimum)
- • Focus states are clearly visible with 2px ring
- • Interactive elements have minimum 44px touch targets
- • Form labels are properly associated with inputs
- • Error messages are descriptive and helpful
Implementation
How to use the design system
Import Components
import { Button, Input, Card } from '@/components/design-system';Use Tailwind Classes
className="text-primary-600 bg-muted"Tailwind CSS v4 Migration Status
Migration Complete
Successfully updated to Tailwind CSS v4.1.12
✅ Completed Updates
- • Updated to Tailwind CSS v4.1.12
- • Configured @tailwindcss/postcss plugin
- • Migrated to CSS custom properties
- • Updated PostCSS configuration
- • Semantic design tokens implemented
- • Dark mode theming with CSS variables
- • Brand color palette fully defined
🎨 Brand Colors Available
Primary (Blue-Gray)
Secondary (Tory Blue)
Neutral Palette
Semantic Colors
Financial Colors
Configuration Details
Technical implementation details
Package Versions
"tailwindcss": "^4.1.12"
"@tailwindcss/postcss": "^4.1.12"
"postcss": "^8"PostCSS Config
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}CSS Custom Properties
:root {
--color-primary: 0.61726 0.20968 255.86;
--color-secondary: 0.59906 0.17195 252.13;
--color-accent: 0.68077 0.21289 38.58;
/* ... more variables */
}Migration Benefits
Advantages of Tailwind CSS v4 implementation
Performance
- • Faster build times
- • Smaller bundle size
- • Improved CSS generation
Theming
- • CSS custom properties
- • Dynamic theme switching
- • Better dark mode support
Developer Experience
- • Better IntelliSense
- • Improved error messages
- • Modern CSS features
UI Blocks
Section-level building blocks
Tokenized blocks inspired by Tailwind UI. Use these to compose landing pages and sections.
Below is a live, stacked preview using our design tokens and primitives. For a larger demo, see the dedicated catalog page.
Introducing
Accelerate your HELOC payoff
Plan smarter, save interest, and track progress with a clear, actionable strategy.
Proven results
- Average interest saved
- $7,340
- Faster payoff
- 11 months
- Active users
- 12k+
- Countries
- 20+
Everything you need to stay on track
Built-in tools help you plan, pay down, and visualize progress.
Live Calculator
Simulate payments and interest in real-time.
Scenario Planning
Compare strategies and choose the best path.
Progress Tracking
See milestones and paydown momentum clearly.
Budget Sync
Align spending with payoff targets automatically.
Secure
Privacy-first data handling and control.
Multi-device
Use anywhere with a responsive, accessible UI.
Loved by smart payers
“This made my payoff plan obvious and achievable.”
Alex P.
Homeowner
“Finally understand the math. Saved me thousands.”
Dana R.
Engineer
“Clear, fast, and motivating. We’re ahead of schedule.”
Chris & Sam
Family
Simple, transparent pricing
Start free. Upgrade when you need more.
Starter
For trying things out
$0
- Live calculator
- 1 scenario
- Email support
Pro
For serious payoff plans
$9/mo
- Unlimited scenarios
- Budget sync
- Priority support
Team
For households and advisors
$29/mo
- Shared scenarios
- Collaboration
- Advanced analytics
Ready to pay off faster?
Start planning your payoff and visualize your path.
Frequently asked questions
Is there a free plan?
Yes, you can start free and upgrade anytime.
Can I share scenarios?
On Team plans you can collaborate with others.
Do you store banking data?
We’re privacy-first and keep data minimal and secure.