style guide
Buttons
Typography and icons
Next
Images- people
Images- classroom
Graphics and clickable elements
buttons
typography and color
titles and headings- bebas neue
Subheadings, directions- Lato (bold)
Content- Lato (regular)
fc440f
ebf8f8
Hover state for module information icons, required interactive buttons/icons
Background, some light text
Captions, subjeadings, main body text, enabled icons for menu/content slides, monochromatic graphics (active/unvisited)
0f0550
ffa400
Hover state for navigation icons
Text on lightboxes, text against white background (ffffff)
005566
Headings, enabled navigation icons
000000
007bff
d3b6dc
Active menu icons (help, quiz review, practical strategies)
Disabled menu icons, visited monochromatic icons
bc05b8
Disabled navigation icons
Optional interactive buttons/icons (links, attachments, etc)
b0cad0
images- people
Photographs for case studies should capture real-life scenarios and individuals to provide authenticity and relatability. These images should be high-resolution and feature natural lighting to maintain a professional and realistic look.
Resolution: High-resolution images to ensure clarity and detail.
Lighting: Natural lighting to maintain a professional and realistic look.
Content: Real-life scenarios and individuals to provide authenticity and relatability.
Background: Transparent backgrounds (PNG format) for versatility in placement.
Demographics: Ensure representation of cultural diversity and demographics of the target audience.
Clothing and Setting: Modern clothing and settings appropriate for the context of the case study.
Quality: No visible edges or artifacts; images should blend seamlessly into various backgrounds.
images- classroom
Resolution: High-resolution PNG or JPEG
Lighting: Natural lighting to create an inviting and realistic atmosphere
Content: Diverse student population in a modern classroom environment
Style: Candid or professional portraits that feel authentic, relatable, and engaging.
graphics and clickable elements
Format: High-quality PNGs with transparent backgrounds. Style: Cartoon-style images that clearly stand out against the background. Avoid using realistic images for clickable elements to maintain clarity. Consistency: Ensure a consistent style across all graphics to maintain a unified look and feel. Visual Distinction: Ensure that clickable elements are visually distinct from the background. This can be achieved through the use of contrasting colors, outlines, or shadows. Color Scheme Active/Default State: Use the color #0f0550 for silhouettes. Visited State: Change to the color #b3c6dc for inactive or already visited links, or increase transparency to 80%. Persistent navigation icons are listed in the dedicated section.
Active
Visited
Visited
Active
Style Guide
Amy Houston
Created on September 4, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Discover Your AI Assistant
View
Vision Board
View
SWOT Challenge: Classify Key Factors
View
Explainer Video: Keys to Effective Communication
View
Explainer Video: AI for Companies
View
Corporate CV
View
Flow Presentation
Explore all templates
Transcript
style guide
Buttons
Typography and icons
Next
Images- people
Images- classroom
Graphics and clickable elements
buttons
typography and color
titles and headings- bebas neue
Subheadings, directions- Lato (bold)
Content- Lato (regular)
fc440f
ebf8f8
Hover state for module information icons, required interactive buttons/icons
Background, some light text
Captions, subjeadings, main body text, enabled icons for menu/content slides, monochromatic graphics (active/unvisited)
0f0550
ffa400
Hover state for navigation icons
Text on lightboxes, text against white background (ffffff)
005566
Headings, enabled navigation icons
000000
007bff
d3b6dc
Active menu icons (help, quiz review, practical strategies)
Disabled menu icons, visited monochromatic icons
bc05b8
Disabled navigation icons
Optional interactive buttons/icons (links, attachments, etc)
b0cad0
images- people
Photographs for case studies should capture real-life scenarios and individuals to provide authenticity and relatability. These images should be high-resolution and feature natural lighting to maintain a professional and realistic look.
Resolution: High-resolution images to ensure clarity and detail.
Lighting: Natural lighting to maintain a professional and realistic look.
Content: Real-life scenarios and individuals to provide authenticity and relatability.
Background: Transparent backgrounds (PNG format) for versatility in placement.
Demographics: Ensure representation of cultural diversity and demographics of the target audience.
Clothing and Setting: Modern clothing and settings appropriate for the context of the case study.
Quality: No visible edges or artifacts; images should blend seamlessly into various backgrounds.
images- classroom
Resolution: High-resolution PNG or JPEG
Lighting: Natural lighting to create an inviting and realistic atmosphere
Content: Diverse student population in a modern classroom environment
Style: Candid or professional portraits that feel authentic, relatable, and engaging.
graphics and clickable elements
Format: High-quality PNGs with transparent backgrounds. Style: Cartoon-style images that clearly stand out against the background. Avoid using realistic images for clickable elements to maintain clarity. Consistency: Ensure a consistent style across all graphics to maintain a unified look and feel. Visual Distinction: Ensure that clickable elements are visually distinct from the background. This can be achieved through the use of contrasting colors, outlines, or shadows. Color Scheme Active/Default State: Use the color #0f0550 for silhouettes. Visited State: Change to the color #b3c6dc for inactive or already visited links, or increase transparency to 80%. Persistent navigation icons are listed in the dedicated section.
Active
Visited
Visited
Active