Framework

Global Presets UI Style Guide

01. Color palette

In this part of the style guide, we provide the different colors that are used throughout the website.

#758dbd

#B39C69

#424242

#5FABCE

#EAE5DB

#000000

#F26457

#F9F9F9

#e0e0e0

#444444

#000000

02. Text styles

In the second part of this style guide, you will see each class for our different text types.

Primary

Secondary

Tertiary

Heading 1

Nunito Sans, Bold 32px

Nunito Sans, Bold 40px

N/A

Heading 2

Nunito Sans, Bold 30px

N/A

Heading 3

Nunito Sans, Semi Bold 22px

Body

This is the main body text formatted as:

Nunito Sans, Regular 19px

This is the main body text formatted as:

Alegreya, Regular 20px

03. Modules

The last part of this style guide handles some of the most-used modules within the website. Here, we’re also providing a primary, secondary and tertiary version of each module.

Primary

Secondary

Tertiary

Button

Learn more

Blurb



GrandPals is an Intergenerational Program

Students, teachers and GrandPals benefit through forming bonds that build understanding, mutual respect and an increased sense of belonging.

N

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Divider

Person

Marc Mailhot

Founder of GrandPals and Educator

Marc Mailhot is an educator with a keen focus on interdisciplinary, experiential, project and place-based learning.

Marc Mailhot

Founder of GrandPals and Educator

Marc Mailhot is an educator with a keen focus on interdisciplinary, experiential, project and place-based learning.

Toggle

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Accordion

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

04. Various Color Palettes

In this part of the style guide, we provide the different colors that are used throughout the website.

#758dbd

#B39C69

#424242

#5FABCE

#EAE5DB

#000000

#705F51

#BD9A7E

#758DBD

#706A3A

#BDB46C

#000000

#5386A6

#9AC7D9

#2D4040

#F2DDB6

#F2EBDC

#000000

#F2D091

#F28705

#F2622E

#BF533B

#732F29

#000000

#F2FIFO

#A66851

#D9A491

#733C30

#BF6060

#000000

#99D9F2

#D9A25F

#BF7839

#F24405

#591902

#000000

#435951

#BFB093

#BF843B

#8C4216

#400101

#000000

#F2E8C9

#734E40

#BF9788

#F26457

#ODODOD

#000000

#1B5911

#3Е401A

#D96E30

#A65E44

#F2E8E4

#000000

#F9F9F9

#e0e0e0

#444444

#000000