Style Guide

Brand Standards

All official UAMS communications should create brand continuity by using proper logos, colors and wordmarks.

Applying brand standards allows our target audiences to immediately recognize UAMS in the marketplace.

Websites at UAMS should have four key requirements.

  • Identity: A strong brand that allows visitors to immediately recognize a website belongs to UAMS.
  • Usability: Websites must be easy to use, navigate, and understand.
  • Consistency: Consistency improves the end users experience.
  • Accuracy: Pages must be accurate and up-to-date.

Any website that represents UAMS or its official units, programs, departments, or colleges is expected to follow this web style guide.

Please review these guidelines before creating any new web content.

Primary Colors

UAMS Red
#9d2235

Base & Text
#212121

Accent Shade
#DCDADB

Accent Colors

Accent colors provide additional style to pages looking for a more modern flair. These colors are built into theme elements such as buttons and should be used to highlight important features on a page. They should be used sparingly and never draw the eye to more than one piece of information at a time. Shade color variations are used to represent states such as hover, active and focus. These variations are not used as accent colors and are shown only for comparison. In the examples below, UAMS Red is used to demonstrate its shade color variations.

Darkest
#7b1d2a

Dark
#8d1f30

UAMS Red
#9d2235

Light
#ad253a

Lightest
#bd2940

Darkest
#015165

Darker
#016178

Dark
#01708c

Blue
#01809F

Light
#0190b2

Lighter
#019fc6

Lightest
#01afd9

Darkest
#186d35

Darker
#1b7d3d

Dark
#1f8d45

Green
#229d4d

Light
#25ad55

Lighter
#29bd5d

Lightest
#2ccd65

Darkest
#0d1b2e

Darker
#11243d

Dark
#162d4d

Dark Blue
#1A365C

Light
#1e3f6b

Lighter
#23487b

Lightest
#27518a

Darkest
#015165

Darker
#016178

Dark
#01708c

Light Blue
#01809F

Light
#0190b2

Lighter
#019fc6

Lightest
#01afd9

Darkest
#2e595a

Darker
#356567

Dark
#3b7274

Teal Blue
#427F81

Light
#498c8e

Lighter
#4f999b

Lightest
#56a5a8

Darkest
#411128

Darker
#511532

Dark
#60193b

Eggplant
#701D45

Light
#80214f

Lighter
#8f2558

Lightest
#9f2962

Darkest
#31000f

Darker
#450014

Dark
#58001a

Maroon
#6C0020

Light
#800026

Lighter
#93002c

Lightest
#a70031

Darkest
#973916

Darker
#a83f18

Dark
#b9461b

Orange
#CA4C1D

Light
#db521f

Lighter
#e15e2d

Lightest
#e36b3e

Shades of Gray

Gray 90 (Base & Text)
#212121

Gray 80 (Darker)
#434142

Gray 70 (Dark)
#5D5B5C

Gray 60
#767475

Gray 50
#908E8F

Gray 40
#A9A7A8

Gray 30 (Accent Gray)
#DCDADB

Gray 20 (Light)
#F0EEEF

Gray 10 (Lighter)
#F5F3F4

Gray 5 (Lightest)
#FAF8F9

Special State Colors

These colors are used for accessibility of content.

Links
#1565c0

Link Hover
#9d2235

Link Visited
#4527a0

Special Use Colors

These colors are only used for the UAMS alert system.

Yellow – Focus
#ffb81c

Red – Urgent
#C61029

Orange – Alert
#ec7330

Steel – FYI
#597286

Sample Elements

Want to see what a blockquote looks like?

This is an example of a WordPress post, you could edit this to put information about your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.

Perhaps you’d like to see what an unordered list looks like?

  • Unordered list item #1
  • Unordered list item #2
  • Unordered list item #3

Or you’d prefer to see what an ordered list looks like?

  1. Ordered list item #1
  2. Ordered list item #2
  3. Ordered list item #3

Care to see what the headings look like?

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Interested in using buttons on your site?

Default Button
Blue Button
Green Button
Yellow Button
Gray Button
Red Button