Style Guide
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.
Colors
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.
- Reds
- Darkest
#7b1d2a - Dark
#8d1f30 - UAMS Red
#9d2235 - Light
#ad253a - Lightest
#bd2940
- Darkest
- Blues
- Darkest
#015165 - Darker
#016178 - Dark
#01708c - Blue
#01809F - Light
#0190b2 - Lighter
#019fc6 - Lightest
#01afd9
- Darkest
- Greens
- Darkest
#186d35 - Darker
#1b7d3d - Dark
#1f8d45 - Green
#229d4d - Light
#25ad55 - Lighter
#29bd5d - Lightest
#2ccd65
- Darkest
- Dark Blues
- Darkest
#0d1b2e - Darker
#11243d - Dark
#162d4d - Dark Blue
#1A365C - Light
#1e3f6b - Lighter
#23487b - Lightest
#27518a
- Darkest
- Light Blues
- Darkest
#015165 - Darker
#016178 - Dark
#01708c - Light Blue
#01809F - Light
#0190b2 - Lighter
#019fc6 - Lightest
#01afd9
- Darkest
- Teal Blues
- Darkest
#2e595a - Darker
#356567 - Dark
#3b7274 - Teal Blue
#427F81 - Light
#498c8e - Lighter
#4f999b - Lightest
#56a5a8
- Darkest
- Eggplants
- Darkest
#411128 - Darker
#511532 - Dark
#60193b - Eggplant
#701D45 - Light
#80214f - Lighter
#8f2558 - Lightest
#9f2962
- Darkest
- Maroons
- Darkest
#31000f - Darker
#450014 - Dark
#58001a - Maroon
#6C0020 - Light
#800026 - Lighter
#93002c - Lightest
#a70031
- Darkest
- Oranges
- Darkest
#973916 - Darker
#a83f18 - Dark
#b9461b - Orange
#CA4C1D - Light
#db521f - Lighter
#e15e2d - Lightest
#e36b3e
- Darkest
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.
Here is the citation
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?