Sonar User Interface (UI)

Relevant to: Administrators, Designers, Branding Leads
Plans: ALL

Sonar UI is here - the latest modern interface that's cleaner, more accessible, and with more contemporary visual language.

In this release, Sonar UI is available as an opt-in preview.

Toggle it on to have access to:

• Updated navigation components
• Refreshed buttons, inputs and form elements
• Improved cards, panels and containers
• Updated colour system and accent colour usage
• Revised typography for clarity and accessibility
• Advanced configuration of various elements for greater flexibility and brand alignment.

Sonar UI marks the beginning of a long-term refresh aimed at making Schoolbox more intuitive, easier to personalise, and visually consistent for every user.

Key benefits include:

• Design flexibility and brand alignment via advanced styling controls that allow schools to seamlessly tailor the interface to their unique visual identity.
• Better accessibility with improved focus states, clearer typography, and built-in contrast checks to ensure your instance is inclusive and easy to navigate for all users.
• Easier personalisation through new CSS custom properties and simplified color usage that make it easier for schools to customize their instance without relying on heavy code overrides.

Where you’ll find it

• Administration > Design > Settings - Skin Config: This page has been completely redesigned to house the new Enable Sonar UI toggle and advanced styling controls.
• Administration > Design > Assets: A new dedicated page for managing school logos and images, simplifying your skin configuration.
• Instance-wide: Once enabled, the uplifted components (buttons, inputs, menus, and calendars) will appear across all pages for all users.

How to use it

1. Enable Sonar UI (Superusers + Designers only) - In Administration > Design > Settings - Skin Config, turn ‘Enable Sonar UI’ to ON.
2. Configure Global Styling: Use the new configuration tools to define your school's look:
   • Consolidated Color Configuration: Set a primary accent color that applies consistently across interactive elements like buttons and icons. Review and apply the consolidated system colour options.
   • Roundness Controls: Choose the desired amount of roundness of elements.
   • Drop Shadows: Choose the desired amount of drop shadows for box elements to add depth to your interface.
3. Check Accessibility: When selecting colors, the new contrast checker will automatically flag potential accessibility issues, helping you maintain a high standard of readability for all users.

Note: Changes made using the updated skin configurator now appear live to assist you in making design decisions. When you are ready to publish, saving the page will deploy Sonar UI to all users.

More information about Sonar UI can be found here.

Sonar UI introduces an updated Schoolbox interface with a more modern visual design, simplified skin configuration options, and improved support for accessibility.

Sonar UI is now available to review and test before it becomes the only option in v26.2.

We recommend enabling Sonar UI on your Staging server first so your school can review skin settings and custom CSS before enabling it in Production.

This guide helps you:

• understand what has changed in Sonar UI
• enable Sonar UI in Skin Config
• review updated colour settings
• review Container and Corner Radius settings
• check custom CSS compatibility

Note : Sonar UI should be tested on Staging before being enabled on your Production instance.

Enable Sonar UI in Skin Config

Sonar UI can be enabled from the Skin Config page.

To enable Sonar UI:

1. Go to Administration > Settings > Design > Skin Config.
2. Review the Sonar UI information at the top of the page.
3. Use the Sonar UI toggle to turn Sonar UI on.
4. Review your school’s skin settings.
5. Select Save if you make changes.

Once enabled, the Skin Config page will display the Sonar UI configuration options.

Note : We recommend enabling Sonar UI on your Staging server first so you can review your skin settings and custom CSS before Sonar UI becomes the only option in v26.2.

Review colour settings

The configurable colour list has been reduced in Sonar UI.

This helps reduce the likelihood of colour contrast issues and supports future interface improvements.

The following Sonar UI colour settings replace or simplify legacy colour settings:

Note: The Side Menu color is now set to white. This may cause an existing white "Side Menu Logo" to become invisible. Please review your logo assets in conjunction with your color selections.

To review colour settings:

