EGS Design Compliance
Version 2.0.0
- 1.0 General
- 1.1 All designs should follow the guidance marked as “Rules of Thumb”, “Do's” and “Don'ts” as described on individual component pages.
- 2.0 Design Guidelines
- 2.1.0 Color
- 2.1.1 Components and backgrounds shall conform to the colors specified in the Primary, Secondary, Tertiary, and Quaternary palettes.
- 2.1.2 The colors specified in the Tag 1, Tag 2, Tag 3, and Tag 4 palettes shall be used when distinct colors are needed to indicate data categories or groups.
- 2.2.0 Typography
- 2.2.1 The Roboto font shall be used for content and components.
- 2.2.2 The Roboto Mono font shall be used when monospace digits are required.
- 2.2.3 Text shall conform to the specified typography for Heading, Body, and Inline Text.
- 3.0 Patterns
- 3.1.0 Status System
- 3.1.1 Elements indicating state or status shall use only the specified Status Symbols.
-
- 3.1.2 Elements indicating state or status shall use only the specified Status Colors.
- 3.2.0 Data Visualization
- 3.2.1 Data visualizations shall have no more than 8 colors per data set.
- 4.0 Components
- 4.1.0 Button
- 4.1.1 Buttons shall act as actionable elements, not as state indicators.
- 4.1.2 Buttons shall not activate Pop Up Menus.
- 4.1.3 Grouped Buttons shall have the same width and even spacing.
- 4.1.4 Button titles shall be verbs that describe the action performed.
- 4.1.5 Button widths shall accommodate the full title without truncating or abbreviating.
- 4.1.6 Buttons shall be clearly titled, with no outside label.
- 4.1.7 An ellipsis (…) shall follow the Button title when further action is required to complete the command.
- 4.1.8 Outline Button style shall indicate the less preferred option in grouped Buttons.
- 4.2.0 Checkbox
- 4.2.1 Checkboxes shall set values, not initiate actions.
- 4.2.2 Checkboxes shall act independently of others in a group.
- 4.2.3 Checkboxes shall align vertically when in a group.
- 4.2.4 Checkboxes shall have a corresponding label.
- 4.2.5 Checkbox labels shall use sentence case capitalization.
- 4.3.0 Dialog Box
- 4.3.1 Dialog Boxes shall use text Buttons for confirm or cancel actions, not links or other components.
- 4.3.2 The confirm Button shall be to the right of the cancel Button, and right aligned within the Dialog Box.
- 4.3.3 Dialog Boxes shall be closed only with confirm or cancel Buttons.
- 4.3.4 Button titles shall be verbs that describe their actions, or the generic titles “OK” and “Cancel”.
- 4.3.5 Dialog Box text shall be clear, brief, and actionable.
- 4.4.0 Select
- 4.4.1 Menu items shall use title case capitalization.
- 4.4.2 An ellipsis (…) shall follow a menu item when further action is required to complete the command.
- 4.4.3 Select menus shall not exceed 25 menu items. For longer lists, use a Table instead.
- 4.5.0 Global Status Bar
- 4.5.1 The Global Status Bar shall be reserved for global elements that appear on every screen.
- 4.5.2 The Global Status Bar shall include the application name. Other elements are optional.
- 4.5.3 Optional Global Status Bar elements shall be arranged left to right in this order: navigation Tabs, Clock, Monitoring Icons, Action Icons, Emergency Shut Off Button.
-
- 4.5.4 Global Status Bar shall use dark theme styling even when the application is light themed.
- 4.6.0 Icons and Symbols
- 4.6.1 Monitoring Icons shall include a label and a status symbol.
- 4.6.2 Monitoring Icons shall be colored with one of the six standard status colors.
- 4.6.3 Percentage Monitoring Icons shall depict a value between 0 and 100 as both an arc and numeric display.
-
- 4.6.4 Status Symbols shall not be altered. They are required for ADA 508 and WCAG 2.0 compliance.
- 4.6.5 Icon labels shall identify the item represented, and shall not change. A Sub-Label may provide dynamic information.
- 4.6.6 Grouped icons shall be equally sized.
-
- 4.7.0 Input Field
- 4.7.1 Stacked Input Fields shall be left-aligned.
- 4.7.2 Input Fields shall use the mimimum text size defined in the CSS.
- 4.7.3 Input Field labels shall be aligned to the top left of the field.
-
- 4.7.4 Input Field shall have a corresponding label.
- 4.7.5 Input Field labels shall use title case capitalization.
- 4.7.6 Input Field labels shall not use placeholder text in place of labels.
- 4.8.0 Link
- 4.8.1 Links shall use the color defined in the CSS.
- 4.8.2 Links shall not use underlined text.
- 4.8.3 Linked text shall indicated what will happen when the link is clicked, not "Click Here" or "Link".
- 4.9.0 Log
- 4.9.1 Log entries shall include a timestamp.
- 4.9.2 When Log is scrolled to the top, it shall remain locked to the top, allowing users to always see the latest event.
- 4.9.3 When Log is scrolled to view older events, incoming events shall not change the scrolling position.
- 4.10.0 Pagination
- 4.10.1 Pagination shall not use underlined text.
- 4.10.2 Pagination shall display Prev and Next links when the entire page range cannot be displayed.
-
- 4.10.3 Pagination shall remove the Prev link when there are no more pages before the first numeral displayed.
- 4.10.4 Pagination shall remove the Next link when there are no more pages after the last numeral displayed.
- 4.11.0 Pop Up
- 4.11.1 Menu items shall use title case capitalization.
- 4.11.2 An ellipsis (…) shall follow a menu item when further action is required to complete the command.
- 4.11.3 Related groups of menu items shall be indicated by separator lines.
- 4.11.4 Pop Ups shall not exceed 25 menu items.
- 4.12.0 Progress
- 4.12.1 A determinate Progress indicator shall indicate an operation that has a well-defined duration.
-
- 4.12.2 An indeterminate Progress indicator shall indicate an operation that has unknown duration.
-
- 4.12.3 A Progress indicator shall be displayed when a operation takes longer than five seconds to complete.
- 4.13.0 Radio Button
- 4.13.1 Radio Buttons shall be used for mutually exclusive choices.
- 4.13.2 A Radio Button group shall always have one option selected.
- 4.13.3 A Radio Button group shall not exceed 6 items. For longer lists, use a Drop Down Menu.
- 4.13.4 A Radio Button shall not initiate an action.
- 4.13.5 Radio Button labels shall use title case capitalization.
- 4.13.6 Radio Buttons shall have a corresponding label.
-
- 4.14.0 Search
- 4.14.1 Search Fields shall contain placeholder text, defaulting to "Search ... "
- 4.14.2 When a Search Field has keyboard focus, the clear button shall be enabled.
-
- 4.15.0 Segmented Button
- 4.15.1 Segmented Buttons shall be used for mutually exclusive choices.
- 4.15.2 A Segmented Button shall always have one option selected.
- 4.15.3 Segmented Buttons shall be limited to two to four choices.
- 4.16.0 Status Symbol
- 4.16.1 Status Symbols shall be displayed with the specified shapes.
- 4.16.2 Status Symbols shall be displayed with the specified colors.
- 4.17.0 Tabs
- 4.17.1 Tabs shall be arranged in a single row or column.
- 4.17.2 Tabs shall use title case capitalization.
- 4.17.3 Large Tabs shall be used within the Global Status Bar, or top of the content area, for top level navigation.
- 4.17.4 Small Tabs shall be used within the content area, for sub level navigation or view switching.
- 4.18.0 Toggle
- 4.18.1 Toggle shall be used when the action takes immediate effect, without further user confirmation.
- 4.18.2 Toggles shall have a corresponding label.
- 4.18.3 Toggles labels shall use title case capitalization.