Webdesign guidelines
This page is meant to be used as a tool for designing new WordPress websites, and the following specifications are used when setting up a new WordPress page. The purpose of this guide is to help Aptum designers understand how design decisions translate from visual tools (Figma) to code. It covers essential elements like layout widths, color naming, button styles, and typography hierarchies that ensure consistency across your website. By following these specifications, you’ll help bridge the gap between what looks good, works well and ensures efficiency.
If you have any questions, contact Charlotte.
Jump to section…
Layout
In addition to full-width there should be 2 width sizes: wide-size and content-size. These should be consistent throughout the project. In this site starter setup these values are as follows:
Full-width
Wide-size: 1300px
Content-size: 650px
Spacing
WordPress includes a set of predefined spacing sizes, which can be customized to match your website’s design. These sizes apply to margins, padding, and gaps, and should be defined in pixels for consistency.
To maintain a clean and cohesive layout, spacing should be consistent across all sections and modules.
Below are examples of sections where the grey area represents padding. The white space between sections is the margin, which uses a default spacing size of 1 — but it can be set to any of the following predefined sizes:
Spacing size 1
Spacing size 2
Spacing size 3
Spacing size 4
Spacing size 5
Spacing size 6
Global colors
A naming convention that is consistent throughout all projects makes for a predictable and efficient workflow. This is the naming convention we propose:
Primary
Secondary
Tertiary
Apart from these three main colors other variations and colors can be added. Example: Primary-200, Secondary-800, Blue-300, Purple (a standalone color, typically representing the midpoint from which variations can extend)
Other colors that are useful:
Error
Warning
Success
Background
Typography
Headlines
HTML headline tags (H1-H6) create a hierarchical structure for your website content that helps both users and search engines understand the organization of the page.
H1
The main title of your page. Use only one H1 per page that clearly states what the page is about. Think of it as the book title.
H2
Major section headings that divide your content into main topics. These are like chapter titles that support your H1.
H3
Subsection headings within H2 sections. These further break down your content into more specific topics.
H4
Smaller subsections within H3 content. Used when you need an additional level of organization.
H5
Rarely used, but available for extremely detailed content that requires deep hierarchical structure.
H6
Also rarely used, but available for extremely detailed content that requires deep hierarchical structure.
Font size
Font sizes can be fluid, meaning they start off on desktop one size and end up a smaller size on mobile. Font sizes should be measured in rem, prefereably not px.
H1
Desktop: 4rem
Mobile: 3.5rem
H2
Desktop: 3rem
Mobile: 2.5rem
H3
Desktop: 2rem
Mobile: 1.5rem
H4
Desktop: 1rem
Mobile: 1rem
H5
Desktop/Mobile: 0.75rem
H6
Desktop/Mobile: 0.5rem
Custom
Desktop: 7rem
Mobile: 4rem
By default the font size of an H1 should be the same on all pages.
If there needs to be one page where an H1 is bigger this should be marked as a custom size.
Ina has often named custom sizes with a prefix: Display.
Font family and weight
Best practice is to make sure that the same font-family, weight and line-height globally is the same for each text element: H1-H6, buttons, paragraphs etc. If the front page H1 uses the Avenir font, all H1 elements on all other sub pages should use Avenir. Most common in webdesign is a usage of 2-3 font-families.
Exceptions should be kept to a minimum.
Examples:
H1
Family: Avenir
Weight: Bold
H2
Family: Avenir
Weight: Bold
H3
Family: Avenir
Weight: Semi-bold
H4
Family: Times New Roman
Weight: Normal
H5
Family: Times New Roman
Weight: Normal
H6
Family: Times New Roman
Weight: Normal
Other
Please include assets
A folder or path to all icons, logo variations and images used in the project
Radius
If there are radiuses applied to buttons or images, these should be global styles. Meaning all primary buttons should have the same radius.
Button: 8px.
Image: 4px.
Boxes: 8px.
Drop shadow (if applicable)
Example:
Blur: 20 / 7%
Inputs
We have base styles for form inputs. Please specify if there should be changes.