16-Attachment Q - Information Technology Style Guide (1).pdf

Style Guide Information Technology version 1.3Attachment Q

Table of Contents

Sample Page Templates

Sample Patterns

Color Styles

Typography Styles

Logos

Form Fields and Inputs

Buttons

Loader

Graphic Elements

Photography

Grid and Alignment

Resource Reference List

Below is a collection of links to resources that are listed throughout this guide to provide an easy way to navigate to any resources that might be needed.�

�� - Find all the TEA accessibility resources your team might need�

�� - Discover helpful tools for accessibility�

�� - Review the IT accessibility requirements�

�� - Get familiar with the TEA Brand Guidelines�

�� - Find useful IT assets such as icons, logos, and more�

�� - Access a wide range of TEA-specific assets�

�� - Browse through the TEA Photo Library to find TEA approved images for projects�

�� - A supplemental, and TEA approved resource, for finding images for projects.

TEA Accessibility Resources

Testing & Tools

IT standard accessibility requirements

TEA Brand Guidelines

IT SharePoint site

TEA SharePoint

TEA Photo Library

Adobe Stock https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/home.aspx https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/testing-tools.aspx https://dev.azure.com/teatexas/Standard%20ITS%20Requirements/_backlogs/backlog/Standard%20ITS%20Requirements%20Team/System%20Class https://texasedu.sharepoint.com/sites/itea/strategic/sc/Shared%20Documents/Forms/tags.aspx?id=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book%2FTEA%5FBrand%5FGuidelines%5F09%2D20%2D23%2Epdf&parent=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx https://texasedu.sharepoint.com/sites/ext/pic/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2Fext%2Fpic%2FShared%20Documents%2FIcons https://texasedu.sharepoint.com/sites/ext/pic/TEA%20Photo%20Library/Forms/Thumbnails.aspx https://stock.adobe.com/?as_campaign=&as_campclass=brand&as_camptype=app&as_channel=adobe_apps&as_content=Search:SearchResult&as_source=Creative%20Cloud%20Desktop&location=Search:SearchResult&product=Creative%20Cloud%20Desktop&mv=product&mv2=accc#token_type=bearer&expires_in=86399998

Color Styles

Accessible Colors - Section 1.0

The agency complies with the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA guideline standards.

All of the colors in our palettes are WCAG compliant, however, when working with colors, it is recommended to use a color contrast checking tool to double check the contrast ratio to ensure it passes for accessibility. You can find a list of tools on the TEA page under the section.

For more details on accessibility at TEA, please see the .

Accessibility

Resources Testing & Tools

IT standard accessibility requirements https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/home.aspx https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/home.aspx https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/testing-tools.aspx https://dev.azure.com/teatexas/Standard%20ITS%20Requirements/_backlogs/backlog/Standard%20ITS%20Requirements%20Team/System%20Class

Base Colors - Section 1.1

Cobalt rgba(0, 123, 189, 1)

Usage: Bottom header bar, buttons

#007BBD

Slate rgba(0, 107, 164, 1)

Usage: Links

#006BA4

Persian Blue rgba(53, 99, 157, 1)

Usage: Grid headers, bottom footer bar

#35639D

Gentian Blue rgba(37, 70, 108, 1)

Usage: Top header bar, top footer bar

#25466C

Dark Blue rgba(40, 76, 118, 1)

Usage: Button and link hover states

#284C76

Light Sky Blue rgba(204, 240, 245, 1)

Usage: Alt grid rows

#CCF0F5

Robin's Egg Blue rgba(229, 248, 250, 1)

Usage: table rows

#E5F8FA

Ice Blue rgba(224, 240, 242, 1)

Usage: Navigation bar

#E0F0F2

Sky Blue rgba(165, 228, 237, 1)

Usage: Grid row for broadcast messages

#A5E4ED

Ocean Blue rgba(0, 181, 203, 1)

#00B5CB

Teal rgba(0, 126, 143, 1)

Usage: Alt grid header

#007E8F

