This page is part of the California Department of Education (CDE) Web Design Standards, which only apply to specific CDE Web sites. Visit the CDE Web Standards to determine if these standards apply to a specific Web product (Web site, Web page, Web document, or Web application) that has been developed by or for the CDE.
Most Web pages (not including Web applications) on all CDE Web sites are created using Adobe's Contribute software templates. WebNETS, which is a custom software application that was created by CDE staff, is also necessary in order to create and process most Web pages on the CDE's public Internet site. Portions of these standards, where noted, apply only to CDE users of Contribute or WebNETS software; or to Web application developers.
In order to maintain the common look and feel of the CDE Internet and Intranet Web sites, the use of color has been standardized. Generally, the use of color is governed by Cascading Style Sheets (CSS) only. Contribute templates are also based on CSS. Manually applying colors that deviate from those indicated in the appropriate CSS is not allowed.
These items are controlled by the CSS styles:
- Topic Color(s) (Internet Only)
- Selected Headings
- Table header rows (text and background)
- Alternating table rows (background)
- Text size and color
Alerts
The default text color (usually black) may be changed to red to highlight an "alert". An alert is an important single word, short sentence, or fragment that communicates important information to the user. Red text highlighting alerts should be used sparingly. Whole paragraphs may not have the color red applied. The following examples demonstrate the appropriate use of red text:
- Link text to Web page New!
- Do not complete this document.
- Applications must be submitted by May 1, 2005.
The red that is used for alerts must be the standard color red (#FF0000). Below is an image of the text color selector in Contribute:
Shading Alternating Table Rows
Shading may be added to alternating table rows to help distinguish information on lengthy tables. Only the light site color for the Intranet, or the light site color for appropriate Internet topic area (see below) can be used to highlight alternating table rows. The text on the light site color must be black. Refer to the Tables section of the Web Design Standards for more information.
Intranet Web Site Colors
Dark Color Hex: #364965 |
| Mid Color Hex: #4F6A92 |
| Light Color Hex: #E5E9EF |
Gold Color Hex: #FFCC66 |
Internet Web Site Colors
The CDE Web site is divided into eight topic areas, each with pre-defined authorized colors:
Curriculum & Instruction
Dark Color Hex: #000099 |
Light Color Hex:: #A4C4E2 |
Testing & Accountability
Dark Color Hex: #663300 |
Light Color Hex: #CCCCCC |
Professional Development
Dark Color Hex: ##000000 |
Light Color Hex: #99CCCC |
Finance & Grants
Dark Color Hex: #336600 |
Light Color Hex: #99CC99 |
Data & Statistics
Dark Color Hex: #990000 |
Light Color Hex: #B79470 |
Learning Support
Dark Color Hex: #666699 |
Light Color Hex: #CCCCFF |
Specialized Programs
Dark Color Hex: #666600 |
Light Color Hex: #B9B996 |
Resources
Dark Color Hex: #000066 |
Light Color Hex: #DDEEFF |
Generic Header
Anytime a generic header is used (e.g. Web applications, online publications, etc.), the colors associated with the “Resources” topic are to be used.
Example of a generic header (note, no topics are available):
Web Applications
Use the styles that are specified in the Department-wide CSS files. Whenever the Department-wide CSS files cannot be used, ensure that colors used in Web applications strictly match the colors and their usage in the appropriate area of the CDE Intranet or Internet Web sites.
Other shading with color may be allowed under certain circumstances. Contact the Web Services Office for more information.
Additional Information
| Link | Description |
|---|---|
| Text Styles | The Text Styles section of the Design Standards Guide is comprehensive with regard to the type, size, color, and placement of text in Web pages and applications. |
| Headings | The Headings section of the Design Standards Guide gives background on the important use of headings, which provide both structural and visual organization in Web pages and Web applications. |
