We've made a series of design and usability updates across SpeedAdmin Play! to make the interface feel more modern, more readable and more comfortable to work in. The update introduces new typography, refined colours, an updated menu structure and a polished set of UI elements - tabs, button groups, switches, chips and the calendar. Below you'll find each change explained in detail.
Changed from Helvetica to Open Sans — Open Sans is web-optimised and ensures consistent rendering across all platforms and browsers. Its humanist letterforms feel approachable and modern, while still keeping the neutral, professional tone.
Increased the base font size from 12px to 14px — improves readability and accessibility, reduces eye strain, and aligns with the 14–16px range used by most modern web and SaaS interfaces for body text. In data tables we use 13px to keep enough content visible per row while still being a step up from the previous 12px baseline.
Kept the base primary colour #006580 (teal) unchanged, but refined the lighter and darker shades. The previous light shades felt too vivid and oversaturated on buttons and backgrounds — the new shades feel softer and more balanced while preserving the teal character of the brand.
To accommodate the larger font size and create more breathing room, some menu items have been regrouped:
• My Students and My Colleagues are now grouped under Resources (when logged in as a teacher)
• Media has been moved under Profile
This addresses the limited space before the mobile menu kicks in — especially for teacher accounts, where the menu was already crowded.
The mobile menu no longer takes up the full width of the screen but has a fixed width of 240px. This keeps part of the page visible behind the menu so users stay oriented, makes the menu easier to dismiss by tapping outside, and aligns with the standard drawer pattern used in modern apps.
Inactive tabs are now transparent instead of light blue. The previous light-blue background was hard to see on the gray page background and made the inactive tabs feel more prominent than the actually selected one. By removing the background and using a bold font weight on the selected tab instead, the active tab is now clearly identifiable while inactive tabs recede into the background.
We aligned the design of button groups with the design of single buttons, so they now share the same visual language — same border radius, padding, and styling. Previously, button groups looked noticeably different from standalone buttons, which created visual inconsistency across the interface. The unified styling makes the UI feel more cohesive and predictable.
We increased the size of switches to a height of 26px, which is a standard, comfortable size. The previous switches were noticeably too small, making them hard to hit accurately — especially on mobile devices and touch screens. The new size improves usability and aligns with common touch-target guidelines.
We updated the styling of our chips — including colour, border, and border-radius — to align with the overall refreshed visual language of the interface. The new design feels more modern and consistent with the rest of the components, while keeping chips clearly recognisable and easy to scan.
Fixed an issue in the calendar where back-to-back events (e.g. 12:00–12:30 and 12:30–13:00) were rendered side-by-side as if they overlapped, instead of being stacked vertically one after the other. Consecutive events now correctly take up the full column width and follow each other in the timeline, while truly concurrent events continue to render side-by-side as before.
How: Available automatically. No setup or rights required.