Styling, Icons & Number Formats
ROI Studio provides presentation controls for styling supported elements and formatting numeric values.
Use these settings to make your Calculator easier to understand and to communicate the meaning of values clearly.
Depending on the component, you can configure areas such as:
Icons
Text colours
Background colours
Tooltip colours
Currency
Percentage display
Decimal places
Prefixes and suffixes
The exact options available depend on the element you're editing.
Style an element
To change the presentation of an element:
Select the element on the canvas.
Select Edit.
Find the relevant styling controls in the settings drawer.
Make your changes.
Select Save.
Preview the Calculator.
Not every styling option is available for every component.
Icons
Supported elements can display an icon.
Where available:
Edit the element.
Enable Display Icon.
Select the icon control.
Choose the icon you want to use.
Set its colour if required.
Select Save.
ROI Studio may show the tooltip:
enable & disable Icon visualisation
for the Display Icon control.
The icon selector can show:
click icon to change and style
Use icons selectively
Icons can help users recognise different types of information, but they shouldn't replace clear labels.
For example, an icon might reinforce:
Annual Cost
but the icon itself shouldn't be the only indication that the value represents cost.
Use icons consistently throughout the Calculator.
Colours
Depending on the element, ROI Studio can provide controls for:
Font or text colour
Background colour
Tooltip colour
Icon colour
Some components provide additional styling controls.
For example, Card Outputs can include presentation settings for areas such as:
Border
Shadow
Dynamic Value Text can also apply colour to individual tokens.
Keep styling consistent
Use styling to establish hierarchy rather than making every component look different.
For example, you might use a consistent accent treatment for:
Important Headers
Headline Cards
Key results
while allowing supporting Inputs and Outputs to use simpler presentation.
Consistency makes it easier for users to understand which information has similar importance or purpose.
Maintain readable contrast
Make sure text remains easy to read against its background.
Avoid combinations where the foreground and background colours are too similar.
For Accordion text and icon colours, leaving the colour value empty can allow ROI Studio to calculate an appropriate contrast automatically.
Styling Dynamic Value Text
Dynamic Value Text provides additional styling options for narrative content.
These include controls such as:
Token colour
Text alignment
Font size
Background
Token colour can be useful for emphasising calculated values within a sentence.
For example:
The proposed solution could generate [Net Annual Benefit] in annual value.
The dynamic value can be visually distinguished from the surrounding text.
Avoid applying several competing colours within the same statement.
For more information, see Dynamic Value Text.
Number formats
Numeric Inputs and many Formula Outputs can present values in formats appropriate to their meaning.
Common display modes include:
Display as Numerical
Percentage
Currency
Some Formula Outputs also support time-style display.
The exact labels and options vary depending on the element.
Numerical values
Use a numerical display when the value represents a number without requiring percentage or currency presentation.
Examples might include:
Employees
Calls
Transactions
Units
Incidents
Where available, configure the appropriate number of decimal places.
For values such as employee counts or annual transactions, unnecessary decimal places can make the model harder to read.
Percentages
Use Percentage when the underlying value represents a percentage.
Typical examples include:
Adoption Rate
Containment Rate
Automation Rate
Productivity Improvement
ROI
Percentage formatting makes the unit immediately clear to someone using the Calculator.
Make sure the underlying formula also handles the percentage correctly.
Formatting a number as a percentage doesn't by itself validate the calculation.
Currency
Use Currency when a value represents money.
To configure currency on a supported Input or Output:
Edit the element.
Choose Currency as the display mode.
Select the required Currency.
Add a prefix or suffix if needed.
Set decimal places where available.
Select Save.
Preview the formatted value.
Available currencies
The ROI Studio currency selector includes:
Danish Krone
Kr
Dollar
$
Euro
€
Sterling
£
Indian Rupee
₹
South African Rand
R
Korean won
₩
Yen
¥
Choose the currency appropriate to the business case.
Prefixes
Use Add Prefix when additional text or a symbol needs to appear before a value.
A prefix can provide context that isn't otherwise communicated by the display format.
Don't add a manual currency prefix when the Currency configuration already provides the required symbol unless there is a specific reason to do so.
Suffixes
Use Add Suffix when a value needs additional information after it.
Examples might include:
hours
months
per year
per transaction
For example:
8.4 months
can be clearer than displaying:
8.4
for a Payback Period.
Avoid redundant units
Use the Display Label and value formatting together.
For example:
Payback Period
8.4 months
is clear.
Avoid unnecessary repetition such as:
Payback Period in Months
8.4 months
unless the additional wording genuinely improves understanding.
Decimal places
Where supported, configure the number of decimal places appropriate to the metric.
For example:
Annual Calls
415,000
may not need decimals.
Whereas:
Payback Period
8.4 months
may benefit from one decimal place.
Use enough precision to communicate the result without implying greater accuracy than the model supports.
Format Inputs and Outputs consistently
The same type of value should generally use the same presentation throughout the Calculator.
For example, if annual financial values are displayed as Sterling elsewhere, avoid displaying another annual cost as an unformatted raw number.
Consistency makes calculations easier to understand and compare.
Formatting doesn't change the calculation
Presentation settings control how a value is displayed.
They don't replace the underlying calculation.
For example:
£250,000
and:
250000
can represent the same numeric result while being presented differently.
Likewise, changing colours, icons or decimal places doesn't change the business logic behind the value.
Build and validate the calculation first, then configure its presentation.
Preview formatting
Always Preview important formatting changes.
Check:
Currency symbols
Percentage presentation
Decimal places
Prefixes and suffixes
Text contrast
Background colours
Icons
Card presentation
Dynamic Value Text
Overall consistency
Also test different values.
A format that looks appropriate for the initial value may behave differently with larger or smaller results.
Best practices
When styling your Calculator:
Use one accent colour consistently where possible.
Maintain readable contrast.
Use icons to reinforce meaning rather than replace labels.
Apply currency formatting to monetary values.
Use percentage formatting only for genuine percentages.
Choose decimal precision appropriate to the metric.
Use prefixes and suffixes only when they add useful context.
Keep similar values formatted consistently.
Avoid excessive decorative styling.
Preview the complete Calculator before publishing.
Last updated