Style Guide

Alpine Design Review

This page contains instructions on how to handle page content according to designed standards.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Heading 3

Heading 4

Heading 5

Heading 6

Note: By using the appropriate descending headline settings, the author indicates not only content sections, but the relative importance of sections to users, search engines and accessibility tools for the disabled.

Example Normal Text:

Although the basic rules of typography are much the same for both Web pages and conventional print documents, type on-screen and type printed on paper are different in crucial ways. The computer screen renders typefaces at a much lower resolution than is found in books, magazines, and even pages output from inexpensive printers. Most magazine and book typography is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show more than about 85 dpi. Also, the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling.

But perhaps the most distinctive characteristic of Web typography is its variability. Web pages are built on the fly each time they are loaded into a Web browser. Each line of text, each headline, each unique font and type style is re-created by a complex interaction of the Web browser, the Web server, and the operating system of the reader's computer. The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions of how your pages should be rendered you'll never know exactly how they will look on the reader's screen.

Example Unspecified Text:

This is text that has not been wrapped by any tags. Most browsers will treat this text as it has been explicitly wrapped by a p tag, however, this may not always be the case and is included here as an example to display how unwrapped text might display within this design. Quite often the effect may be subtle. For example, line height below the paragraph might be different than a standard paragraph.

Another Paragraph with normal paragraph tags. The previous paragraph is surrounded by standard paragraphs, but is not wrapped by anything itself.

Example Text Contained by a Table:

Notes: Text may often be contained inside a table to accomplish certain layout effects. This section previews the look of text rendered inside table cells. Cell padding, spacing and border are all set to zero. Row has valign set to top.

Most magazine and book typography is rendered at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show more than about 85 dpi. Also, the useable area of typical computer screens is smaller than most magazine and book pages, limiting the information you can deliver on a Web page without scrolling. The process is fraught with possibilities for the unexpected: a missing font, an out-of-date browser, or a peculiar set of font preferences designated by the reader. You should regard your Web page layouts and typography as suggestions of how your pages should be rendered you'll never know exactly how they will look on the reader's screen.

Text and Image Wrapping Tests:

Notes: Image alignment and text wrapping are simple concepts, but mastery is elusive to users of typical word processors and spreadsheets. Typical newbies are used to seeing documents rendered in only one or two contexts (their screen and their printer).

Because web pages can be displayed on anything from a high-res monitor, a printer, or even a mobile phone or PDA, the display strategy can be a bit more complicated. New web authors usually remember what is was like to see a letter printed on an old dot-matrix printer vs. a laser. The concept is similar. The letter came out of the old printer as a partial page with fuzzy text.

The problem with such display requirements on the web is that the author can never predict how capable the visitor's screen will be. The screen might be 1200 pixels on a standard monitor, but 120 pixels wide on a mobile phone.

To allow a related image to remain close to the text with which is is associated, a very simple idea is used to help the browser decide where to put your image. When inserted, an image is anchored at the start (to the left) of the text next to which it should float.

Like text, images are normally lined up with the left margin unless a design specification explicitly indicates that they should be centered or right-justified.

When a paragraph is set to wrap to the left of an image, the browser actually floats the image as far to the right as allowed by the containing design. Of course, A similar process is followed when wrapping to the right.

This section is broken up into three sections: large, medium, and small. Each section will give you an indication of how each size of photo will be treated by the design as specified.

Text Wrap Right / Large Image Float Left:

This paragraph is placed above an image which is to be aligned to the left. Text will wrap around the image to the right of the image.

The image will appear along the left hand side of this paragraph. The image itself is anchored to the left of the starting words "The image...". As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, a nice photo of a sunset would be perfect rather than this image. Note how the top, left, right, and bottom edges of this image align with the wrapping text.

This is the third paragraph that generally appears below the paragraph with the image. However, if the fonts are small enough, or the page design is wide enough, this paragraph may also be wrapping around this photo anchored to the top of the previous paragraph.

Text Wrap Left / Large Image Float Right:

This paragraph is placed above an image which is to be aligned to the right. Text will wrap around the image to the right of the image.

The image will appear along the right hand side of this paragraph. The image itself is anchored to the left of the starting words "The image...". As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, a nice photo of a sunset would be perfect rather than this image. Note how the top, left, right, and bottom edges of this image align with the wrapping text.

