Step 5: Design
The Design step controls how the calculator looks: font, intro text, logo, colours, background and buttons. The live preview on the right reflects your changes after you save the step.
Branding
Section titled “Branding”Select font. Choose Inter, a clean web font bundled with the calculator, or My website font to inherit the font already used on the page where the calculator is embedded.
Two lines of text shown above the item picker.
| Field | Limit | Default |
|---|---|---|
| Primary text | 1 to 100 characters | What are you looking to store? |
| Secondary text | 1 to 200 characters | Select items below to get started |
Both are required.
Your company logo, shown in the calculator header. Drag an image onto the box or click to choose a file. Accepted formats are PNG, JPEG, SVG, WebP and GIF.
Until you upload a logo, a Calcumate placeholder is shown. Seeing the placeholder in your calculator means the logo has not been customised yet. To remove an uploaded logo, click the cross next to the preview.
Uploading a new logo replaces the previous one. If the old image still shows after an upload, reload the page.
Upload Unit Image
Section titled “Upload Unit Image”By default the calculator renders a 3D model of the storage unit. Turn on Enable custom unit image to show your own picture of a unit instead, then drop or select the image in the box that appears.
Colour scheme
Section titled “Colour scheme”Four colours in hex format, for example #3B82F6. Each field has a colour picker and a text box.
| Colour | Used for | Default |
|---|---|---|
| Primary colour | Main accents and highlights | #3B82F6 |
| Secondary colour | Supporting elements | #1E3A5F |
| Unit colour | The 3D storage unit | #7dcde8 |
| Introductory text | The intro text above the items | #111827 |
Background colour
Section titled “Background colour”Background type sets what sits behind the calculator.
- Solid. One colour. A Background colour field appears. Default
#FFFFFF. - Gradient. Two colours blended from top to bottom. Gradient top and Gradient bottom fields appear.
- Transparent. No background, so your page shows through.
Show Calcumate watermark
Section titled “Show Calcumate watermark”Off by default. When on, a small “powered by Calcumate” mark is shown in the calculator.
Buttons
Section titled “Buttons”Four colours and four sliders control the call-to-action button and the category buttons. The Preview box at the bottom shows a sample button and category with your current settings.
| Setting | Range | Default |
|---|---|---|
| Button colour | hex | #3B82F6 |
| Button text colour | hex | #FFFFFF |
| Category border colour | hex | #E5E7EB |
| Category name colour | hex | #374151 |
| Item name font size | 8 to 32 px | 14 px |
| Border width | 0 to 8 px | 1 px |
| Button border radius | 0 to 35 px | 8 px |
| Category border radius | 0 to 35 px | 8 px |
A border radius of 0 gives square corners. Higher values give rounder corners.
Saving
Section titled “Saving”Press Next to save. If a field is invalid, a red box at the top of the step lists what to fix and the field itself shows the error. Typical causes are an empty intro text or a colour that is not a six-digit hex value.
Calculators created before some of these settings existed are brought up to date automatically the first time you open this step. Your existing choices are kept and only the missing settings receive defaults.