1. Go to Administration > Settings > Design > Skin Config.
2. Enable Sonar UI.
3. Review each colour setting.
4. Update colours if required.
5. Select Save.

Note : After updating colours, review key pages in your Staging instance to check readability and contrast.

Colour Contrast in Sonar UI

When Sonar UI is enabled, Schoolbox checks selected skin colours to help ensure that text and interface elements remain readable. This is called colour contrast.

Colour contrast is the difference in brightness between two colours that appear together, such as text and the background behind it. If the contrast is too low, the text or control may be difficult to read, especially for users with low vision, colour vision deficiency, or reduced contrast sensitivity.

Schoolbox uses the WCAG Level AA contrast requirement for normal text. This requires a contrast ratio of at least 4.5:1. This rating was selected because it is the standard minimum used to support readable text for users with moderately reduced vision.

When Sonar UI is enabled, Schoolbox checks the relevant colour combinations before saving. If a colour does not meet the required contrast level, a message such as Must contrast sufficiently against Top Menu Background will appear and the Skin Config cannot be saved until the colour is adjusted.

Colour combinations checked by Schoolbox

• Top Menu Background and Top Menu Foreground
• Top Menu Hover and Top Menu Foreground
• Body Background and standard body text
• Accent Text and Accent
• Active and Accent
• Default Component Heading Text and Default Component Heading Background
• Login Foreground and Login Background

To make contrast results more reliable, transparency is not available for most Sonar UI colour settings. The Login Background colour is the exception.

Before updating your colours, you can test them using the WebAIM Contrast Checker

1. Enter the text or foreground colour in the Foreground field.
2. Enter the background colour in the Background field.
3. Check that the result passes WCAG AA for normal text.
4. If the result does not pass, adjust one of the colours and test again.

Note : Some brand colours may need to be darkened or lightened before they can be used together in Sonar UI.

Review Containers, Corner Radius, and Drop Shadow

Corner Radius can be applied to:

• Containers
• Fields

Drop Shadow can be applied to Containers.

To review these settings:

1. Go to Administration > Settings > Design > Skin Config.
2. Enable Sonar UI.
3. Review the Container settings.
4. Review the Corner Radius settings.
5. Review the Drop Shadow settings.
6. Select Save if you make changes.

Note : Review pages with components, forms, and menus after changing these settings.

Review custom CSS

If your school uses custom CSS, it should be reviewed with Sonar UI enabled. 

The value of the custom CSS field when Sonar UI is enabled is unique and copied from the legacy custom CSS field value. As such further changes can be made and these changes will only apply to the custom CSS when Sonar UI is enabled. 

Sonar UI changes several core interface areas that may be affected by existing custom CSS.

Review custom CSS that affects:

• fonts and font sizes
• buttons
• checkboxes
• radio buttons
• top menu
• side menu
• user account menu
• notification panel
• profile images
• tabs
• breadcrumbs
• filters
• calendar page

Sonar UI uses the Figtree font and includes an overall increase in font sizes. Profile images that are 48px and below are displayed as circles.

To review custom CSS:

1. Enable Sonar UI on your Staging server.
2. Go to pages where your school uses custom CSS.
3. Check that styling still appears as expected.
4. Review forms, menus, calendars, filters, and profile images.
5. Update your custom CSS if required.

Note : Custom CSS should be reviewed on Staging before Sonar UI is enabled on Production. 

Updating custom CSS that is overwritten

Some existing custom CSS may be overwritten when Sonar UI is enabled.

This can happen because Sonar UI styles may have higher specificity than older custom CSS selectors.

If a custom style is no longer applying, you can first try: 

1. Reviewing the affected page with Sonar UI enabled.
2. Find the custom CSS rule that is no longer applying.
3. Add body.sbx-body to the existing selector.
4. Save the updated custom CSS.
5. Refresh the page and check the result.

For example, an existing selector may need to be updated so it is more specific when Sonar UI is active.

Note : Only update custom CSS that is required for your school’s design. Avoid overriding Sonar UI styles unless the change is needed.

Back To Top