CalcNook Design System

A complete component library for building premium calculator tools. Dark mode first, modern CSS, zero dependencies.

Buttons

Interactive elements with hover glow effects

Primary — Main CTAs

Accent — Gradient CTA with glow

Secondary — Bordered, subtle

Ghost — Minimal, text-like

Badges & Tags

Default Popular New Free Updated

Cards

Container components for tools, features, and stats

Tool Cards — Link to individual calculators

🏦
EMI Calculator
Calculate monthly EMI for home, car, and personal loans with amortization schedule.
Use tool →
📐
Percentage Calculator
Find percentages, percentage change, and percentage of a number instantly.
Use tool →
⚖️
BMI Calculator
Check your Body Mass Index and find your healthy weight range.
Use tool →

Feature Cards — Why CalcNook?

⚡
Instant Results
Get answers in milliseconds. No waiting, no page reloads. Just type and see.
🔒
100% Private
All calculations run in your browser. We never store or transmit your data.
📱
Works Everywhere
Fully responsive design. Use on phone, tablet, or desktop — same great experience.

Stat Cards — Social proof & metrics

71+
Online Tools
↑ 12 new this month
10.2M
Calculations Done
↑ 24% vs last month
4.8★
User Rating
Based on 2.3K reviews
99.9%
Uptime
Last 90 days

Input Fields

Form controls with floating labels and validation states
Default
Floating Label
Success State
✓ Valid interest rate
Error State
✕ Value must be positive
Select Dropdown
Textarea

Toggles

Navigation

Header, mobile menu, and footer components

Desktop Header — Glassmorphism with sticky behavior

Mobile Menu — Slide-out navigation

🏠 Home 🧮 Calculators 🔄 Converters 🛠️ Tools ℹ️ About 📧 Contact

Footer — Full site footer with links

CalcNook

71+ free online calculators and tools. Fast, accurate, and beautifully designed.

Financial

Health

Company

© 2025 CalcNook. All rights reserved. Made with ❤️ in India.

𝕏 ⌨ ✉

Typography

Fluid type scale with gradient text effects

Type Scale — Fluid sizing with clamp()

5xl
Calculate
4xl
Monthly EMI
3xl
₹21,700/month
2xl
71+ Online Tools
xl
Financial Calculators
lg
Enter your loan amount to get started
base
CalcNook provides free online calculators for finance, health, math, and everyday use.
sm
Results are approximate and for reference only.
xs
Last updated: March 2025 • v2.1.0

Gradient Text — For headlines and emphasis

Primary Gradient
Cool Gradient
Warm Gradient
Animated Hero Gradient

Monospace — For numbers and code

₹25,00,000.00
EMI = P × r × (1+r)ⁿ / ((1+r)ⁿ - 1)

Effects & Utilities

Glassmorphism, glow borders, grain texture, and animations

Glassmorphism — Frosted glass effect

.glass
Standard glass effect with blur(20px) and subtle border.
.glass-light
Lighter glass — more transparent, less blur.
.glass-strong
Heavy glass — more opaque with stronger blur.

Glow Borders — Premium interactive borders

.glow-border
Static gradient glow on border.
.glow-border-animated
Rotating conic glow animation.

Grain Texture — Subtle organic overlay

.grain
Adds a very subtle noise texture via SVG filter. Prevents flat, digital feel — makes surfaces feel more organic and tactile. Opacity set to 3% for subtlety.

Color Palette — oklch-based

Primary
Primary Lt
Accent
Secondary
Success
Error
Surface 0
Surface 1
Surface 2
Surface 3

Animations — Entrance effects

Hover to replay animations:
fade-in-up
fade-in-down
scale-in
slide-right

Skeleton Loading — Content placeholders