🎨 Design Resources

Type Faces:

Master Font

• font-family: 'Roboto', sans-serif;
• font-weight: 400;
• font-weight: 500;
• font-weight: 700;
• font-weight: 900;
• color: #5E5E5E; (Reko gray)
• color: #8d8c8c; (BACK button)

Display Font

(Please don't use with out checking with @heyholmes)

• font-family: 'Quicksand', sans-serif;
• font-weight: 400;
• font-weight: 700;

Brand Colors

• Violet: #6966F6
• Dark Violet: #5A5766
• Green: #61E786
• Dark Green: #297A6A
• Gray: #5E5E5E
• Red: #F35404

Button & Font classes

Start all buttons with this class:

• class=" bttn "

Then add a size:

• b-small
• b-medium
• b-large
• b-wide (you can add this to another size to make the button wider)

Then choose a background color:

• b-white
• b-gray
• b-violet
• b-dark-violet
• b-green
• b-dark-green

To change the font color add:

• f-white
• f-gray
• f-violet
• f-dark-violet
• f-green
• f-dark-green

EXAMPLES:

class = "bttn b-large b-wide b-violet"

class = "bttn b-medium b-green f-dark-green"

class = "bttn b-small b-dark-violet"

for round buttons use class:"bttn-round" then modify it with b-COLOR

Master Containers for all pages:

<div class="background-container #CHOOSE COLOR CLASS">
   <div class="master-container"> 
     ##INSERT ENTIRE PAGE IN THESE TWO DIVS 
        
         <div class="paper-wrapper">
            ##THEN INSERT ANYTHING ON THE PAPER LIST IN THIS WRAPPER
         </div>

   </div>
</div>

https://www.dropbox.com/s/0an6ex2rn6xr4pb/reko-demoday2png.png?dl=0