07 Visuals


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


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


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

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: 6980DA
HEX: F96167
image sample 3

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


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


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
Shadow color

In use

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


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


Outro with logomark


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%


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

In use

button sample