Headline (H2)
Use Kopius for h1, h2, and h3 elements.
Section Header (H3)
Subhead (H4)
Use Lato for H4 and smaller headings, and for all body copy.
Quote text that could be fairly long and fill the space
-Person Name
Page Width & Div Styling
Set all containers to full width, with a maximum internal pixel width of 1200px.
Colors
Each of the colors can be used on various elements for lines or fill elements. For the most part, use berry for as many elements as possible, and add in one or two other colors to use as accents. In general, berry, blue, and yellow is the preferred color scheme in a design for the Parkinson Voice Project organization as a whole. An example is below using the berry as a background color, the yellow as a headline color, and the green as an extra accent color.
Avoid using colors that make text difficult to read. This will vary based on what background color is used. Generally, use the color with the most contrast. For example, do not use text in the berry color on top of green, or vice versa
Primary Colors
The primary colors for Parkinson Voice Project are Parkinson Voice Berry and black. Use berry for backgrounds, head- lines, and accents. Avoid using berry on small type. Use black for body copy. Black should also be used on lines and other elements at a lower tint value (15% is generally a good value for this).
Parkinson Voice Berry
CMYK: C=32, M=100, Y=45, K=13
RGB: R=160, G=24, B=86
Hex: #a01856
CSS Class: berry
Black
CMYK: C=0, M=0, Y=0, K=100
RGB: R=0, G=0, B=0
Hex: #000000
CSS Class: N/A
Secondary Colors
The secondary colors for Parkinson Voice Project should be used sparingly when showing the organization as a whole. Any given page of a document should only include a maximum of two secondary colors, unless talking about specific sections of the organization.
Education Violet
CMYK: C=61, M=77, Y=0, K=0
RGB: R=140, G=70, B=221
Hex: #8c45dd
CSS Class: education-violet
Individual Therapy Blue
CMYK: C=83, M=42, Y=4, K=0
RGB: R=21, G=128, B=188
Hex: #1580bc
CSS Class: therapy-blue
Daily Practice Green
CMYK: C=64, M=11, Y=100, K=1
RGB: R=108, G=170, B=0
Hex: #6caa00
CSS Class: practice-green
Light Color Variations
Some colors for Parkinson Voice Project have extra light variations – the main uses for these is for backgrounds and as colors for reversed text on dark backgrounds.
Light Violet
CMYK: C=9, M=18, Y=0, K=0
RGB: R=229, G=208, B=252
Hex: #e5d0fc
CSS Class: light-violet
Light Blue
CMYK: C=36, M=7, Y=0, K=0
RGB: R=156, G=207, B=242
Hex: #9ccff2
CSS Class: light-blue
Light Green
CMYK: C=24, M=1, Y=49, K=0
RGB: R=198, G=221, B=155
Hex: #c6dd9b
CSS Class: light-green
Accent Colors
Accent colors are to be used only around 15% of the time, and should primarily be used to add visual interest for reversed text on dark backgrounds or on a background fill for a small element of a design.
Group Therapy Yellow
CMYK: C=0, M=24, Y=95, K=0
RGB: R=255, G=196, B=31
Hex: #ffc41f
CSS Class: therapy-yellow
Light Yellow
CMYK: C=0, M=10, Y=37, K=0
RGB: R=255, G=227, B=171
Hex: #ffe3ab
CSS Class: light-yellow
Lighter Blue
CMYK: C=4, M=1, Y=0, K=0
RGB: R=240, G=246, B=250
Hex: #f0f6fa
CSS Class: lighter-blue
Lighter Yellow
Hex: #fff4de
Lighter green
Hex: #F2F7E8
Lighter violet
Hex: #F7F4FA
Lighter Blue
CMYK: C=4, M=1, Y=0, K=0
RGB: R=240, G=246, B=250
Hex: #f0f6fa
CSS Class: lighter-blue
Lighter Yellow
Hex: #fff4de
Buttons
Due to theme limitations, button colors cannot be styled using classes, and must by styled in the WordPress editor. Simply use the colors provided above to dictate text and background colors. It is important to keep these consistent with the colors above to avoid any accessibility issues.
When adding buttons, the block menu gives you two choices: “Button” and “Buttons.” Always choose the “Button” option, which uses the theme framework styling, rather than default WordPress styling.
Note that buttons added like this are links, not html button tags.
Images
The brand makes extensive use of elements with rounded corners. In general sizing should approximately reflect the following: on the web, use a size around 20px. This is not meant to be an exact number, since larger or smaller corners may appear better on various use cases.
For web use, the majority of rounded elements should be used on clickable items. In print, use rounded elements to add interest and approachability to a design.
Images and elements with sharp corners are to be used on header elements and elements that extend to the edges of a page, and rounded elements should be introduced to “soften” a design and add interest.
– Sync Padding enabled
– 20px Padding
– Background color set (#ffe3ab, light yellow)
– Additional CSS class “rounded-corners-20” added
Pull Quotes
Pullquote elements will generally have the text of the quote in berry, the author in black, the quote marks in berry, and the border in one of the prescribed light or accent color variations.
The border will always default to light violet (#e5d0fc) but may be set to any of the light or accent colors by changing adding the color’s class to the pullquote (see example on the right, which is set to light-yellow).
- light-violet
- light-blue
- light-green
- therapy-yellow
- light-yellow
- lighter-blue
Quote text that could be fairly long and fill the space.
-Person Name
Horizontal Rules
All color classes may be used on horizontal rules. To add an <hr>, use the “separator” block within the editor, and simply add the color class to the end of the “Additional CSS Class(es)” field. These color styles work with both default (a short hr), wide (a full width hr), and dots (dotted hr) theme styles.
Full Width Color Blocks
Pretty self-explanatory.
To make a full-width color block, use the “container” block within the theme editor, set its alignment to full-width and it’s maximum internal width to 1200px (as described above in the Page Width & Div Styling section), and add one of the color classes to its “Additional CSS Class(es)” field. The classes come with a baked-in 20px padding on the top and bottom.
Section nav
To make a nav for a specific section, add a “container” block and place a “navigation” block within it. Under “Additional CSS Classes” on the container block, add the following:
lighter-blue section-nav-main rounded-container-20
Now, edit the nav and add each link item you want linked, then set the alignment to “justify items center”.
Unfortunately, you cannot update this kind of subnav within the WordPress menus, so you have to do it manually. Thankfully, the navs you make are saved separately so you can use them multiple places, if needed.
It should look like this when you preview the page: