Branding allows global administrators to customize how SmartSimple looks for all users. The initial branding is applied during implementation, and administrators can update it at any time. Color and style changes apply to all users equally; the colors an administrator sees are identical to what applicants see. Branding colors are also checked for accessibility standards.
Who: Global administrators
When to Use Branding
Use Branding when:
- The organization updates its logo, color scheme, or brand guidelines.
- A new SmartSimple environment is being set up for the first time.
- Tested color settings need to be copied from a backup environment to production.
- The portal appearance needs to be customized for applicants or external users.
System Branding Elements
From Global Settings, navigate to the Branding tab to view the following configurable elements:
Colors and Styles — Controls the color and appearance of system-wide elements including the header, navigation, buttons, links, and table headers.
Login Page — Controls the language, layout, content, and privacy of login pages.
Logo — Displays in the top-left corner of the header across all pages. Organizations typically upload their official logo or a version optimized for smaller formats. If no image is uploaded, the Logo Text field displays instead.
Favicon — The small icon that appears in the browser tab. It is separate from the logo and uses a square format.
Logo Text — The alt text associated with the logo image. This text displays if the image fails to load and is read by screen readers and other assistive technology.
Interface Options — Controls whether the title bar navigation pane, instructions, native browser alerts, and single column layout are enabled or disabled.
General Terminology — Determines how internal and external units and users are labeled within the site.
Accessibility Requirements
When customizing colors, maintain a contrast ratio of 4.5 or greater between fonts and backgrounds to meet Section 508 and Web Content Accessibility Guidelines (WCAG) 2.0 accessibility standards. Use the contrast checker by WebAIM to verify color choices.
Additional accessibility considerations:
- Mandatory fields are prefixed with an asterisk (*) by default. This format must be maintained for accessibility.
- All text links are underlined by default. Disabling underlines is not recommended.
- The default mandatory field color (#D81A01) provides sufficient contrast with standard backgrounds.
- It is recommended that individual submit buttons that lead to error or success states be configured with red for error and green for success. Avoid using red and green buttons for other buttons.
Image Specifications
Logo File Size and Resolution
The logo container is 40px tall by 200px wide. Recommended upload dimensions are 112px by 560px. Use a version of the logo optimized for small formats; intricate details, taglines, and long wordmarks may not be legible at this size.
The logo file is also used when printing application summaries and other documents, so it should be sized for print quality, not just on-screen legibility. Keep the logo file size to 10 to 20 KB, at 150 ppi.
File Size
Keep other images at 1 MB or smaller to avoid delays during page loading.
Resolution
For other images used on screen, such as backgrounds, portal pages, and login pages, 72 ppi is sufficient.
Format
Two formats are recommended:
- PNG (Portable Network Graphics) — A lossless format that supports transparency. Recommended for logos, icons, and graphics.
- JPG/JPEG (Joint Photographic Experts Group) — A lossy format. Best for photos of people, landscapes, and realistic imagery.
Resources
For more information about Branding, see: