Design
We value readability above all else. These design guidelines serve as a foundation for consistency and structure; if a rule compromises the clarity of the content, make exceptions to improve the design. If an element doesn't look correct or detracts from the user experience, adjust the design rather than adhere strictly to the rules.
Accessibility Statement
We are committed to adhering to the highest standards of accessibility to ensure that all users, including those with co-morbidities in the ACHD population, can effectively access and benefit from our materials. Our style guide incorporates web accessibility standards, including compliance with the Web Content Accessibility Guidelines (WCAG) 2.1, to ensure that our digital content is perceivable, operable, understandable, and robust for all users.
We recognize that some of our products are prototypes technologically and may not always fully meet these accessibility standards. In such cases, we design our materials with this in mind, striving to provide the best possible experience given current limitations. For instance, in cases where interventions are displayed as images in the EmpowerMyCH mobile app, impacting the size and readability of the rendered text, we ensure that our designs are as accessible as possible within these constraints. Therefore, this guide includes specific rules for developing in Canva, taking into account the constraints of displaying interventions as images within the mobile app.
By applying these principles to all our materials, and acknowledging the evolving nature of our prototypes, we strive to offer equitable access and a seamless experience for everyone.
General Rules
- Avoid Clickable Appearances: Avoid giving non-interactive elements a clickable appearance. Clearly distinguish these elements as text and avoid using shadows, beveling, or other effects that might suggest interactivity or make them resemble buttons.
- Consistency: Consistency is essential across all pages, interventions, and formats to build brand identity and ensure a seamless user experience.
- Logo: Use the logo sparingly. One well-placed logo, typically in the header or footer, is enough to build brand recognition.
- Iconography: Icons should be simple, flat, and scalable. Maintain a uniform style and color for all icons to ensure cohesion across web, app, and print materials. Use Font Awesome for consistency across platforms.
Primary Colors
Use color to guide user focus and maintain a visually appealing, cohesive design. If using color combinations that fall outside of this guide ensure all text/foreground and background combinations meet AAA accessibility standards for contrast. webaim.org
Primary-Color
This is the brand's defining color, representing trust. It should be reserved for level one and two headings, call to actions, and key focal points to maintain its impact.
Hex Color Code:
BG-Color (Background)
This primary background color used for all page backgrounds unless otherwise specified elsewhere.
Hex Color Code:
Text-Color
High-contrast text is essential for readability, particularly on mobile devices and as text gets smaller. Pure black is the main text color other than when the Primary-Color is specified.
Hex Color Code:
Secondary Colors
Secondary colors should be used sparingly to accentuate specific icons or backgrounds. Avoid overwhelming the design by introducing unnecessary variations.
Secondary-BG-Color
This secondary background color is applied to cards, lists, text-blocks empowerments, and other areas where a subtle distinction from the main text is needed.
Hex Color Code:
Muted-Text-Color
This color is used for secondary information, providing subtle contrast to the primary black text. It’s ideal for captions, subheadings, or supplementary details, helping to create a clear visual hierarchy.
Hex Color Code:
Danger-Color
Use this color on icons to emphasize warnings, precautions, and potential concerns. Apply it to highlight critical information that users should avoid, be cautious of, or take note of, ensuring that it stands out and effectively communicates important cautions.
Hex Color Code:
Success-Color
Use this color on icons to highlight information related to positive outcomes or safe practices. It should be used to denote recommendations or actions that are safe and beneficial, helping users easily identify best practices and positive guidance.
Hex Color Code:
Info-Color
Use this color on icons and links to highlight informational content or provide helpful tips. It should be used to denote general guidance, neutral advice, or additional context, helping users easily identify important information and access further resources.
Hex Color Code:
Typography
Maintain consistency in typography across all materials. Select one sans-serif font for use across all formats, and establish clear hierarchies for headings, body text, and other elements.
Open Source
We utilize Google Fonts due to their open-source nature and ease of integration across different platforms and applications.
Font Family
Montserrat is the font used for all design work and this documentation site. To install it locally, download it from Google Fonts.
Font Size
Use 4px increments for headings and other hierarchical elements to create a clear visual structure and improve overall readability.
Canva
| Element | Font Size | Style |
|---|---|---|
| Intervention Title | 60px |
Bold |
| Heading 1 | 52px |
Bold |
| Sub-Heading | 40px |
Regular |
| Heading 2 | 40px |
Bold |
| Main Body | 32px |
|
| Minimum Body | 28px |
|
| EMPOWERMENT | 36px |
Bold, ALL-CAPS |
Web
| Element | Font Size | Style |
|---|---|---|
| Body | 16px |
Scalable (rem units in CSS) |
Whitespace and Grid
Using a grid system in design is essential for achieving the whitespace and consistency needed for readability and a clean layout. Consistent margins, padding, and line spacing all contribute to this clarity. We will use an 8px grid system as the foundation for all design elements to ensure this consistency.
The 8px Grid System
This system uses 8px increments for spacing, sizing, and layout. All components, from icons to margins, should be aligned with this grid, providing structure and consistency across different formats. While the 8px increment is preferred, there are instances where a 4px increment may be necessary, such as font sizing. Typically, an 8px grid is utilized, with columns and rows that adhere to this structure. For example, on our typical interventions in Canva, we would use an 8-column layout with column gaps of 16px and margins set to 32px. Rows will be 8px in height with 8px gaps between them. This approach ensures a balanced, clean design while maintaining readability and adaptability across various mediums. See this video on setting up a grid system in Canva.