SmartCalcLab Design System

A comprehensive design system for building trustworthy financial calculators. Built with Tailwind CSS, shadcn/ui, and Radix UI primitives.

Design Tokens

Core design tokens that define the visual language of SmartCalcLab.

Color Palette

Professional fintech palette with blue/teal accent. Optimized for trust and readability.

Primary & Accent

Primary

--primary

Main brand color for CTAs

Light:#0c4a6e
Dark:#38bdf8

Primary Foreground

--primary-foreground

Text on primary background

Light:#ffffff
Dark:#0f172a

Accent

--accent

Highlight & interactive elements

Light:#0891b2
Dark:#06b6d4

Neutrals

Background

--background

Page background

Light:#ffffff
Dark:#0f172a

Foreground

--foreground

Primary text

Light:#0f172a
Dark:#f8fafc

Muted

--muted

Subtle backgrounds

Light:#f8fafc
Dark:#1e293b

Muted Foreground

--muted-foreground

Secondary text

Light:#64748b
Dark:#94a3b8

Semantic Colors

Success

--success

Success states

Light:#059669
Dark:#10b981

Destructive

--destructive

Error states & warnings

Light:#dc2626
Dark:#ef4444

Border

--border

Borders & dividers

Light:#e2e8f0
Dark:#334155

Chart Colors

Chart 1

--chart-1

Primary data

Light:#0891b2
Dark:#06b6d4

Chart 2

--chart-2

Secondary data

Light:#0c4a6e
Dark:#38bdf8

Chart 3

--chart-3

Tertiary data

Light:#06b6d4
Dark:#22d3ee

Chart 4

--chart-4

Neutral data

Light:#64748b
Dark:#94a3b8

Chart 5

--chart-5

Positive data

Light:#10b981
Dark:#34d399

Typography

Clear hierarchy with Inter-style system fonts. Optimized for financial data readability.

Heading 1 - 36px / 2.25rem

font-size: 2.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.025em;

Heading 2 - 30px / 1.875rem

font-size: 1.875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;

Heading 3 - 24px / 1.5rem

font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;

Heading 4 - 20px / 1.25rem

font-size: 1.25rem; font-weight: 600; line-height: 1.4;

Body text - 16px / 1rem

font-size: 1rem; line-height: 1.625; color: muted-foreground;

Small text - 14px / 0.875rem

font-size: 0.875rem; line-height: 1.5;

Font Weights

Normal - 400
Medium - 500
Semibold - 600

Line Heights

Tight - 1.2 (headings)
Normal - 1.5 (UI)
Relaxed - 1.625 (body)

Letter Spacing

H1 - -0.025em
H2 - -0.02em
H3 - -0.015em

Spacing & Sizing

8px base grid for consistent spacing throughout the application.

Spacing Scale (8px grid)

1 = 4px = 0.25rem
2 = 8px = 0.5rem
3 = 12px = 0.75rem
4 = 16px = 1rem
6 = 24px = 1.5rem
8 = 32px = 2rem
12 = 48px = 3rem
16 = 64px = 4rem

Border Radius

sm - 0.125rem (2px)

Small elements

md - 0.375rem (6px)

Medium elements

lg - 0.5rem (8px)

Cards, panels

xl - 0.75rem (12px)

Featured elements

full - 9999px

Pills, avatars

Shadows & Elevation

Shadow SM

shadow-sm

Shadow Default

shadow

Shadow MD

shadow-md

Shadow LG

shadow-lg

Components

Buttons

Buttons with clear visual hierarchy and accessible focus states.

Variants

Sizes

States

Full Width

Form Inputs

Form elements with clear labels, helper text, and validation states.

Helper text goes here

$

Enter amount in dollars

%

Email is valid

Please enter a valid email

Selection Controls

Email notifications

Receive updates via email

Marketing emails

Promotional content

Value: 50%

Cards

Card variants for different content types and importance levels.

Standard Card

Basic card with header and content

Used for general content organization and grouping related information.

Featured Card

Highlighted with accent color

Used to draw attention to important content or call-to-actions.

Result Summary

Calculator output

Monthly Payment

$2,212

Total Interest

$446,682

Badges & Tags

Labels for categorization and status indication.

Variants

DefaultSecondaryOutlineDestructiveSuccess

Use Cases

Export PDFAmortization TableSimpleAdvancedNewPopular

Tabs & Accordion

Tabs

Content for "How It Works" tab. Tabs provide a way to organize related content into separate views.

Accordion (for FAQs)

Alerts & Toasts

Feedback components for important messages and notifications.

Alerts

Toast Notifications

Tables

Data tables with sticky headers and alternating row colors for readability.

MonthPaymentPrincipalInterestBalance
1$2,212.45$733.45$1,479.00$279,266.55
2$2,212.45$733.45$1,479.00$278,533.1
3$2,212.45$733.45$1,479.00$277,799.65
4$2,212.45$733.45$1,479.00$277,066.2
5$2,212.45$733.45$1,479.00$276,332.75

No data available

Enter your loan details to generate an amortization schedule

Modal & Dialog

Breadcrumbs & Navigation

Breadcrumbs

Pagination

Loading States

Skeleton loaders for async content and better perceived performance.

Icons

Simple line icons from Lucide React with consistent 2px stroke width. Icons should be clear and recognizable at all sizes.

Home

TrendingUp

Download

CheckCircle2

AlertCircle

Info

Search

X

Icon Sizes

size-4 (16px)

size-5 (20px)

size-6 (24px)

size-8 (32px)

size-12 (48px)

Accessibility

Built with accessibility in mind: WCAG 2.1 AA compliant colors, clear focus states, and semantic HTML.

Focus States

Visible keyboard navigation

All interactive elements have visible focus rings with 2px offset for clarity.

Color Contrast

WCAG AA compliant

Primary on Primary BG4.5:1
Muted Foreground4.5:1

All text meets minimum contrast ratio requirements.

Semantic HTML

Proper markup structure

  • Proper heading hierarchy (h1-h6)
  • ARIA labels where needed
  • Descriptive button text
  • Form labels properly associated

Screen Reader Support

Accessible to assistive tech

  • Alt text for images
  • Live regions for dynamic content
  • Skip links for navigation
  • Proper role attributes