Design System
Living reference for every token, primitive, and pattern used in calculator.net(redesigned).
Interactive Components
%
We never share your email.
Enter an amount above $0
Color Tokens
--bg
--surface
--surface-2
--border
--text
--text-muted
--text-subtle
--accent
--accent-hover
--accent-active
--accent-soft
--accent-contrast
--success
--warning
--error
Typography
Display (49px)
Calculator
Heading 1 (39px)
Heading One
Heading 2 (31px)
Heading Two
Heading 3 (25px)
Heading Three
Body (16px)
The quick brown fox jumps over the lazy dog. Every calculator page stands on its own.
Small (14px)
Helper text, labels, and secondary information.
Monospace / Tabular (results)
$1,234.56 / month
Spacing Scale
4px
8px
12px
16px
24px
32px
48px
64px