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

Color Tints - 10% Darker

Color Tints - 10% Lighter

Gradients

Grayscale

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