Logos

The colors used in this project are key for brand consistency and design continuity. Please utilize these colors for all aspects of the design.

Logo Variations with Tagline

Black Logo with Tagline

White Logo with Tagline

Full Color Logo with Tagline Bro

Colors

The colors used in this project are key for brand consistency and design continuity. Please utilize these colors for all aspects of the design.

Primary Colors
#EB3797
$loot8-pink
#F2A71B
$loot8-gold
#D04E40
$loot8-orange
#0E3A73
$loot8-blue
#43B971
$loot8-green
Color Tints - 10% Darker
#D9167E
#CE8A0C
#B1392C
#082346
#35945A
Color Tints - 10% Lighter
#F065AF
#F5BA4B
#DA7469
#1451A0
#67C88D
Gradients
Navy -> Pink
Orante -> Gold
Blue -> Green
Grayscale
#1F1F1F
$loot8-black
#FCFCFC
$loot8-white
#F5F7FA
$loot8-gray1
#DBE2ED
$loot8-gray2
#E8EDF3
$loot8-gray3

Typography

Typography represents all of the type within the Loot8 application. These styles are definied to help determine what test is best utilized with the application.

Headers

H1 - The quick onyx goblin jumps over the lazy dwarf

H2 - The quick onyx goblin jumps over the lazy dwarf

H3 - The quick onyx goblin jumps over the lazy dwarf

H4 - The quick onyx goblin jumps over the lazy dwarf

H5 - The quick onyx goblin jumps over the lazy dwarf
H6 - The quick onyx goblin jumps over the lazy dwarf
Paragraph Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Eu feugiat pretium nibh ipsum consequat. Id leo in vitae turpis massa. Arcu felis bibendum ut tristique et. Imperdiet nulla malesuada pellentesque elit eget. Id aliquet risus feugiat in ante metus dictum. Felis donec et odio pellentesque diam. Nam libero justo laoreet sit amet cursus sit. Amet volutpat consequat mauris nunc congue nisi. Eget mi proin sed libero enim. Fermentum iaculis eu non diam. Orci ac auctor augue mauris augue neque.

Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Eu feugiat pretium nibh ipsum consequat. Id leo in vitae turpis massa. Arcu felis bibendum ut tristique et. Imperdiet nulla malesuada pellentesque elit eget. Id aliquet risus feugiat in ante metus dictum. Felis donec et odio pellentesque diam. Nam libero justo laoreet sit amet cursus sit. Amet volutpat consequat mauris nunc congue nisi. Eget mi proin sed libero enim. Fermentum iaculis eu non diam. Orci ac auctor augue mauris augue neque.
Colored Text

.txt-pink: The quick onyx goblin jumps over the lazy dwarf

.txt-gold: The quick onyx goblin jumps over the lazy dwarf

.txt-orange: The quick onyx goblin jumps over the lazy dwarf

.txt-blue: The quick onyx goblin jumps over the lazy dwarf

.txt-navy: The quick onyx goblin jumps over the lazy dwarf

.txt-green: The quick onyx goblin jumps over the lazy dwarf

.txt-gray-1: The quick onyx goblin jumps over the lazy dwarf

.txt-gray-2: The quick onyx goblin jumps over the lazy dwarf

.txt-gray-3: The quick onyx goblin jumps over the lazy dwarf

Buttons

Buttons are our primary calls to action for patrons in the Loot8 application. Here are our 4 most common button types.

Standard Buttons
Button Primary Button Secondary Button Tertiary Cancel Button Disabled Button
Buttons with Icons
Button Primary Button Secondary Button Tertiary Cancel Button Disabled Button

Icons

Icons are a useful visual tool when creating a image that relates to a given action or intereaction. All icons used in this project will be taken from Font Awesome.

Standard Icons
Social Icons