Smartschool brand & design guidelines
These guidelines help you integrate Smartschool into your platform or communicate about Smartschool while respecting our brand. They apply to any external developer, partner or school that uses the Smartschool name, logo, login button or icons. By using these resources you agree to represent the brand as described here.
Using our logo
We are proud of our logo. Our full logo is the combination of our icon (the orange square with the white capital “s”) and the “Smartschool” wordmark. Use the full logo wherever there is enough room.
Which version to use
The logo comes in two colourways. Use the dark wordmark on light backgrounds and the white wordmark on dark backgrounds. The orange icon stays the same in both. Always keep enough contrast so the logo remains legible and impactful.
DoDark wordmark on a light background.
DoWhite wordmark on a dark background.
Clear space & minimum size
Always give the logo room to breathe. Keep an exclusion zone around it, free from other logos, text or busy imagery, so it stays clear and recognisable. The exclusion zone is equal to half the height of the square icon.
Minimum size
To protect legibility, don’t reproduce the full logo smaller than 120 px wide on screen (or 30 mm in print). When space is tighter than that, use the standalone icon instead, but never smaller than 24 px.
The icon may be used on its own when the Smartschool brand is already established or when there isn’t enough room for the full logo. The wordmark, however, should never appear without the icon.
Logo misuse
It’s important that the appearance of the logo remains consistent. The logo should not be misinterpreted, modified or added to. Its orientation, colour and composition should remain as indicated in this document, there are no exceptions.
Don’tDon’t rotate or tilt the logo.
Don’tDon’t stretch, squeeze or distort the proportions.
Don’tDon’t recolour the logo or icon.
Don’tDon’t add shadows, glows or other effects.
Don’tDon’t place the logo on a busy or low-contrast background.
Don’tDon’t use the icon inside a word or sentence, or to build new shapes
Using our colours
Smartschool orange is our signature colour and should lead wherever our brand needs to be recognisable. Black and white make up the rest of the core palette.
Smartschool Orange
HEX #FF520E
RGB 255 • 82 • 14
Black
HEX #262626
RGB 38 • 38 • 38
White
HEX #FFFFFF
RGB 255 • 255 • 255
DoUse high-contrast combinations, white or black on orange, for legibility and accessibility.
Don’tDon’t introduce off-brand tints or low-contrast pairings of the orange.
Login & integration button
Use the official Smartschool button to let users sign in with Smartschool (SSO) or to link to a Smartschool integration. Use the supplied assets (S) in our brand kit and keep the proportions intact.
Build the Smartschool SSO button
Follow these steps to craft the perfect Smartschool SSO button
Step 1: Divider position: the height of the button determines the distance for the divider from the left side.
Step 2: Letter ‘S’: this letter should be sufficiently large. Center this letter both vertically and horizontally.
Step 3: height of the language string: this height must not exceed the height of the letter S. Font to use (or similar font-family) = Open Sans, bold
Variation: a button with just ‘Smartschool’ is also allowed
Don’tThere are no rounded corners on this button.
Don’tThe letter S of the logo is too small. It should be larger than the language string.
Don’tThe divider is placed too far from the letter S.
Don’tNo divider was used. The language string is placed too far from the logo.
Don’tNo divider was used.
Don’tThe radius of the corners in this button is too large.
Don’tThe radius of the corners in this button is too large. The divider is missing between the logo and the language string.
Don’tDon’t make variations with different geometric shapes in one button. Respect the order of the elements so that the logo is placed on the left followed by the language string.
Don’tThis button is too high relative to the image elements. The positioning of the separate elements is not balanced. It is recommended to make a login button no higher than 40px.
Smartschool App & module icons
Smartschool app icon: the app icon is an orange rounded square with the white “s”. Use it as provided, don’t recolour it or add effects. Platform stores may apply their own masking; that’s fine.
Module icons: each Smartschool module has its own icon. Use them to reference a specific module in a manual always at their supplied shape and colour, and never redrawn or recoloured. A selection is provided in the brand kit.
Branding restrictions
Your logo. Your own logo should not include or resemble the Smartschool logo or its brand elements (the orange icon, the “s” letter, or Smartschool Orange). Don’t incorporate Smartschool trademarks in the name of your company, product or website.
Don’t pair brands. Don’t lock the Smartschool brand together with another brand or use it in co-branded compositions without permission.
Downloads & contact
Download the official assets and always use these files rather than recreating them. Questions about brand usage or a variant that isn’t covered here? Contact the Smartschool team before creating your own version.