Usage: Accent color

The colors in this section are part of the standard color palette to be used in IT applications.

Pale Blue rgba(241, 243, 249, 1)

Usage: Alt grid rows

#F1F3F9

Base Colors Continued

Persimmon rgba(185, 69, 0, 1)

Usage: Alt headers and text

#B94500

Light Aqua rgba(113, 205, 157, 1)

#71CD9D

Sea Green rgba(58, 166, 110, 1)

Usage: Green header bubble

#3AA66E

Jungle Green rgba(61, 166, 128, 1)

Usage: PEIMS logo

#3DA680

Dark Grey rgba(51, 51, 51, 1)

Usage: Visited links, breadcrumbs, paragraphs

#333333

Med Grey rgba(130, 131, 134, 1)

Usage: Decorative elements, such as dividers

#828386

Dark Grey 2 rgba(36, 36, 36, 1)

Usage: Paragraphs

#242424

Usage: Accent color

Tangerine rgba(229, 113, 0, 1)

Usage: Headers

#E57100

Base Colors: Error and Warning States - Section 1.2

Warning 100 rgba(252, 240, 219, 1)

#FCF0DB

Warning 200 rgba(255, 212, 129, 1)

#FFD481

Warning 300 rgba(220, 104, 3, 1)

#DC6803

Warning 400 rgba(127, 48, 4, 1)

#7F3004

Error 100 rgba(253, 225, 225, 1)

#FDE1E1

Error 200 rgba(252, 165, 165, 1)

#FCA5A5

Error 300 rgba(187, 37, 26, 1)

#BB251A

Error 400 rgba(131, 26, 18, 1)

#831A12

Note that the 300 series is our default for background colors on banners and notifications. The other color options are provided for special circumstances, where you may need to highlight content, for example. If using the 100 or 200 series, please be sure to check accessibility as it applies to your application and use a darker font color in the foreground.

Base Colors: Success and Info States - Section 1.3

Info 300 rgba(20, 101, 180, 1)

#1465B4

Info 400 rgba(12, 61, 108, 1)

#0C3D6C

Info 100 rgba(220, 237, 252, 1)

#DCEDFC

Info 200 rgba(132, 202, 255, 1)

#84CAFF

Success 100 rgba(214, 243, 233, 1)

#D6F3E9

Success 200 rgba(121, 215, 172, 1)

#79D7AC

Success 300 rgba(3, 152, 85, 1)

#039855

Success 400 rgba(4, 81, 48, 1)

#045130

Note that the 300 series is our default for background colors on banners and notifications. The other color options are provided for special circumstances, where you may need to highlight content, for example. If using the 100 or 200 series, please be sure to check accessibility as it applies to your application and use a darker font color in the foreground.

TEA Colors - Backup - Section 1.4

TEA Blue rgba(13, 108, 185, 1)

#0D6CB9

TEA Orange rgba(241, 96, 56, 1)

#F16038

Navy Blue rgba(1, 33, 105, 1)

#012169

Sky Blue rgba(86, 183, 230, 1)

#56B7E6

Light Blue rgba(224, 236, 246, 1)

#E0ECF6

Dark Purple rgba(82, 50, 94, 1)

#52325E

Brick Red rgba(183, 36, 24, 1)

#B72418

Pencil Yellow rgba(236, 175, 51, 1)

#ECAF33

Grass Green rgba(64, 131, 78, 1)

#40834E

Turqouise rgba(0, 132, 130, 1)

#008482

Charcoal rgba(54, 53, 52, 1)

#363534

Cool Grey rgba(90, 98, 103, 1)

#5A6267

While the IT colors are recommended, the TEA colors may be used as alternative options if you need greater flexibility. For the full color palette, please see the .

TEA Brand Guidelines https://texasedu.sharepoint.com/sites/itea/strategic/sc/Shared%20Documents/Forms/tags.aspx?id=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book%2FTEA%5FBrand%5FGuidelines%5F09%2D20%2D23%2Epdf&parent=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book