This is the third paragraph that appears below the paragraph with the image. However, if the fonts are small enough, the photo is large enough, or the page design is wide enough, this paragraph may also be wrapping around this photo anchored to the top of the previous paragraph.

Large Image No Wrap:

This paragraph is placed above an image which is not to be aligned to the right or left. Text will not wrap around this image. The image will be left aligned, centered, or right aligned ONLY if all text for this page is instructed to do so.

The image will appear above this paragraph. The image itself is not anchored within this paragraph, but is between paragraphs. As you can see this is very nice for focusing the reader on the image itself.

Unordered List / Large Image Float Left:

This paragraph is above an image that will be aligned to the left, with text in an unordered list wrapping to the right around the image. This will test the behavior of bullet points with images.

The image will appear to the left of this list.
There should be a small amount of space between the
bullets and the image. This test is to ensure no
there is no bleed of the bullets onto the images.

Text Wrap Left / Medium Image Float Right:

This paragraph is placed above an image which is to be aligned to the left. Text will wrap around the image to the right of the image.

Text Wrap Right / Medium Image Float Left:

This paragraph is placed above an image which is to be aligned to the right. Text will wrap around the image to the right of the image.

Medium Image No Wrap:

Text Wrap Left / Small Image Float Right:

This paragraph is placed above an image which is to be aligned to the left. Text will wrap around the image to the right of the image.

The image will appear along the left hand side of this paragraph. The image itself is anchored to the left of the starting words "The image...". As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. Note how the top, left, right, and bottom edges of this image align with the wrapping text.

Text Wrap Right / Small Image Float Left:

This paragraph is placed above an image which is to be aligned to the right. Text will wrap around the image to the right of the image.

The image will appear along the right hand side of this paragraph. The image itself is anchored to the left of the starting words "The image...". As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. Note how the top, left, right, and bottom edges of this image align with the wrapping text.

Small Image No Wrap:

Example Address Text:

address line one

address line two

Note: Address is intended for information such as addresses, telephone numbers, etc., appearing within a document.

Example Preformatted Text:

Text will be rendered using a monopitch typeface. The style implies a manual paragraph break, i.e. end the current line and generate a blank line. Within the tag all spaces are rendered literally and line breaks are rendered literally, however other HTML markup is still recognized.

A Preformatted     line of text    goes here   .  A
second preformatted line of text          goes here.

Note: Preformatted text is often used to align tables of text.

Example Indented Paragraph

The distinction is usually achieved by indentation at both ends of a text line, i.e. a temporary increase in margin width for the duration of the element. It causes a paragraph break.

Example of Hyperlinks:

This paragraph has a hyperlink in it.

Note: TODO Fix this

This paragraph has a visited hyperlink in it.

Example of Linebreaks:

This is paragraph text
(this is a line break)
(this is another line break)

Example Numeric List:

Item one
Item two

sub Item one

Item three

sub Item one
sub Item two

Item four

sub Item one

sub sub Item one

sub Item two
sub Item three

Item five

sub Item one

sub sub Item one
sub sub Item two

sub Item two
sub Item three
sub Item four

Item six

sub Item one

sub sub Item one
sub sub Item two
sub sub Item three

sub Item two
sub Item three
Deep List Display (1)

sub sub Item (2)

sub sub sub Item (3)

sub sub sub sub Item (4)

sub sub sub sub sub Item (5)

sub sub sub sub sub sub Item (6)

sub Item five

Note:A numbered list is a list of items. The list items are marked with numbers. Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. The list items in each list will be indented in a way appropriate for this design.

Example Bulleted List:

Bullet one
Bullet two

sub Bullet one

Bullet three

sub Bullet one
sub Bullet two

Bullet four

sub Bullet one

sub sub Bullet one

sub Bullet two
sub Bullet three

Bullet five

sub Bullet one

sub sub Bullet one
sub sub Bullet two

sub Bullet two
sub Bullet three
sub Bullet four

Bullet six

sub Bullet one

sub sub Bullet one
sub sub Bullet two
sub sub Bullet three

sub Bullet two
sub Bullet three
Deep Bullet Display (1)

sub sub Bullet (2)

sub sub sub Bullet (3)

sub sub sub sub Bullet (4)

sub sub sub sub sub Bullet (5)

sub sub sub sub sub sub Bullet (6)

sub Bullet five

Note:Bulleted (or Unordered) lists are rendered in an identical manner as Numbered Lists except that Visitor Browsers will number ordered list items. Browsers may present those numbers in a variety of ways. Again, unordered list items should be indented in a way that is consistent with the page design.

