Ribbon Groups
Ribbon groups are UI containers that organize related controls in Company desktop ribbon bars for efficient feature
access.
Structure and layout
- Group logically related controls; single row of icons per group.
- Minimize standalone buttons โ use contextual panels or pop-up bars when a tool is active.
- Order groups to guide primary workflow.
- Raised elevation with rounded corners; low-contrast dividers between groups (no full borders).
Typography and color
- Standard UI font; legible at all resolutions.
- Light background #ffffff; dark #1f1f1f; brand accent for active/highlight states.
- Sufficient contrast for text and icons.
Iconography
- Unique icon per feature/panel; dedicated placeholder โ do not reuse ambiguous icons.
- Consistent style within each group.
Interaction patterns
- Split buttons: highlight only the arrow region; enlarge arrow hit area.
- Pop-ups: single level only โ no nested pop-ups.
- Notification dots: fully within button region; do not disrupt label alignment.
- Disabled vs hidden: prefer disabled unless licensing requires hiding controls.
Example
Accessibility
- Keyboard navigation through ribbon controls.
- Screen reader labels for icon-only buttons.
- WCAG contrast and minimum touch targets.