Typography Styles

Accessible Fonts - Section 1.5

The agency complies with the Web Content Accessibility Guidelines (WCAG) 2.0 Level AA guideline standards.

While WCAG doesn’t recommend a specific font or size, it does require a minimum color contrast ratio or 4.5:1 for normal text and 3:1 for large text (18.66px and bold or larger) to meet Level AA Compliance.

All of the colors in our palettes are WCAG compliant, however, when working with fonts and colors, it is recommended to use a color contrast checking tool to double check the contrast ratio to ensure it passes for accessibility. You can find a list of tools on the TEA page under the section.

For more details on accessibility at TEA, please see the .

Accessibility Resources Testing & Tools

IT standard accessibility requirements https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/home.aspx https://texasedu.sharepoint.com/sites/itea/accessibility/SitePages/testing-tools.aspx https://dev.azure.com/teatexas/Standard%20ITS%20Requirements/_backlogs/backlog/Standard%20ITS%20Requirements%20Team/System%20Class

Primary Fonts - Section 1.6

Secondary Fonts - Section 1.7

Open Sans is our primary font. Calibri and Arial are used as backups for when Open Sans is not available.

NOTE: Please refer page 23 of the for more details on font usage.

TEA Brand Guide

Adelle may be used when a serif font is preferred.

Roboto Slab is the backup for when Adelle is not available.

Poppins may be used as a secondary font for bold headings. There is no backup font for Poppins.

https://texasedu.sharepoint.com/sites/itea/strategic/sc/Shared%20Documents/Forms/tags.aspx?id=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book%2FTEA%5FBrand%5FGuidelines%5F09%2D20%2D23%2Epdf&parent=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book

Heading 1 - Section 1.8

Font

Open Sans

Weight

SemiBold

Size

36px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#E57100

The quick brown fox jumps over the lazy dog.

Heading 2 - Section 1.9

Font

Open Sans

Weight

SemiBold

Size

24px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#35639D

The quick brown fox jumps over the lazy dog.

Heading 3 - Section 2.0

Open Sans

Weight

SemiBold

Size

20px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#007E8F

The quick brown fox jumps over the lazy dog.

Heading 4 - Section 2.1

Font

Open Sans

Weight

SemiBold

Size

18px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#242424

The quick brown fox jumps over the lazy dog.

Paragraph - Section 2.2

Open Sans

Weight

Regular

Size

16px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#242424

The quick brown fox jumps over the lazy dog.

Paragraph Links - Section 2.3

Font

Open Sans

Weight

Regular

Size

16px

Line Height

120%

Letter Spacing

0%

Text Decoration

Underline

Paragraph Spacing

0px

Color

#006BA4

The quick brown fox jumps over the lazy dog.

Navigation Links - Section 2.4

Open Sans

Weight

Regular

Size

16px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#006BA4

The quick brown fox jumps over the lazy dog.

Navigation Links - Active - Section 2.5

Font

Open Sans

Weight

Regular

Size

16px

Line Height

120%

Letter Spacing

0%

Text Decoration

None

Paragraph Spacing

0px

Color

#E57100

The quick brown fox jumps over the lazy dog.

Example of Typography in Use - Section 2.6

To the right is a sample of our typography in use.

For more details on typography styling, please see the previous sections.

Note: It is acceptable to deviate away from the color usage for the typography defined in the section above if needed, so long as you use a standard color in this style guide. For example, using Dark Grey 2 for headings.

Line Heights can be adjusted as needed to accommodate the UI and user needs. It’s recommended that line heights be between 1.2 and 1.5 times the font size. For example, 120% -

150%.

Logos

Logo Introduction - Section 2.7

A brand’s visual identity is often the first point of contact with the world. The logos that we’ve chosen to represent our products and services are not arbitrary. They are carefully selected symbols that embody our agency’s values, mission, and vision.

By understanding these symbols, you’ll be better equipped to maintain consistency in our visual communication and uphold our commitment to a unified, impactful brand presence.

