Light Theme
Background, card, text, and action token sample
Monthly Budget Summary
A typical card surface with body copy and muted helper text.
Design System
Calcly's visual language, components, and tokens
Theme Preview
Light and dark examples of the same UI patterns and tokens
Dark Theme
Same component structure with dark token values
Monthly Budget Summary
A typical card surface with body copy and muted helper text.
Color Palette
Semantic color tokens that adapt to light and dark themes
Primary
Brand color, CTAs
Secondary
Backgrounds, cards
Accent
Hover states
Destructive
Errors, warnings
Typography
Clear hierarchy optimized for readability
Heading 1 - 2.25rem
Heading 2 - 1.875rem
Heading 3 - 1.5rem
Heading 4 - 1.125rem
Body text - 1rem with 1.5 line height
Small text - 0.875rem for captions and helper text
Extra small - 0.75rem for labels
Spacing System
8pt grid for consistent layouts
xs
0.5rem (8px)
sm
0.75rem (12px)
md
1rem (16px)
lg
1.5rem (24px)
xl
2rem (32px)
2xl
3rem (48px)
3xl
4rem (64px)
Buttons
Various button styles for different actions
Variants
Sizes
With Icons
Form Controls
Input components for calculators
$
Badges
Labels and tags for categorization
Default
Secondary
Outline
Destructive
Success
Icon Set
Category icon examples
CA
Calculator FI
Finance HE
Health GR
Growth Cards
Container components with consistent styling
Standard Card
Basic card with padding and border
Interactive Card
Hover to see the shadow effect
Highlighted Card
Card with custom border and background
Gradient Card
Subtle gradient background effect
Shadows
Elevation system for visual hierarchy
Small
shadow-sm
Medium
shadow-md
Large
shadow-lg
Extra Large
shadow-xl
Border Radius
Consistent rounded corners throughout
Small
0.5rem
Medium
0.625rem
Large
0.75rem
XL
0.875rem
Full
9999px