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?
- Ordered list item #1
- Ordered list item #2
- 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