Style Guide
Typography
S1: Cookie dough that checks every box
S2: Cookie dough that checks every box
S3: Cookie dough that checks every box
S4: Cookie dough that checks every box
S5: Label & Button Style
P1: This is paragraph text which should be used for the majority of all text content on the page. Inline links, which look like this, may be added to paragraph text using the link icon.
P2: This is paragraph text which should be used for the majority of all text content on the page. Inline links, which look like this, may be added to paragraph text using the link icon.
Color Palette
The global system for colors used throughout the digital applications.
Primary Palette
Sweet Loren’s Pink
#E21B77
Used for buttons, text links, clickable elements, and logo
Dark Gray
#13293C
Used for text on majority of site
Pale Beige
#FFFCF6
Used for page background color
White
#FFFFFF
Used for text on dark background/images, button text, icons
Secondary Palette
Chocolate Chunk (CC)
#2F75C6
Used for elements related to Chocolate Chunk products
Sugar Cookie (SC)
#C44760
Used for elements related to Sugar Cookie products
Fudgy Brownie (FB)
#8A2A2B
Used for elements related to Fudgy Brownie products
Birthday Cake (BC)
#E793B7
Used for elements related to Birthday Cake products and Divider Lines
Toggles (Dropdown)
Headline style: Label Text Color: Dark Gray Blue Divider Size: 1.5px Divider Color: Birthday Cake Spacing: 16px
Dropdown
Body text: P1 Text Color: Dark Gray Blue Spacing: 8px
Focused
1px border around on tabbing Color: Sweet Loren’s Pink
Iconography
The global system for smaller UI components used
throughout the digital applications.
Design Asset Folder
Iconography
Primary Buttons
Secondary Buttons
Arrow Button Styles
Text Links
OG Image
Dropdowns
Input Fields
thank you for subscribing!
Check your inbox for a confirmation email