Text Elements

The a element example

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The em element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The u element example

The var element example

Example Font Families:

This text shows how the "Arial" font is displayed.
This text shows how the "Times New Roman" font is displayed.
This text shows how the "Courier" font is displayed.
This text shows how the "Georgia" font is displayed.
This text shows how the "Verdana" font is displayed.
This text shows how the "Geneva" font is displayed.

Note: The Site designer or Alpine staff may has overridden these font definitions to fully comply with your design goals.

Example Font Sizes:

This text shows how font size=1 is displayed.
This text shows how font size=2 is displayed.
This text shows how font size=3 is displayed.
This text shows how font size=4 is displayed.
This text shows how font size=5 is displayed.
This text shows how font size=6 is displayed.
This text shows how font size=7 is displayed.

Notes: The Site designer or Alpine staff may has overridden these font definitions to fully comply with your design goals.

Be sure to use section headers (above) instead of selecting a font size. This will help search engines categorize your content.

Also, the Macintosh and Windows operating systems display type differently, even when the same typefaces are being used. In general, type displayed on Windows Web browsers will look 2 to 3 points larger than the equivalent face on the Macintosh. Thus a line of 12-point Times type on a Macintosh looks more like 14 points in Times New Roman on a Windows machine. This difference in font rendering can have a big impact on your page layouts. The following table shows the major Microsoft TrueType typefaces in their 12-point sizes, as displayed in both Windows and on a Macintosh.

List Types

Ordered List

List Item 1
List Item 2
List Item 3

Unordered List

List Item 1
List Item 2
List Item 3

Definition List

Definition List Term 1: This is a definition list description.
Definition List Term 2: This is a definition list description.
Definition List Term 3: This is a definition list description.

Tables

Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Fieldsets, Legends, and Form Elements

This last section contains elements that don't render well in markdown. Please consult the final section in styleguide.html, to see the rest of the styleguide.

Legend

Form Element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.

Text Field:

Text Area:

Select Element:

Radio Buttons:
Radio 1
Radio 2
Radio 3

Checkboxes:
Radio 1
Radio 2
Radio 3

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Example Text Colors:

Text color: black, background-color: white
Text color: white, background-color: black
Text color: red, background-color: white
Text color: blue, background-color: white
Text color: green, background-color: yellow
Text color: white, background-color: red

Note:Be sure to have a strong contrast between text and background. This implies light-on-dark or dark-on-light: color contrasts are insufficient to cater for monochrome displays or color-blind readers. Also note that this implies that authors setting a text color should also set the corresponding background, and vice versa.

Example Paragraph Alignment

This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left. This paragraph should be justified left.

This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center. This paragraph should be justified center.

This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right. This paragraph should be justified right.

The SAS Version 7.0 List of 138 Color Names

Colors can be specified in HTML pages in two ways by using a color name, or by using numbers to denote an RGB color value. An RGB color value consists of three two-digit hexadecimal numbers specifying the intensity of the corresponding color.

For example, the color value #FF0000 is rendered red because the red number is set to its highest value, FF (or 255 in decimal form).