Please note, if your application does not have a logo, we recommend that you use the TEA Logo. The TEA Brand Guidelines has more details on usage.

TEA Logo - Section 2.8

The TEA logo is the cornerstone of the agency’s visual identity. It should appear on all collateral, publications, digital media, and documents. It includes the logomark, agency name, and trademark symbol.

For more details on the TEA logo usage, please visit the .TEA Brand Guidelines

Primary TSDS Logo - Section 2.9

This is the primary TSDS logo. Texas student data system should be lowercase and displayed to the right. Typeface used is Avenir. To access all of the logo versions, please visit the IT .SharePoint site https://texasedu.sharepoint.com/sites/itea/strategic/sc/Shared%20Documents/Forms/tags.aspx?id=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book%2FTEA%5FBrand%5FGuidelines%5F09%2D20%2D23%2Epdf&parent=%2Fsites%2Fitea%2Fstrategic%2Fsc%2FShared%20Documents%2FBranding%20Guides%2FBrand%20Book https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx

Primary PEIMS Logo - Section 3.0

This is the primary PEIMS logo. TSDS should be lowercase and PEIMS should be uppercase.

Typeface used is Avenir. To access all of the logo versions, please visit the IT .SharePoint site

Primary Core Collection Logo - Section 3.1

This is the primary Core Collection logo. TSDS should be lowercase and Core should be uppercase. Typeface used is Avenir. To access all of the logo versions, please visit the IT .SharePoint site https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx

Primary eGrants Logo - Section 3.2

This is the primary eGrants logo. The typeface used is Open Sans. To access the eGrants logo, please visit the IT .SharePoint site https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx#InplviewHashe2ef762f-db26-473a-bdd7-3269237612ab=

Loader

Loader - Section 3.3

Loaders should be used anytime an application is taking longer than 3 seconds to load the content. If your content loads faster than 3 seconds, then there is no need to show a loader.

You may style the background and loader colors to better suite your application’s look and feel if necessary.

In the below sections you will find the HTML and

CSS for the loader styling.

Loader - HTML - Section 3.4 section div span span span span span span span span span span span span span span span span span span span span span span span span span span span span span span div section class style style style style style style style style style style style style style style style

"dots" ”--i:1;”

”--i:2;”

”--i:3;”

”--i:4;

”--i:5;”

”--i:6;”

”--i:7;”

”--i:8;”

”--i:9;”

”--i:10;”

”--i:11;”

”--i:12;”

”--i:13;”

”--i:14;”

”--i:15;”

Loader - CSS - Section 3.5 section section

: flex;

: center;

: center;

