Extension Tab Bar
The extension tab bar is a vertical panel located on the right side of the extension content. It helps users navigate between different tabs, allowing them to access the content of the toolboxes (Content Layout of a Component Tab).
A - Extension Bar Container
- Background colour: Neutral/Grey-2 (#F7F7F7)
- Border colour: Border/Border 1 (#B3B3B3)
- Width: 54px
- Height: Varies based on application height
- Border top weight: 0
- Border left, right, bottom weight: 1
B - Pin Separator
- Border color: Border/Border 1 (#B3B3B3)
- Width: 50px
- Height: 1px
C - Extension Icon
- Icon: Flooring
- Size: 24x24
- Alignment: Center
D - Extension Group
- Border colour: Neutral/Grey-86 (#242424)
- Width: 1px
- Height: 34px
- State: Collapsed
E - Active Tab
- Background colour: Primary/P200 (#CADEED)
- Width: 52px
- Height: 32px
- State: Selected
F - Lazy Indicator
- Background colour: Neutral/Grey-50 (#808080)
- Size: 2x2
- Alignment: Right

G - Tab Line
- Background colour: Border/Border 2 (#E6E6E6)
- Width: 52px
- Height: 1px

Extension Icons | Size no more than | Usages |
|---|---|---|
A. Image (Default) | 24x24 | When an image is no larger than 24x24 in size |
B. Image (Wide) | 44x24 | When an image is larger than 24x24 in size or in need of a wider width |
C. Only text | 44x24 | When an extension tab has no image and only text |
D. Image & text | 44x24 | When in need of both image and text in a single toolbox card |
- An image can consists of an icon, logo or rendered product
- A text can consists of initials and short extension tab titles
- Image and text are always center-aligned
Text Style | Recommended |
|---|---|
Font | Segoe UI |
Size | 7 |
Colour | Icon/Stroke (#242424) |
Line height | 10 |
Letter case | Uppercase |
Maximum line | 2 lines |
Rules to follow
- Toolbox card size must always be 52x32 in size
- Content size must always obey the 24x24 or 44x24 rules
- Do not change selected state color and size
- Always have 1px spacing in between each toolbox card, tab line and pin separator
- If branding text styles are not available, follow the recommended text styles

A - Image (Default)
B - Image (Wide)
C - Only text
Note: The developer features to add text, background color, and accent bars through code are not available at the moment as of 15.5 (November 2024) release, but we are working hard on bringing this to reality.
In the meantime, these guidelines will apply to the usage of images containing text.

D - Image and text
Note: The developer features to add text, background color, and accent bars through code are not available at the moment as of 15.5 (November 2024) release, but we are working hard on bringing this to reality.
In the meantime, these guidelines will apply to the usage of images containing text.
Note: The developer features to add text, background color, and accent bars through code are not available at the moment as of 15.5 (November 2024) release, but we are working hard on bringing this to reality.
In the meantime, these guidelines will apply to the usage of images containing text.

Branding Types | Size | Usages |
|---|---|---|
A. Accent bar | 2x32 Height depends on the number of tabs | When in need of branding colors to show on toolbox card. Accent bars can be applied to any toolbox card. |
B. Background | 44x24 Similar to B. Image (Wide) | When accent bar is not satisfactory and branding colours need to be more prominent. |
The height of the button and the spacing between icons, are intended to ensure consistency. Please do not override the system values. When determining the branding colour, please take into account the system’s status indicators for:
- Selection highlight (#CADEED)
- Lazy indicator (#808080)
- Tab line (#E6E6E6)
Normal/Hover/Pressed

Selected
Background colour: None
Background colour: Primary/P200 (#CADEED)

