WP Client Reports
Website Brand Guide
This page outlines the current brand styles and standards in use on the WP Client Reports website.
Typography
Titles & Headlines
This typeface is used for titles and headlines.
Typeface Name
[FONT_NAME]
Styles & Weights
- 400 — Medium
- 400 — Medium Italic
- 700 — Bold
- 700 — Bold Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Body & Captions
This typeface is used for the main body text and UI elements like buttons and input fields.
Typeface Name
[FONT_NAME]
Styles & Weights
- 400 — Medium
- 400 — Medium Italic
- 700 — Bold
- 700 — Bold Italic
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Typography In Action
Heading 1 (H1)
The quick brown fox jumps...
Heading 2 (H2)
The quick brown fox jumps over...
Heading 3 (H3)
The quick brown fox jumps over the lazy dog.
Heading 4 (H4)
The quick brown fox jumps over the lazy dog.
Heading 5 (H5)
The quick brown fox jumps over the lazy dog.
Heading 6 (H6)
The quick brown fox jumps over the lazy dog.
Body Text (p)
The quick brown fox jumps over the lazy dog.
Small Text (.text--s)
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
"The quick brown fox jumps over the lazy dog" is an English-language pangram – a sentence that contains all the letters of the alphabet. The phrase is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired.
Learn More About The Fox
Colors
Primary
Primary
Ultra-Light
Light
Dark
Ultra Dark
Secondary
Secondary
Ultra-Light
Light
Dark
Ultra Dark
Primary
Accent
Ultra-Light
Light
Dark
Ultra Dark
Base
Base
Ultra-Light
Light
Dark
Ultra Dark
Primary
Primary
10%
30%
50%
70%
90%
Secondary
Secondary
10%
30%
50%
70%
90%
Accent
Accent
10%
30%
50%
70%
90%
Base
Base
10%
30%
50%
70%
90%
Gradients
Primary → Secondary Ultra Dark
Secondary → Primary Ultra Dark
Secondary → Accent
Accent 20% → Secondary 30%
Success
Success
Success Light
Success Dark
Success Hover
Danger
Danger
Danger Light
Danger Dark
Danger Hover
Warning
Warning
Warning Light
Warning Dark
Warning Hover
info
Info
Info Light
Info Dark
Info Hover
<script>
document.addEventListener('DOMContentLoaded', function(event) {
const colorCards = document.getElementsByClassName('acss-color-card__wrapper');
for (let i = 0; i < colorCards.length; i++) {
const colorCard = colorCards[i];
const computedStyle = window.getComputedStyle(colorCard);
const backgroundColor = computedStyle.getPropertyValue('background-color');
if (backgroundColor) {
let hexValue = backgroundColor;
// Check if the value is in RGB format
if (backgroundColor.indexOf('rgb(') === 0) {
// Extract the RGB values
const rgbValues = backgroundColor.replace(/[^\d,]/g, '').split(',');
// Convert RGB to hexadecimal
const r = parseInt(rgbValues[0], 10);
const g = parseInt(rgbValues[1], 10);
const b = parseInt(rgbValues[2], 10);
hexValue = '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
}
const colorCardName = colorCards[i].querySelector('.acss-color-card__name');
colorCardName.innerHTML += '<br>' + hexValue;
}
}
});
</script>
