07 Visuals

Icons

Sparkco’s icons consist of two colors predominately black with Sparkco peach, they should be simple in details, medium thick strokes and should always be rounded corners and tips to keep consistent look and feel with our logo.

Distinctive identity icon
sparkco proposal icon
Disproportionate loyalty icon

In use

icon sample

Misuse

icon sample that has too much color
Too much color
icon sample that is solid shape instead of outlines
Should not be predominantly solid shapes
icon sample that has outline too thin
Lines too thin

Imagery

Inspired by comic books, sparkco’s imageries utilize light to medium gray monotone halftone dot patterns background with cut out foreground subjects using our secondary colors and sparkco peach.

image sample

Tips:
Background is served as a texture to help provide fuller story to the foreground visuals, make sure it isn’t too dark nor too overpowering

Suggested background halftone settings:

halftone background setting sample

Foreground subjects color:

HEX: F9CD61
HEX: 2FABAF
HEX: 6980DA
HEX: F96167
image sample 3

Tips:
For foreground subjects, we should try to stick with our secondary colors as much as possible

In use

illustration in context sample 2
illustration in context sample

Misuse

image sample
Background is not halftone
image sample of background too dark
Halftone background too dark

Mascot

sparkco’s mascot is modeled after our executive chair dog Sparkle, a cheerful Shiba Inu puppy who wears a red collar with a tag that has our four point star on it. The illustration style should be simple in color and shape, medium thick strokes and flat in color.

sparkle lying down
Base color
D68336
FCFCFB
DC3930
040404
Shadow color
C5735E
B1AFC5
97161B

In use

sleeping sparkle the dog sample
tote bag sample with mascot
sparkco mascot sample 2

Pattern

sparkco’s pattern is created and meant to be used as a pattern on peach and black background. It consists of a repeat pattern of our signature four point stars, and would be gradually scaled down in size towards the end decremental evenly, the pattern should always be white and never be used in full opacity, and the pattern should always start from the corners of the layouts.

For peach background :
Color: White
Opacity: 50%
For black background:
Color: White
Opacity: 20%

In use

pattern sample 1

Video assets

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Intro with logomark

Download

Outro with logomark

Download

Button styles

To align with our overall designs, the button should be always be rounded edge in a pill form.

Primary button

Learn more

Normal state color: #9A348E
Hover color: #343232

Horizontal padding: 30px 

Vertical padding: 10px

Font: 16px Figtree regular
Text color: #ffffff

Secondary button

Learn more

Stroke: 1px #525252

Horizontal padding: 20px 

Vertical padding: 10px

Font: 16px Figtree regular

Text color: #525252

Hover effect: scale 105%


Misuse

Learn more
X Wrong padding
Learn more
X Wrong color
Learn more
X Wrong font

In use

button sample