.dots span {

: absolute;

: ( ( (--i) * ( / ))) ( );

: animate linear infinite;

: ( (--i) * );

animate { display align-items justify-content height width background position height width background border-radius transform animation animation-delay opacity opacity opacity

100vh 100%

#ffffff

10px 10px

#007bbd 50%

360deg 15 35px 1.5s

0.1s

0%

100% rotate calc var translateY calc var

@keyframes

Form Fields & Inputs

Inputs - Section 3.6

Label

Inputs with assistive text - Section 3.7

Label This is an assistive text for the user

Input fields should have a height of 40px. The standard width is 336px, but can be resized depending on UI needs. The corner radius should be 4px. If the input requires a label, the label should be placed at the top left of the field and does not require a colon. See details below for label styling.

Opens Sans

Weight

Normal

Size

Color

16px

#333333

Input labels can be accompanied by assistive text to assist users. The assistive text should be placed below the label. See details below for help text styling.

Open Sans

Weight

Normal

Size

12px

Color

#5A6267

Inputs with icons - Section 3.8

Inputs with placeholder content - Section 3.9

Label

Placeholder text

Icons can be added to input fields if needed. The icon size should be 24 x 24px. The icon should have padding of 8px 12px 8px 12px.

Placeholder content can be used prior to the user interacting with the input. Placeholders also help guide the user towards what type of information they can enter into a field.

Font

Open Sans

Style

Italic

Size

12px

Color

#5A6267

Top/Bottom

8px

Left/Right

12px

Inputs with focus state - Section 4.0

Inputs with error state - Section 4.1

Label

Validation error message text

While the input is in a focused state, the borders of the input field should be highlighted in Cobalt Blue

(#007BBD). The border-style should be solid and

1px.

When the input field is in an error state, the border should be highlighted in our Error 300 (#BB251A).

The border-style should be solid and 1px.

It’s recommended to place the error message below the input field in question. This helps the user associate the error with a specific input field that needs to be corrected. Messaging should be concise and describe how the error can be resolved.

Dropdowns - Section 4.2

Dropdowns with assistive text - Section 4.3

Label This is an assistive text for the user

Dropdown selectors should have a height of 40px.

The standard width is 336px, but can be resized depending on UI needs. The corner radius should be 4px. If the dropdown requires a label, the label should be placed at the top left of the field and does not require a colon. See details below for label styling.

Weight

Normal

Size

Color

16px

#333333

Dropdown labels can be accompanied by assistive text to assist users. The assistive text should be placed below the label. See details below for help text styling.

Weight

Normal

Size

12px

Color

#5A6267

Dropdowns with icons - Section 4.4

Dropdowns with placeholder content - Section 4.5

Label

Dropdown text

Icons can be added to dropdown selectors if needed. The icon size should be 24 x 24px. The icon should have padding of 8px 12px 8px 12px.

Placeholder content can be used prior to the user interacting with the dropdown selector.

Font

Open Sans

Style

Italic

Size

12px

Color

#5A6267

Top/Bottom

8px

Left/Right

12px

Dropdowns with focus state - Section 4.6

Dropdowns with error state - Section 4.7

Label

Validation error message text

While the dropdown is in a focused state, the borders should be highlighted in Cobalt Blue

(#007BBD). The border-style should be solid and

1px.

When the dropdown is in an error state, the border should be highlighted in our Error 300 (#BB251A).

The border-style should be solid and 1px.

It’s recommended to place the error message below the dropdown in question. This helps the user associate the error with a specific dropdown that needs to be corrected. Messaging should be concise and describe how the error can be resolved.

Buttons

Buttons - Primary - Section 4.8

Button

Button

Button

Buttons - Secondary - Section 4.9

Button

Button

Button

Button width can vary depending on the content.

Large buttons have a height of 40px and small buttons have a height of 36px. Buttons can include icons if needed. The corner radius of buttons should be 4px.

Primary buttons have more visual weight to help guide users into taking actions we want them to take. It’s recommended to pair primary and secondary buttons together to give visual distinctions between different actions.

Secondary buttons have less visual weight because we can assume that most users will want to interact with the primary button action.

For example, “Save” might be the primary button, while “Cancel” might be the secondary button.

40 36

Buttons - Primary Hover State - Section 5.0

Button

Buttons - Secondary Hover State - Section 5.1

Button

While hovering over a primary button, the background color should change from Cobalt Blue

(#007BBD) to Gentian Blue (#25466C).

While hovering over a secondary button, the background color should change from White

(#FFFFFF) to Light Gray (#F2F4F7). The font and icon

(if used), should change to Gentian Blue (#25466C).

Font

Open Sans

Weight

Normal

Size

Background Color

16px

#25466C

Font

Open Sans

Weight

Normal

Size

Background Color

16px

#F2F4F7 37

Graphic Elements

Icons - Section 5.2

Icon sets used are simple line illustrations with solid color fills. These icons are easy to identify, playful, and have clean lines. The icon sets are vector images and can be scaled to any size without quality loss.

Icons can be used on their own or encapsulated in a color filled shape. The complete icon set can be found on the . Additional icons can be found on the . Microsoft PowerPoint icons are also okay to use.

IT SharePoint

TEA SharePoint

Examples of Usage - Section 5.3

Promote Loaded Data

Prepare / Finalize Data

View Reports

When using icons to create buttons, the copy must be displayed above or to the right of the icon.

Button backgrounds should use the Cobalt Blue, HEX value #007BBD, with a white icon and copy.

https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx?RootFolder=%2Fsites%2Fits%2Fbm%2FCommunications%2FLogos%2C%20Templates%2C%20and%20Branding%2FShared%20Documents%2FOriginal%20Steel%20Vector%20Icons&FolderCTID=0x012000899F80C9BBC9BB4CAC90B829EB15D132&View=%7BE2EF762F%2DDB26%2D473A%2DBDD7%2D3269237612AB%7D https://texasedu.sharepoint.com/sites/ext/pic/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2Fext%2Fpic%2FShared%20Documents%2FIcons

Photography

Photography - Section 5.4

When using photography, images should be warm and have rich colors. Try to avoid light and pastel colors when possible. The photography should capture people who are happy and smiling. The images should be full color, with no alterations, and overlaid typography should be contained in a band of color.

TEA prefers to use photos of real students, teachers, and staff in real Texas schools instead of stock photography whenever possible. The contains more than 2,000 images.

Photographs from the TEA Photo Library should not be altered, if possible. The agency also has access to for additional image options.

TEA

Photo Library

Adobe Stock https://texasedu.sharepoint.com/sites/ext/pic/TEA%20Photo%20Library/Forms/Thumbnails.aspx https://texasedu.sharepoint.com/sites/ext/pic/TEA%20Photo%20Library/Forms/Thumbnails.aspx https://stock.adobe.com/?as_campaign=&as_campclass=brand&as_camptype=app&as_channel=adobe_apps&as_content=Search:SearchResult&as_source=Creative%20Cloud%20Desktop&location=Search:SearchResult&product=Creative%20Cloud%20Desktop&mv=product&mv2=accc#token_type=bearer&expires_in=86399998

Grid System and Alignment

Grid System - Section 5.5

UX Designers use a column grid system which divides a page into vertical columns. UI elements and content are aligned to these columns. Blocks of interface are comprised of several columns and gutters. Column grids are useful because it makes it possible to create zones for different kinds of content. Shown right, is an example of how the grid might be applied.

Developers may not use a grid system, but should generally try to replicate the layout and spacing of the mockups they are given.

Columns

Gutters

16px

Column Width

100px

Margin

88px

Base Unit - Section 5.6

We are using a base unit of 8px. This makes for scaling to a wide variety of devices more consistent.

Most screen sizes are divisible by 8.

The width and height of UI elements should be measured in increments of our 8px base unit. For example, 8px, 16px, 24px, 32px and so on whenever possible. This helps to build a clear hierarchy, provides consistency, and aligns UI elements in an efficient fashion.

Sizing

Fluid Grid - Section 5.7

For smaller screens, the grid can be fluid to allow content to take up the full real estate of the screen, with the exception of the outer margins. The fluid grid can be applied to screen sizes 656px to

1440px. For more details, please see the breakpoint section.

Fixed Grid - Section 5.8

For larger screens, the grid has a set max-width.

This should be used for screens larger than

1440px. The grid itself is capped at a width of

1264px and centered. For more details, please see the breakpoint section.

Breakpoints - Section 5.9

Note the breakpoint table below. While this table is using standard screen sizes, teams can adjust these accordingly based on your product’s needs.

Alignment - Section 6.0

Items on the page need to align to make good use of the live area and to provide consistent placement throughout the website portal.

Content and header elements should all line upon the same left edge of the page. This will give a nice line on the left of the page.

Header elements should all line up on the same line on the right edge of the live area. Page content will be indented by 10px off the right edge live area.

Left Edge

Right Edge

Left Edge

Right Edge

Sample Page Templates

Sample Template: Homepage - Section 6.1

The Homepage Template features a single, unified layout. The main content area displays page elements in a vertical arrangement, allowing for easy scrolling and content discovery.

Sample Template: Monitor Data Promotions - Section 6.2

The Monitor Data Promotions Template presents a streamlined layout. It features a single, full-width data table that maximizes screen space for easy viewing and analysis.

Note the PEIMS logo usage. The logo size should be

160px by 45px.

Sample Template: Data Promotions - Section 6.3

The Data Promotions Template features a two-column layout. An interactive form allows users to easily transfer data between the columns, streamlining information management.

Sample Template: View Reports - Section 6.4

The View Reports Template features a unified layout with an organized report selection system.

Users can easily browse and choose reports from categorized dropdown menus, providing quick access to all available reports.

Sample Template: Data Entry - Section 6.5

The Data Entry Template features a single, unified layout. The main content area displays page elements in a vertical arrangement, allowing for easy scrolling and content discovery.

Sample Patterns

Data Tables - Section 6.6

All data tables should include a table header and table body when displaying data. The labels in the table header can sort table data information (if needed). We have two table color schemes to choose from. Please choose one as your primary and use the other as a secondary table if needed.

Font Size

14px

Font Color

#242424

Row Backgrounds

#E6F6F8/ #FFFFFF

Font

Open Sans

Font Size

14px

Font Color #242424

Row Backgrounds

#F1F3F9 / #FFFFFF

Teal Option

Persian Blue Option

Data Tables - Empty States - Section 6.7

If there is no table data to display, then an empty state should be displayed indicating there are no results.

Note that some data tables, such as those in Power

BI, do not support the use of graphics in data tables. For these instances, we recommend providing users with messaging that helps to inform them that there is no data available.

Cards - Section 6.8

Cards provide a container for content and actions about a single item. They should be scannable for important information and any actions users can take�

�� Container - Used to house the card content.

Padding should be 20px�

�� Title - Should convey the main purpose of the card content�

�� Badge - This is optional and can help inform users that there has been a change to the relevant content of the card item�

�� Content - This can vary in size and the card size can adjust with it as needed�

�� Dividers - Dividers help break up the content and should not extend the full width of the card�

�� Actions - This is optional. If actions are needed, then users can interact with them here.

2 3

Modals - Section 6.9

Modals are used to contain important information, capture decision points, or can involve taking actions on tasks.

The modal is displayed in the front of the applications content and often require a user to take action. They remain on the screen until the user takes action or dismisses the modal.

Modals are designed to be disruptive in order to draw the user’s attention and make sure that any actions or decisions are addressed.

Modals can vary in size from small, medium and large to accommodate the content. They should appear front of a black (#000000) background with a 25% opacity.

Anatomy

Side Sheets - Section 7.0

Side sheets are useful for displaying content when you need to complement the rest of the screen’s primary content.

A common use is displaying actions that impact the primary content on the screen, such as filters.

Shown right is an example of how a side sheet might be applied in the Data Management Center

(DMC) to provide filtering options for users performing data searches.

Note that the side sheet is anchored on the right hand side of the screen and slides in from the right to the left when activated. It should extend to the full height of the viewport and should appear in front of a black (#000000) background with a 25% opacity.

Toast Notifications - Section 7.1

Toast notifications provide short messaging about application processes towards the bottom of the screen.

These notifications don’t interrupt the user and don’t require users to take action on the notification itself. However, we do give users the option to dismiss the notification if they choose to.

Toast notifications only are displayed for a short amount of time, about 5-6 seconds. This allows the user enough time to read the messaging.

Messaging within the notification should be kept brief.

Place toast notifications at either the bottom portion of the viewport (recommended) or the top portion of the viewport.

Example of Success Toast Notification

Banner Messages - Confirmation - Section 7.2

Banner messages shall be displayed below H1 page headers and above any H2 page headers and any page content.

Note the white space between any proceeding and subsequent content: 32px above and 32px below.

The confirmation banner background color is the success 300, HEX #039855. To get the success icon asset, please visit the . IT SharePoint https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx?RootFolder=%2Fsites%2Fits%2Fbm%2FCommunications%2FLogos%2C%20Templates%2C%20and%20Branding%2FShared%20Documents%2FBanner%20Message%20Icons&FolderCTID=0x012000899F80C9BBC9BB4CAC90B829EB15D132&View=%7BE2EF762F%2DDB26%2D473A%2DBDD7%2D3269237612AB%7D

Banner Messages - Error - Section 7.3

Banner Messages shall be displayed below H1 page

The error banner background color is the error

300, HEX #BB251A. To get the error icon asset, please visit the .IT SharePoint https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx?RootFolder=%2Fsites%2Fits%2Fbm%2FCommunications%2FLogos%2C%20Templates%2C%20and%20Branding%2FShared%20Documents%2FBanner%20Message%20Icons&FolderCTID=0x012000899F80C9BBC9BB4CAC90B829EB15D132&View=%7BE2EF762F%2DDB26%2D473A%2DBDD7%2D3269237612AB%7D

Banner Messages - Warning - Section 7.4

The warning banner background color is the warning 300, HEX #DC6803. To get the warning icon asset, please visit the .IT SharePoint https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx?RootFolder=%2Fsites%2Fits%2Fbm%2FCommunications%2FLogos%2C%20Templates%2C%20and%20Branding%2FShared%20Documents%2FBanner%20Message%20Icons&FolderCTID=0x012000899F80C9BBC9BB4CAC90B829EB15D132&View=%7BE2EF762F%2DDB26%2D473A%2DBDD7%2D3269237612AB%7D

Banner Messages - Information - Section 7.5

The information banner background color is the info 300, HEX #1465B4. To get the information icon asset, please visit the .IT SharePoint https://texasedu.sharepoint.com/sites/its/bm/Communications/Logos,%20Templates,%20and%20Branding/default.aspx?RootFolder=%2Fsites%2Fits%2Fbm%2FCommunications%2FLogos%2C%20Templates%2C%20and%20Branding%2FShared%20Documents%2FBanner%20Message%20Icons&FolderCTID=0x012000899F80C9BBC9BB4CAC90B829EB15D132&View=%7BE2EF762F%2DDB26%2D473A%2DBDD7%2D3269237612AB%7D

Navigation - Horizontal - Section 7.6

Our primary form of navigation is a horizontal menu that uses Ice Blue, Slate Blue, Tangerine and

White colors from our color styles. The horizontal navigation is best suited for when you need a more simplified navigation, without many items.

For instances where you have many navigation items, see the vertical navigation option.

Ice Blue

#E0F0F2

Tangerine

#E57100

Slate Blue

#006BA4

White

#FFFFFF

Navigation - Vertical - Section 7.7

Our secondary form of navigation type is a vertical menu. When collapsed, the panel will show icons representing the menu items. When expanded, the icons are accompanied by a text label.

This format is recommended for when you have a large number of menu items, 7 or more items for example. It is used on desktop and tablet screens and can complement other navigation components if needed.

When a user clicks on the empty space within the menu bar, the menu will expand.

Recommended Usage

Navigation - Vertical - Section 7.8

Shown right is an example of the vertical navigation expanded. Note the icons are accompanied by text labels when expanded.

The panel should be anchored to the left and expand out from left to right when the user interacts with it. Clicking on the arrow icon in the expanded view will collapse the menu.

Breadcrumbs - Section 7.9

Breadcrumbs are a secondary form of navigation.

They help inform the user about the level of hierarchy in an application and provide a way for them to navigate.

In our breadcrumb style, previous items in the hierarchy are displayed as links and the delimiter is a chevron pointing to the right.

For instances where there is a deep hierarchy, we include an ellipsis for overflow content. This helps save space and truncates the breadcrumbs. The overflow menu is a dropdown showing the other available breadcrumbs. The breadcrumbs should never wrap to a second line.

Breadcrumbs should be placed in the top left section of the page. They are placed under the main navigation with 24px spacing and above the page title with 32px spacing. Shown right is an example of the breadcrumb usage.

Placement

Home > Item One > Current

Home > Item One > > Item Five > Current

Item Two

Item Three

Item Four