Header Styles
Primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amer.
Secondary
Header Message Goes Here
Tertiary
Header Message Goes Here
Text Styles
Headlines
H1 Headline (Playfair Display Black, 58px)
Montserrat Medium, Huge (2rem/32px). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit.
H2 Headline (Playfair Display Black, 45px)
Montserrat Medium, Extra-Large (1.563rem/25px). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit.
H3 Headline (Montserrat Bold, 32px)
Montserrat Medium, Large (1.375rem/22px). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit.
H4 Headline (Montserrat Bold, 25px)
Montserrat Medium, Normal (1rem/16px). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit.
H5 Headline (Montserrat Bold, 22px)
Montserrat Medium, Small (0.875rem/14px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit.
Content Callouts
Content Callout without Photo
This callout should be used before or after a section with a white background. The subhead and body copy should be aligned center. The background color should be #4E9DB1 or #7E975D. The background color is determined by the color background that comes before it (e.g. if #4E9DB1 is chosen, then #7E975D should be used in the next callout with a color background.)
Content Callout without Photo
This callout should be used before or after a section with a colored background. The subhead and body copy should be aligned center in between two ribbons on the left side and two ribbons on the right side of the webpage. The ribbons can use the following colors: #7E975D, #65AABC, #E0B03C, #B4502F, or #F68D3D.
![](https://judaismyourway.org/wp-content/uploads/2023/07/DSC_7312-1024x722.jpg)
Content Callout with Photo
This callout should be used before or after a section with a white background. Photo will be placed to the left side of the copy. The background color should be #4E9DB1 or #7E975D. The background color is determined by the color background that comes before it (e.g. if #4E9DB1 is chosen, then #7E975D should be used in the next callout with a color background.)
![](https://judaismyourway.org/wp-content/uploads/2023/07/DSC_7312-1024x722.jpg)
Content Callout with Photo
This callout should be used before or after a section with a colored background. Photo will be placed to the left side of the copy with two ribbons (can use colors #7E975D, #65AABC, #E0B03C, #B4502F, or #F68D3D for the ribbons) underneath the photo. Copy will be on the right side of the photo and ribbons.
Cards
This card should be used on white backgrounds and can be expanded to the width of half a webpage.
![Making Jewish Learning Fiscally Accessible – Open Tent Be Mitzvah Scholarship Fund](https://judaismyourway.org/wp-content/uploads/2024/07/image3-300x225.jpeg)
Making Jewish Learning Fiscally Accessible – Open Tent Be Mitzvah Scholarship Fund
![Welcoming Our New Executive Director!](https://judaismyourway.org/wp-content/uploads/2024/04/Gold_Family_ED-Announement-300x225.png)
Welcoming Our New Executive Director!
![Commonalities as the Focus](https://judaismyourway.org/wp-content/uploads/2024/01/akko-blog2-300x225.png)
Commonalities as the Focus
![What It’s Like to Live with Jewish Anxiety Right Now](https://judaismyourway.org/wp-content/uploads/2023/11/Candle-300x225.jpeg)
What It’s Like to Live with Jewish Anxiety Right Now
![Kaddish Circle](https://judaismyourway.org/wp-content/uploads/2023/08/Candle-300x225.jpeg)
Kaddish Circle
12:00 pm – 1:00 pm
![Changing the World Together](https://judaismyourway.org/wp-content/uploads/2023/08/IMG_3593-300x225.jpeg)
Changing the World Together
–
![Shabbat @home – September](https://judaismyourway.org/wp-content/uploads/2023/10/AdobeStock_465086738-300x225.jpeg)
Shabbat @home – September
6:00 pm – 8:00 pm
Accordions
Accordion One
Accordion Active
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet. Nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet.
Accordion Two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet. Nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet.
Accordion Three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet. Nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet.
Color Palette
Primary Colors
Sage
#7E975D
Moss
#28462A
Serene (Blue)
#65AABC
Honey (Yellow)
#E0B03C
Web Accessible Colors
Frost (Accessible Blue)
#4E9DB1
Ember (Accessible Orange)
#EF6E0B
Tertiary Colors
Rust
#B4502F
Spice
#F68D3D
Ash (Dark Grey)
#AFAEAC
Mist (Grey)
#D6D2CF
Cloud (Light Grey)
#AFAEAC
White
#FFFFFF
Buttons
Primary Button
Secondary Button
Secondary Button (Color Background)
Pull Quotes
Montserrat Medium, 25px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis euismod nisi, sit amet lobortis elit interdum sit amet. Lorem ipsum dolor sit amet
Citation Name