top of page

Sticker Sheet

This page is a sticker sheet, which is inaccessible to users who will be accessing bakebackbetter.com. The purpose of this page is to serve as reference guide for how to modify and create new elements on the site going forward. It will explain color palettes and their HEX codes, spacing and page layouts, how to create new campaign blocks, which fonts to use and where, and generally keep the site looking professional going forward. 

Using the Admin* Campaigns Copy Page

I've marked our pages only accessible by the site admin as Admin*. Which includes this page, the Sticker Sheet, and another the Campaigns Copy.

These pages are to be used as tools for the site admin to work on development after the site has gone live. In particular the Campaigns Copy page is useful for copy & pasting directly to the live Campaigns page.

For example --when there are no active campaigns, there is a section you can find in the Admin* Campaigns Copy page, for this scenario. Just copy & paste it to the live campaigns page, and delete all other campaign sections (On the live campaigns page, not the copy).

When adding campaigns back to the page, just delete the placeholder section and grab one of the premade campaigns from the Copy page. This makes it much easier to maintain the spacing and formatting of our campaign blocks and makes it so you don't have to keep figuring out the format every time you want to make a campaign. 

Color palettes

Here are the color palettes to be used across the site when making new pages. To use any of these colors all you need to do is copy their HEX codes above the color swatches, and paste them into the design panel color picker. 

Screenshot (161).png
Screenshot (163).png

Primaries

#182161

This navy blue is used for spacers between sections, Subject titles; like 'Color palettes' above, and serves as the primary background color for our header/footer, and general background color for the website aside from white. 
 

#FFFFFF

We will be using white for any text that appears atop the navy primary color, for maximum contrast and legibility. White will also serve as the backdrop for our text-heavy sections, where we'll use black as the text color.
 

Secondaries

#D2042D

This striking red color will be used for key points of interest like the 'Current campaigns' button, to draw attention. 
 

#CADFFF

This pale blue color will be used to break up the monotony of text-heavy pages by highlighting sections of interest. This can be seen on the 'Campaigns page' where 'Cupcakes for a cause' has this background color.

#6169A4

This color will be used for alternative headers on things like the footer of the site. See the footer for an example. 'About us' the primary header will be in white, while 'Our story' the alternative header will use this color to add visual interest. This also pairs nicely with the navy background color. 

Spacing & page layout

It's important that the site maintain exact spacing between sections across all of our pages. This will give the site a much more professional look and show our attention to detail. The elements below are all specifically sized for their intended areas and can be copy pasted to very easily get equal spacing across all of our sections. 

We'll be using blocks, which are just squares of a random color along with the snap to grid feature of Wix to check that our spacing is correct. It's important to note that when copy pasting these blocks they must be in a group, because Wix has trouble when copy pasting non-grouped blocks. 

For example the blue block below will not copy paste proportionately. But the red block will, so all blocks on the sticker sheet will be group objects-- just know this is intentional to get around this bug. 

(Click on these blocks & try copy pasting them to see the difference)

The horizontal blue bar below was a design feature from the original BBB site which I've changed into a section called 'Spacer'. To use one of these spacers all you need to do is click on it, and it will highlight in purple with a top-right bookmark that reads "Section: Spacer". Then go to whichever section you are working on (On a different page outside of the sticker sheet), click on the section to highlight it, and paste the spacer. The spacer will appear directly below the section you highlighted. 

All you need to do is use the red block to find the correct distance between spacers, and the green block for items inside of sections. I've put an example screenshot below to explain this a bit better. 

Screenshot (167).png

The pale blue vertical block is used for finding horizontal spacing between the guidelines that Wix provides. 

Blocks for copy pasting

Please use the blocks below for copy pasting onto other pages to get the spacing just right. If you're unsure about how to use the blocks see the images above for reference. 

For between spacers

For items in sections

For spacing between guidelines 

All 3 together for convenient copy & pasting

Creating new campaign blocks

With spacing covered, it should now be easier than ever to create and remove campaign blocks on the new 'Current campaigns' page. Since all campaigns are now broken up into sections, all we need to do is copy and paste a currently existing campaign, and it will appear directly below whichever section we have selected. 

Now we can replace the title of the campaign with the new title, as well as the description text. We can replace the image featured at the bottom and update the URL link under donate to direct the user to the correct Actblue campaign. 

Fonts & typefaces

The primary typeface we use across the site is Poppins, a geometric sans-serif font that is very easy to read.

Section titles; Poppins Bold 25; HEX #182161

Section copy; Poppins Medium 20 ; HEX #000000

BBB logo font; Gotham Bold 24 ; HEX #FFFFFF (reverses out in white)

Situational footer text; Poppins Semi Bold 20; HEX#FFFFFF (reverses out in white)

bottom of page