EGS Design Compliance

Version 1.0.0

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