Sorted by Color Code	Sorted by Color Name	Specified by Name
`000000` Black	`F0F8FF` AliceBlue	`F0F8FF` AliceBlue
`000080` Navy	`FAEBD7` AntiqueWhite	`FAEBD7` AntiqueWhite
`00008B` DarkBlue	`00FFFF` Aqua (Cyan)	`00FFFF` Aqua (Cyan)
`0000CD` MediumBlue	`7FFDD4` Aquamarine	`7FFDD4` Aquamarine
`0000FF` Blue	`F0FFFF` Azure	`F0FFFF` Azure
`006400` DarkGreen	`F5F5DC` Beige	`F5F5DC` Beige
`008000` Green	`FFE4C4` Bisque	`FFE4C4` Bisque
`008080` Teal	`000000` Black	`000000` Black
`008B8B` DarkCyan	`FFEBCD` BlanchedAlmond	`FFEBCD` BlanchedAlmond
`00BFFF` DeepSkyBlue	`0000FF` Blue	`0000FF` Blue
`00CED1` DarkTurquoise	`8A2BE2` BlueViolet	`8A2BE2` BlueViolet
`00FA9A` MediumSpringGreen	`A52A2A` Brown	`A52A2A` Brown
`00FF00` Lime	`DEB887` Burlywood	`DEB887` Burlywood
`00FF7F` SpringGreen	`5F9EA0` CadetBlue	`5F9EA0` CadetBlue
`00FFFF` Aqua (Cyan)	`7FFF00` Chartreuse	`7FFF00` Chartreuse
`191970` MidnightBlue	`D2691E` Chocolate	`D2691E` Chocolate
`1E90FF` DodgerBlue	`FF7F50` Coral	`FF7F50` Coral
`20B2AA` LightSeaGreen	`6495ED` CornFlowerBlue	`6495ED` CornFlowerBlue
`228B22` ForestGreen	`FFF8DC` Cornsilk	`FFF8DC` Cornsilk
`2E8B57` SeaGreen	`DC143C` Crimson	`DC143C` Crimson
`2F4F4F` DarkSlateGray	`00008B` DarkBlue	`00008B` DarkBlue
`32CD32` LimeGreen	`008B8B` DarkCyan	`008B8B` DarkCyan
`3CB371` MediumSeaGreen	`B8860B` DarkGoldenrod	`B8860B` DarkGoldenrod
`40E0D0` Turquoise	`A9A9A9` DarkGray	`A9A9A9` DarkGray
`4169E1` RoyalBlue	`006400` DarkGreen	`006400` DarkGreen
`4682B4` SteelBlue	`BDB76B` DarkKhaki	`BDB76B` DarkKhaki
`483D8B` DarkSlateBlue	`8B008B` DarkMagenta	`8B008B` DarkMagenta
`48D1CC` MediumTurquoise	`556B2F` DarkOliveGreen	`556B2F` DarkOliveGreen
`4B0082` Indigo	`FF8C00` DarkOrange	`FF8C00` DarkOrange
`556B2F` DarkOliveGreen	`9932CC` DarkOrchid	`9932CC` DarkOrchid
`5F9EA0` CadetBlue	`8B0000` DarkRed	`8B0000` DarkRed
`6495ED` CornFlowerBlue	`E9967A` DarkSalmon	`E9967A` DarkSalmon
`66CDAA` MediumAquamarine	`8FBC8F` DarkSeaGreen	`8FBC8F` DarkSeaGreen
`696969` DimGray	`483D8B` DarkSlateBlue	`483D8B` DarkSlateBlue
`6A5ACD` SlateBlue	`2F4F4F` DarkSlateGray	`2F4F4F` DarkSlateGray
`6B8E23` OliveDrab	`00CED1` DarkTurquoise	`00CED1` DarkTurquoise
`708090` SlateGray	`9400D3` DarkViolet	`9400D3` DarkViolet
`778899` LightSlateGray	`FF1493` DeepPink	`FF1493` DeepPink
`7B68EE` MediumSlateBlue	`00BFFF` DeepSkyBlue	`00BFFF` DeepSkyBlue
`7CFC00` LawnGreen	`696969` DimGray	`696969` DimGray
`7FFDD4` Aquamarine	`1E90FF` DodgerBlue	`1E90FF` DodgerBlue
`7FFF00` Chartreuse	`B22222` FireBrick	`B22222` FireBrick
`800000` Maroon	`FFFAF0` FloralWhite	`FFFAF0` FloralWhite
`800080` Purple	`228B22` ForestGreen	`228B22` ForestGreen
`808000` Olive	`DCDCDC` Gainsboro	`DCDCDC` Gainsboro
`808080` Gray	`F8F8FF` GhostWhite	`F8F8FF` GhostWhite
`87CEEB` SkyBlue	`FFD700` Gold	`FFD700` Gold
`87CEFA` LightSkyBlue	`DAA520` Goldenrod	`DAA520` Goldenrod
`8A2BE2` BlueViolet	`808080` Gray	`808080` Gray
`8B0000` DarkRed	`008000` Green	`008000` Green
`8B008B` DarkMagenta	`ADFF2F` GreenYellow	`ADFF2F` GreenYellow
`8B4513` SaddleBrown	`F0FFF0` Honeydew	`F0FFF0` Honeydew
`8FBC8F` DarkSeaGreen	`FF69B4` HotPink	`FF69B4` HotPink
`90EE90` LightGreen	`CD5C5C` IndianRed	`CD5C5C` IndianRed
`9370DB` MediumPurple	`4B0082` Indigo	`4B0082` Indigo
`9400D3` DarkViolet	`FFFFF0` Ivory	`FFFFF0` Ivory
`98FB98` PaleGreen	`F0E68C` Khaki	`F0E68C` Khaki
`9932CC` DarkOrchid	`E6E6FA` Lavender	`E6E6FA` Lavender
`9ACD32` YellowGreen	`FFF0F5` LavenderBlush	`FFF0F5` LavenderBlush
`A0522D` Sienna	`7CFC00` LawnGreen	`7CFC00` LawnGreen
`A52A2A` Brown	`FFFACD` LemonChiffon	`FFFACD` LemonChiffon
`A9A9A9` DarkGray	`ADD8E6` LightBlue	`ADD8E6` LightBlue
`ADD8E6` LightBlue	`F08080` LightCoral	`F08080` LightCoral
`ADFF2F` GreenYellow	`E0FFFF` LightCyan	`E0FFFF` LightCyan
`AFEEEE` PaleTurquoise	`FAFAD2` LightGoldenrodYellow	`FAFAD2` LightGoldenrodYellow
`B0C4DE` LightSteelBlue	`90EE90` LightGreen	`90EE90` LightGreen
`B0E0E6` PowderBlue	`D3D3D3` LightGrey	`D3D3D3` LightGrey
`B22222` FireBrick	`FFB6C1` LightPink	`FFB6C1` LightPink
`B8860B` DarkGoldenrod	`FFA07A` LightSalmon	`FFA07A` LightSalmon
`BA55D3` MediumOrchid	`20B2AA` LightSeaGreen	`20B2AA` LightSeaGreen
`BC8F8F` RosyBrown	`87CEFA` LightSkyBlue	`87CEFA` LightSkyBlue
`BDB76B` DarkKhaki	`778899` LightSlateGray	`778899` LightSlateGray
`C0C0C0` Silver	`B0C4DE` LightSteelBlue	`B0C4DE` LightSteelBlue
`C71585` MediumVioletRed	`FFFFE0` LightYellow	`FFFFE0` LightYellow
`CD5C5C` IndianRed	`00FF00` Lime	`00FF00` Lime
`CD853F` Peru	`32CD32` LimeGreen	`32CD32` LimeGreen
`D2691E` Chocolate	`FAF0E6` Linen	`FAF0E6` Linen
`D2B48C` Tan	`FF00FF` Magenta (Fuchsia)	`FF00FF` Magenta (Fuchsia)
`D3D3D3` LightGrey	`800000` Maroon	`800000` Maroon
`D8BFD8` Thistle	`66CDAA` MediumAquamarine	`66CDAA` MediumAquamarine
`DA70D6` Orchid	`0000CD` MediumBlue	`0000CD` MediumBlue
`DAA520` Goldenrod	`BA55D3` MediumOrchid	`BA55D3` MediumOrchid
`DB7093` PaleVioletRed	`9370DB` MediumPurple	`9370DB` MediumPurple
`DC143C` Crimson	`3CB371` MediumSeaGreen	`3CB371` MediumSeaGreen
`DCDCDC` Gainsboro	`7B68EE` MediumSlateBlue	`7B68EE` MediumSlateBlue
`DDA0DD` Plum	`00FA9A` MediumSpringGreen	`00FA9A` MediumSpringGreen
`DEB887` Burlywood	`48D1CC` MediumTurquoise	`48D1CC` MediumTurquoise
`E0FFFF` LightCyan	`C71585` MediumVioletRed	`C71585` MediumVioletRed
`E6E6FA` Lavender	`191970` MidnightBlue	`191970` MidnightBlue
`E9967A` DarkSalmon	`F5FFFA` MintCream	`F5FFFA` MintCream
`EE82EE` Violet	`FFE4E1` MistyRose	`FFE4E1` MistyRose
`EEE8AA` PaleGoldenrod	`FFE4B5` Moccasin	`FFE4B5` Moccasin
`F08080` LightCoral	`FFDEAD` NavajoWhite	`FFDEAD` NavajoWhite
`F0E68C` Khaki	`000080` Navy	`000080` Navy
`F0F8FF` AliceBlue	`FDF5E6` Oldlace	`FDF5E6` Oldlace
`F0FFF0` Honeydew	`808000` Olive	`808000` Olive
`F0FFFF` Azure	`6B8E23` OliveDrab	`6B8E23` OliveDrab
`F4A460` SandyBrown	`FFA500` Orange	`FFA500` Orange
`F5DEB3` Wheat	`FF4500` OrangeRed	`FF4500` OrangeRed
`F5F5DC` Beige	`DA70D6` Orchid	`DA70D6` Orchid
`F5F5F5` WhiteSmoke	`EEE8AA` PaleGoldenrod	`EEE8AA` PaleGoldenrod
`F5FFFA` MintCream	`98FB98` PaleGreen	`98FB98` PaleGreen
`F8F8FF` GhostWhite	`AFEEEE` PaleTurquoise	`AFEEEE` PaleTurquoise
`FA8072` Salmon	`DB7093` PaleVioletRed	`DB7093` PaleVioletRed
`FAEBD7` AntiqueWhite	`FFEFD5` PapayaWhip	`FFEFD5` PapayaWhip
`FAF0E6` Linen	`FFDAB9` Peachpuff	`FFDAB9` Peachpuff
`FAFAD2` LightGoldenrodYellow	`CD853F` Peru	`CD853F` Peru
`FDF5E6` Oldlace	`FFC0CB` Pink	`FFC0CB` Pink
`FF0000` Red	`DDA0DD` Plum	`DDA0DD` Plum
`FF00FF` Magenta (Fuchsia)	`B0E0E6` PowderBlue	`B0E0E6` PowderBlue
`FF1493` DeepPink	`800080` Purple	`800080` Purple
`FF4500` OrangeRed	`FF0000` Red	`FF0000` Red
`FF6347` Tomato	`BC8F8F` RosyBrown	`BC8F8F` RosyBrown
`FF69B4` HotPink	`4169E1` RoyalBlue	`4169E1` RoyalBlue
`FF7F50` Coral	`8B4513` SaddleBrown	`8B4513` SaddleBrown
`FF8C00` DarkOrange	`FA8072` Salmon	`FA8072` Salmon
`FFA07A` LightSalmon	`F4A460` SandyBrown	`F4A460` SandyBrown
`FFA500` Orange	`2E8B57` SeaGreen	`2E8B57` SeaGreen
`FFB6C1` LightPink	`FFF5EE` Seashell	`FFF5EE` Seashell
`FFC0CB` Pink	`A0522D` Sienna	`A0522D` Sienna
`FFD700` Gold	`C0C0C0` Silver	`C0C0C0` Silver
`FFDAB9` Peachpuff	`87CEEB` SkyBlue	`87CEEB` SkyBlue
`FFDEAD` NavajoWhite	`6A5ACD` SlateBlue	`6A5ACD` SlateBlue
`FFE4B5` Moccasin	`708090` SlateGray	`708090` SlateGray
`FFE4C4` Bisque	`FFFAFA` Snow	`FFFAFA` Snow
`FFE4E1` MistyRose	`00FF7F` SpringGreen	`00FF7F` SpringGreen
`FFEBCD` BlanchedAlmond	`4682B4` SteelBlue	`4682B4` SteelBlue
`FFEFD5` PapayaWhip	`D2B48C` Tan	`D2B48C` Tan
`FFF0F5` LavenderBlush	`008080` Teal	`008080` Teal
`FFF5EE` Seashell	`D8BFD8` Thistle	`D8BFD8` Thistle
`FFF8DC` Cornsilk	`FF6347` Tomato	`FF6347` Tomato
`FFFACD` LemonChiffon	`40E0D0` Turquoise	`40E0D0` Turquoise
`FFFAF0` FloralWhite	`EE82EE` Violet	`EE82EE` Violet
`FFFAFA` Snow	`F5DEB3` Wheat	`F5DEB3` Wheat
`FFFF00` Yellow	`FFFFFF` White	`FFFFFF` White
`FFFFE0` LightYellow	`F5F5F5` WhiteSmoke	`F5F5F5` WhiteSmoke
`FFFFF0` Ivory	`FFFF00` Yellow	`FFFF00` Yellow
`FFFFFF` White	`9ACD32` YellowGreen	`9ACD32` YellowGreen

Website Style Guide

Style Guide

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Elements

List Types

Ordered List

Unordered List

Definition List

Tables

Fieldsets, Legends, and Form Elements

Form Element

HTML5-specific Form Elements

End of Style Guide

Style Guide

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Elements

List Types

Ordered List

Unordered List

Definition List

Tables

Fieldsets, Legends, and Form Elements

Form Element

HTML5-specific Form Elements

** End of Style Guide **

End of Style Guide