UI Style Guide Default - Blue Magenta Version 1.0 | 2021 Embracing complexity. Delivering simplicity. SM exelatechnologies exelatechnologies @exelatech exela-technologies 2021 Exela Technologies, Inc. exelatech.com +1 844 -XELATEC
Style Guide (Generic) Table of Contents 01 Principles for Creating a UI Design 01 Color 2021 Exela Technologies, Inc.
Style Guide (Generic) 2021 Exela Technologies, Inc.
01 - Color Style Guide (Generic) 01 Blue Magenta Color Theme 01 2021 Exela Technologies, Inc.
01 - Color Style Guide (Generic) 01.00 Color #1277D9 On-Primary Color #FFFFFF Primary Color Text On-Primary Color Primary Dark Color #0B4A87 On-Primary Dark Color #FFFFFF Primary Light Color Text On Primary Dark Color #CDECFF On-Primary Light Color #182832 Text On Primary Light Color 2021 Exela Technologies, Inc. 02
01 - Color Style Guide (Generic) Secondary Color #D71996 On-Secondary Color #FFFFFF Text On Secondary Color Secondary Dark Color #961169 On-Secondary Dark Color #FFFFFF Text On Secondary Dark Color Secondary Light Color #EF71C4 On-Secondary Light Color #182832 Text On Secondary Light Color 03 2021 Exela Technologies, Inc.
01 - Color Style Guide (Generic) Background Color #F4F4F4 On-Background Color #182832 Text On Background Color Surface Color #FFFFFF On-Surface Color #182832 Additional Colors Text On Background Color #444444 #585858 #AAAAAA #888888 #00678D #CFF2FF 2021 Exela Technologies, Inc. 04
01 - Color #B40220 On-Error Color Style Guide (Generic) Error Color #FFFFFF Text On Error Color Header Color #FFFFFF On-Header Color #182832 Text On Header Color Sidebar Color #FFFFFF On-Sidebar Color #ffffff Text On Sidebar Color #DADADA Divider Color / Navigation Tab baseline Color 05 2021 Exela Technologies, Inc.
01 - Color In Review Style Guide (Generic) Status #E86F11 Cancelled/Rejected/Fail To Do/Not Started/Scheduled Completed/Done #B40220 #16A0CA #6500A7 Blocker In Progress/WIP Active #182832 #B43FEE #5286FF Inactive Approved Pending #767676 #218666 #914518 Draft Suspended/Terminated/On Hold Medium #BC43B4 #9F921D #0081D6 Low Priority #7233FF #877900 High #EB6D00 #E50000 2021 Exela Technologies, Inc. 06 Category #EF4B66 #0FA06B
02 - Bu ons Style Guide (Generic) 02 Blue Magenta Bu ons Theme 16 16 07 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 02.00 Bu ons Types, emphasis & hierarchy 1. Floating Action Button (highest emphasis) 2. Contained Button (high emphasis) Primary button 3. Outlined Button (medium emphasis) Secondary button 4. Text Button (low emphasis) Secondary button / tertiary button 5. Toggle Button (used less often than other button types) BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON 16 16 2021 Exela Technologies, Inc. 08
02 - Bu ons Style Guide (Generic) 1. Floating Action Bu on (highest emphasis) 24 Types of Floating Action Bu on 1. Regular FAB 24 40 56 2. Mini FAB 16 16 88 3. Extended FAB 48 CREATE 24 CREATE 20 20 CREATE 4. Extended FAB with leading icon Font - 14, Medium CREATE 12 12 20 09 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 2. Contained Bu on (high emphasis) 2. Contained button with leading icon Types of Contained Bu on BUTTON 1. Regular BUTTON Corner radius - 4 24 min. width - 72 36 BUTTON 36 BUTTON 12 8 16 16 16 Font - 14, Semibold 2021 Exela Technologies, Inc. 10
02 - Bu ons Colors #FFFFFF Style Guide (Generic) #888888 2. Contained Bu on (high emphasis) #D71996 #FFFFFF #08345E States of Bu ons #F4F4F4 #FFFFFF #7E155A #A51172 #FFFFFF 1. Enabled #D71996 BUTTON #A51172 2. Disabled BUTTON 3. Hover BUTTON 4. Focused BUTTON 5. Pressed BUTTON 11 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 3. Outlined Bu on (medium emphasis) 2. Outlined Button with leading icon Types of Outlined Bu on BUTTON 1. Regular BUTTON Corner radius - 4 24 min. width - 72 36 BUTTON 36 BUTTON 12 8 16 16 16 Font - 14, SemiBold 2021 Exela Technologies, Inc. 12
02 - Bu ons Style Guide (Generic) 3. Outlined Bu on (medium emphasis) #888888 #08345E States of Bu ons Colors #CDECFF 1. Enabled BUTTON #1277D9 #FFFFFF #FFFFFF 2. Disabled #F4F4F4 #FFFFFF BUTTON #FFFFFF #FFFFFF 3. Hover #08345E BUTTON 4. Focused #1277D9 BUTTON 5. Pressed #08345E BUTTON 13 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 4. Text Bu on (low emphasis) 2. Text Button with leading icon Types of Text Bu on BUTTON 1. Regular 24 BUTTON 36 BUTTON min. width - 72 12 8 16 36 BUTTON 16 16 2021 Exela Technologies, Inc. 14
02 - Bu ons Style Guide (Generic) 4. Text Bu on (low emphasis) Colors States of Bu ons #1277D9 #FFFFFF 1. Enabled BUTTON #888888 #FFFFFF 2. Disabled #08345E #FFFFFF BUTTON #1277D9 #FFFFFF #08345E 3. Hover BUTTON #08345E #FFFFFF #00203E 4. Focused BUTTON 5. Pressed BUTTON 15 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 5. Toggle Bu on (used less o en than other bu on types) 24 48 12 12 48 2021 Exela Technologies, Inc. 16
02 - Bu ons Style Guide (Generic) 5. Toggle Bu on (used less o en than other bu on types) States of Bu ons Colors 1. Enabled #182832 #FFFFFF #AAAAAA 2. Disabled #888888 #FFFFFF #F4F4F4 3. Hover #182832 #FFFFFF #AAAAAA #CDECFF 4. Focused #182832 #FFFFFF #AAAAAA #08345E 17 2021 Exela Technologies, Inc.
02 - Bu ons Style Guide (Generic) 5. Toggle Bu on (used less o en than other bu on types) States of Bu ons Colors 5. Pressed #182832 #FFFFFF #AAAAAA #CDECFF #1277D9 2. Disabled #182832 #FFFFFF #AAAAAA #1277D9 2021 Exela Technologies, Inc. 18
03 - Tabs Style Guide (Generic) 03 Blue Magenta Tabs Theme 16 16 19 2021 Exela Technologies, Inc.
03 - Tabs Style Guide (Generic) 03.00 Tabs Usage 1. Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. 2. Tabs can be paired with components like top app bars, or nested in components like cards and sheets. Types 1. Clustered Fixed Tabs TAB ONE TAB TWO TAB THREE 20 48 TAB ONE 16 16 2 16 1 2021 Exela Technologies, Inc. 20
03 - Tabs Style Guide (Generic) Types 1. Clustered Fixed Tabs TAB ONE TAB TWO TAB THREE 24 24 TAB ONE 8 16 16 TAB ONE TAB TWO TAB THREE TAB ONE 8 72 21 2021 Exela Technologies, Inc. Font - 14, Medium
03 - Tabs Style Guide (Generic) 2021 Exela Technologies, Inc. 22 Types 2. Scrollable Tabs TAB ONE TAB TWO TAB THREE 48 TAB TWO TAB THREE TAB FOUR 48 2. Scrollable Tabs
03 - Tabs Style Guide (Generic) Tabs in wizard style TAB ONE TAB TWO TAB THREE 24 TAB ONE TAB TWO TAB THREE 3. Icon Tabs 2 3 TAB TWO TAB THREE 1 TAB ONE 23 2021 Exela Technologies, Inc.
03 - Tabs TAB TWO TAB THREE Style Guide (Generic) 2021 Exela Technologies, Inc. 24 Colors #585858 #1277D9 TAB ONE #DADADA Normal Selected Base line TAB ONE TAB TWO TAB THREE Hover/Selected Hover #08345E
04 - Selection controls Style Guide (Generic) 04 Blue Magenta Selection controls Theme 16 16 25 2021 Exela Technologies, Inc.
03 - Tabs Style Guide (Generic) 04.00 Selection controls Usage 1. Selection controls allow users to complete tasks that involve making choices such as selecting options or switching settings on or off. 2. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs. Types 1. Checkboxes 24 24 20 24 2021 Exela Technologies, Inc. 26
03 - Tabs Style Guide (Generic) Types 24 24 2. Radio buttons 20 3. Switches 24 24 20 24 27 2021 Exela Technologies, Inc.
03 - Tabs Style Guide (Generic) 2021 Exela Technologies, Inc. 28 Colors Normal #585858 #FFFFFF Selected #1277D9 Ripple #DADADA Normal #585858 #DADADA #08345E Selected #1277D9 #FFFFFF
05 - Chips Style Guide (Generic) 05 Blue Magenta Chips Theme 16 16 29 2021 Exela Technologies, Inc.
05 - Chips Style Guide (Generic) 05.00 Chips Usage 1. Chips are compact elements that represent an input, attribute, or action. 2. Chips allow users to enter information, make selections, filter content, or trigger actions. 3. Chips should appear dynamically as a group of multiple interactive elements. Types Choice chip 2 Choice chip 3 1. Input chips Choice chip 1 20 20 Choice chip 3 24 Choice / input chip 1 12 8 8 48 88 Font - 14, Medium 2021 Exela Technologies, Inc. 30
05 - Chips Style Guide (Generic) Types Low 32 2. Choice chips 12 12 High Medium Low 3. Filter chips Work Vacation Nature Nightlife Nature 88 12 31 2021 Exela Technologies, Inc.
05 - Chips Style Guide (Generic) Colors #1277D9 #FFFFFF Default #1277D9 #FFFFFF #CDECFF Choice chip 1 #1277D9 #FFFFFF Hover Choice chip 1 #1277D9 #FFFFFF Default High Selected Medium 2021 Exela Technologies, Inc. 32
06 - Dialogs Style Guide (Generic) 06 Blue Magenta Dialogs Theme 16 16 33 2021 Exela Technologies, Inc.
06 - Dialogs Style Guide (Generic) 06.00 Dialogs Usage 1. Dialogs inform users about a task and can contain critical information, require decisions, or involve \\ multiple tasks. 2. A dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. 3. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. 4. Dialogs are purposefully interruptive, so they should be used sparingly. Dialog Header Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. BUTTON BUTTON 2021 Exela Technologies, Inc. 34
06 - Dialogs Style Guide (Generic) Font - 20, Semibold Font - 14, Regular 24 24 Dialog Header 24 Lorem Ipsum is simply dummy text of the printing and 24 typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. BUTTON BUTTON 24 16 24 35 2021 Exela Technologies, Inc.
06 - Dialogs Style Guide (Generic) Colors #1277D9 #FFFFFF Title #444444 Body Text #182832 Button #D71996 2021 Exela Technologies, Inc. 36
07 - Data Table Style Guide (Generic) 06 Blue Magenta Data Table Theme 16 16 37 2021 Exela Technologies, Inc.
07 - Data Table Style Guide (Generic) 07.00 Data Table Usage 1. Data tables display sets of data across rows and columns. 2. They organize information in a way that’s easy to scan, so that users can look for patterns and insights. 3. Data tables can contain: - Interactive components (such as chips, buttons, Checkboxes, Sorting, Icons or menus) - Non-interactive elements (such as badges) - Tools to query and manipulate data Columns Facility Name Address Action 64 40 Filter Filter 16 16 16 24 No data available in table 16 16 16 2021 Exela Technologies, Inc. 38
07 - Data Table Style Guide (Generic) Facility Name Address Action Font - 14, SemiBold Font - 14, Regular Filter Filter No data available in table 16 40 12 4 Facility Nam8e Address Action Filter Filter 12 1 No data available in table Filter 20 8 Font - 10, Regular 39 2021 Exela Technologies, Inc.
07 - Data Table Search BUTTON Style Guide (Generic) Action Column Customization 12 Column (12) Facility Name Address Filter Filter No data available in table 24 Search 16 Column (12) BUTTON Action Facility Name Address Filter Filter No data available in table 2021 Exela Technologies, Inc. 40
07 - Data Table Style Guide (Generic) Colors Address Action Facility Name Filter Filter No data available in table No data available in table Column (12) #182832 #FFFFFF #DADADA Search #FFFFFF #DADADA #585858 BUTTON #FFFFFF #D71996 41 2021 Exela Technologies, Inc.
07 - Data Table Style Guide (Generic) Rows Address Action 64 40 40 Filter 20 Facility Name ICC Tech Park, 9th Floor 2701 E. Grauwyler Road Filter 16 16 16 Facility 1 16 Facility 2 Address Action Facility Name Filter Row Hover Filter Selected Row ICC Tech Park, 9th Floor Facility 1 2701 E. Grauwyler Road Facility 2 Font - 14, Regular 2021 Exela Technologies, Inc. 42
07 - Data Table Style Guide (Generic) Colors ICC Tech Park, 9th Floor #DADADA Facility 1 #182832 #CDECFF Facility 2 2701 E. Grauwyler Road Facility 2 2701 E. Grauwyler Road #182832 #CDECFF #1277D9 #F4F4F4 #FFFFFF 43 2021 Exela Technologies, Inc.
07 - Data Table Style Guide (Generic) Rows Group Address Action Facility Name Filter 40 40 Filter ICC Tech Park, 9th Floor 40 Pune Facility 1 Magarpatta Tech Park Facility 2 Pune Tech Park, SB Road Facility 2-1 Hinjewadi Tech Area Facility 2-2 Magarpatta Tech Park Facility 2-3 Facility 3 Font - 14, SemiBold Font - 14, Regular 2021 Exela Technologies, Inc. 44
07 - Data Table Style Guide (Generic) Status Address Status Action Facility Name Filter Filter Filter ICC Tech Park, 9th Floor Active 2701 E. Grauwyler Road Fail Facility 1 Facility 2 Active 12 12 8 Note: For defining status, please use colors other than Call to action & Hyperlink. 45 2021 Exela Technologies, Inc.
07 - Data Table In Review Style Guide (Generic) Status #E86F11 Cancelled/Rejected/Fail To Do/Not Started/Scheduled Completed/Done #B40220 #16A0CA #6500A7 Blocker In Progress/WIP Active #182832 #B43FEE #5286FF Inactive Approved Pending #767676 #218666 #914518 Draft Suspended/Terminated/On Hold Medium #BC43B4 #9F921D #0081D6 Low Priority #7233FF #877900 High #EB6D00 #E50000 2021 Exela Technologies, Inc. 46 Category #EF4B66 #0FA06B
07 - Data Table Address Action Style Guide (Generic) Menu / Actions Filter Share 20 View Facility Name ICC Tech Park, 9th Floor Delete 2701 E. Grauwyler Road Filter Facility 1 Facility 2 Note: You can use context menu (Three dot menu) for more than 3 / 4 actions in a columns Facility Name Address Status Filter Filter Filter Facility 1 ICC Tech Park, 9th Floor Active Facility 2 2701 E. Grauwyler Road Note: On mouseover the action icon will appear on the right side of the row. 47 2021 Exela Technologies, Inc.
Search
