The Branding tab includes field-level settings for logo and favicon uploads, color and style options for each area of the system interface, image format guidance, and stock photo resources.
Logo Specifications
The following specifications apply when uploading a logo to the Branding tab.
| Setting | Details |
|---|---|
| Dimensions | Recommended: 112px height × 560px width. The logo displays within a 40px × 200px container. |
| Format | PNG with transparent background recommended. JPG and GIF are also accepted. |
| File Size | 10–20 KB, 150 ppi recommended. |
Favicon Specifications
The following specifications apply when uploading a favicon to the Branding tab.
| Setting | Details |
|---|---|
| Dimensions | 48px × 48px |
| Format | PNG or ICO recommended. |
| File Size | 5–10 KB recommended. |
Image Format Reference
The following image formats are supported for logos, favicons, and other branding images.
| Format | Type | Best For |
|---|---|---|
| PNG | Lossless, supports transparency | Logos, icons, graphics |
| JPG/JPEG | Lossy | Photos, people, landscapes, realistic imagery |
Stock Photo Resources
Copyright-free resources for sourcing images:
Paid stock photo resources:
Free icon resources:
Global Color and Style Settings
The following settings control colors and styles that apply throughout the system interface.
| Setting | Description |
|---|---|
| Mandatory Field Font | Color of all mandatory fields. Default #D81A01 (red) provides sufficient contrast for accessibility. |
| Mandatory Field Style | Mandatory fields are prefixed with an asterisk (*) by default. This must remain for accessibility. Changing to caption color instead of an asterisk is possible but not recommended. |
| Link | Color of all text links. |
| Link Hover | Color of text links when the mouse hovers over them. |
| Link Underline | Text links are underlined by default and must remain underlined for accessibility. Disabling underlines is not recommended. |
| Button Font | Text and icon color within buttons. Set to white or a light color. |
| Button Background | Background color for buttons. Use a dark color for contrast. Common choices: blue, gray, or purple. Avoid red and green, which are associated with error and success states. |
| Button Hover | Button color on hover (mouse over). |
| Highlight | Background color of an input field when it is in focus. Set to a light tint such as yellow (#F7F4DA). Avoid gray; the clear [X] icon will not be visible. |
| Save Button Color | Style for Save buttons on record pages. |
| Delete Button Color | Style for Delete buttons on record pages. |
Heading Settings
Main Heading settings control the system header, which is the bar at the top of all pages containing the logo and navigation links.
| Setting | Description |
|---|---|
| Font | Text color for main menu links in the header. |
| Background | Background color of the header. Typically a dark color. Maintain a contrast ratio of 4.5 or greater between Background and Font for accessibility. |
| Accent Font | Color of icons in the header. |
| Accent Background | Background color beneath the header icons. Typically dark. Maintain a contrast ratio of 4.5 or greater between Accent Background and Accent Font. |
Left Navigation Settings
Navigation settings control the left navigation panel and user menu.
| Setting | Description |
|---|---|
| Font | Text color in the user menu and left navigation. |
| Background | Background color behind text in the left navigation. |
Title Settings
Title settings control the title areas in the personal dashboard and portal sections using the traditional theme.
| Setting | Description |
|---|---|
| Font | Color of the title text. Typically a dark shade or #000000. |
| Background | Background color of the title area. Typically a light shade or #EEEEEE. |
| Bottom Border | Color of the border beneath the title bar in portal sections using the traditional theme. Typically matches the background for a seamless look, or a slightly darker shade such as #CCCCCC. |
Sub-Title Settings
Sub-Title settings control title bars and headings on object pages and settings pages.
| Setting | Description |
|---|---|
| Font | Text color for title bars and headings. Typically dark gray or #000000. |
| Bottom Border | Color of the underline on title bars and headings. Typically a light shade of gray. |
List Settings
List settings control the appearance of table headers and row borders in list views.
| Setting | Description |
|---|---|
| Heading Font | Text color for table headers. Typically a dark color similar to the button background. Avoid white; column headers may not display correctly in some areas of the system. |
| Heading Background | Background color for table headers. Typically a variant of the header color at approximately 15% opacity. Font and background colors invert when a column header is clicked to sort. Maintain accessibility contrast standards for sorting icons. |
| Top Border | Line style at the top of each row. Typically 1px solid #FFFFFF (white). |
| Bottom Border | Line style at the bottom of each row. Typically 1px solid #CCCCCC (light gray). |