Start with what you know.
Name the quantities, show the units, and make every field understandable.
THE USECALCULATOR IDENTITY
Make room
for clarity.
Thoughtful tools should feel thoughtful. Our identity brings warmth to precise work, and a steady rhythm to everything from a quick answer to a big decision.
Explore the brand assets
Everyday questions.
Useful answers.
Useful answers.
FOUR PARTS. ONE CLEAR IDEA.
The answer belongs
with the working.
Our mark is a small system. Each tile represents something a useful calculation needs. Together, they form a familiar, open grid.
Make the method visible.
A result should come with a formula and an explanation you can inspect.
Say what applies.
Language, dates, place, and assumptions can change how a number should be used.
Help the next step.
Keep the outcome clear, with useful ways to save, compare, export, and return.
A CONSISTENT SIGNATURE
Small mark. Clear presence.
Original vectors. Outlined lettering.
Ready for screens and print.
Primary wordmark
For dark surfaces
Light-surface wordmark
For paper and cream surfaces
One-color wordmark
For simple reproduction
Four-tile mark
For compact product moments
Also availableLight-surface markOne-color mark16px optical markAnimated mark SVG · 1 second, onceDesign tokens
Give it room.
Leave at least one tile’s width of clear space around the mark. Keep the full wordmark at least 120px wide, and the compact mark at least 16px.
Keep its shape.
Use the supplied proportions and colors. Place it on a calm surface. Keep the mark and wordmark together whenever space allows.
Make the context clear.
UseCalculator branding identifies our product. Using an asset does not imply a partnership, certification, or endorsement.
WARMTH WITH A PURPOSE
A palette that lets the work lead.
Charcoal
#12120FA quiet place to focus.
Cream
#F6EEE2Room to read and work.
Orange
#FF8B3DOne clear next action.
Ink
#191B16Words and important numbers.
Sand
#F5DEC0Supporting detail and structure.
Sage
#ACBC8BA considered confirmation.
Orange is a signal, not body-text ink. Use dark text on orange, and the deeper orange ink token on light backgrounds. Status always includes a word or icon as well as color.
TYPE THAT DOES ITS JOB
A clear voice.
A legible number.
Manrope gives headings their quiet confidence. DM Sans keeps the details comfortable. Tabular numerals help changing values stay aligned.
AN ANSWER, WITH CONTEXTA little clarity
A little clarity
goes a long way.
12,450.75
Entered cost 10,000.00
Planned profit 2,450.75
MOTION THAT EXPLAINS
A moment of movement.
Then back to the work.
Short, intentional transitions connect actions to outcomes.
No endless loops. No simulated processing.
THE CLARITY SEQUENCE
A brief sequence. A steady result.
Motion respects your device’s reduced-motion preference.
THE WAY WE SPEAK
Helpful. Specific.
Comfortably human.
We explain the number without talking down to the person. We name uncertainty and give them a useful next action.
“Your set is saved. You can pick it up here next time.”
Confirm the action and its location.“Which country and tax year should this use?”
Ask for the missing decision. Never invent a rule.“Enter a rate between 0 and 100.”
Keep the input. Say exactly how to fix it.Useful is a design decision.
The same care belongs in the formula, the interface, and the small details in between.
A SYSTEM WITH ROOM FOR CONTEXT
One mark. Many ways to feel at home.
The four calculator tiles stay recognizable. Optional typographic and color studies add character without choosing your language, currency, or tax rules for you.
The core identity. Warm, deliberate, clear.
Working
Only while real work is pending. No simulated progress.
Download SVG ↓
Saved
A single confirmation after a successful write.
Download SVG ↓
Complete
A single settling motion when an operation finishes.
Download SVG ↓
Needs attention
A steady indicator beside an actionable message.
Download SVG ↓
All SVGs work without scripts or external fonts and respect reduced motion. Typographic studies need local design review before becoming a regional campaign. Country badges are a separate, explicit choice; a flag does not identify a language.