Brand

Wordmark

The plural wordmark is our primary logo.

plural-logo-wordmark-vector-blk.svg

Logomark

Our logomark creates a signature shape,
evocative of our name,
the letters p and l
an upwards path ⬈
a playful machine ⚙️
an eye
camera
radio
window
and portal

We use the reversal of our logomark for Plural Console.

A variety of colorways have been created for all forms of the logomark.

plural-logo-logomark-
01
 
 

plural-logo-logomark-
02-
reversal
 

plural-logo-logomark-
03-
on-blk
 

plural-logo-logomark-
04-
on-blk-
knockout

plural-logo-logomark-
05-
reversal-on-blk
 

plural-logo-logomark-
06-
reversal-on-blk-
knockout

 

plural-logo-logomark-
color-
3351f2-
01
 
 

 

plural-logo-logomark-
color-
3351f2-
02-
reversal
 

 

plural-logo-logomark-
color-
3351f2-
03-
on-blk
 

 

plural-logo-logomark-
color-
3351f2-
04-
on-blk-
knockout

 

plural-logo-logomark-
color-
3351f2-
05-
reversal-on-blk
 

 

plural-logo-logomark-
color-
3351f2-
06-
reversal-on-blk-
knockout

 

plural-logo-logomark-
color-0022b2-
01

 

 

plural-logo-logomark-
color-0022b2-
02-
reversal
 

 

plural-logo-logomark-
color-0022b2-
03-
on-blk
 

 

plural-logo-logomark-
color-0022b2-
04-
on-blk-
knockout

 

plural-logo-logomark-
color-0022b2-
05-
reversal-on-blk
 

 

plural-logo-logomark-
color-0022b2-
06-
reversal-on-blk-
knockout

Logomark Animations

What follows are variations of plural-logomark-animation01.

Animations are built at 100px native, and can be successfully scaled up and down via CSS.

In the first set, the logomark behaves like a BUTTON, with animation triggered on hover:


is-button:
 
color blk
classes is-button downres4x
color wht
classes is-button downres4x
color #3351f2
classes is-button downres4x
color blk
classes is-button
color wht
classes is-button
color #3351f2
classes is-button
color blk
classes is-button upres2x
color wht
classes is-button upres2x
color #3351f2
classes is-button upres2x

Our second set LOOPS on repeat, behaving like a loading indicator for example.

 


looping:
 
color blk
classes looping downres4x
color wht
classes looping downres4x
color #3351f2
classes looping downres4x
color blk
classes looping
color wht
classes looping
color #3351f2
classes looping
color blk
classes looping upres2x
color wht
classes looping upres2x
color #3351f2
classes looping upres2x

Combined Lockup

Our wordmark is our primary logo. However there may be cases where Plural requires a lockup that combines our word- and logo-marks. When combining these elements, we use color to differentiate the two.

Plural Console

Plural Console, our admin interface, uses the inverse or reversal of our logomark as its logo.




Our Plural Console logo begins a pattern for follow-on products and Plural brands. The following exhibit demonstrates notional extensions of the system.

Wordmark Alt: Abbreviated

We have formalized an abbreviated form of our wordmark, reserved for special cases.

Favicons


We created two full sets of favicons for both versions of our logomark. Each set contains 30+ output files at a variety of resolutions, targeting a range of devices and platforms.

For our key browser favicons (16x16 and 32x32), we tuned icons in Photoshop to better fit the pixel grid.

You can download an archive of the favicon assets.

favicons@2021-07-22.zip

favicon-16x16.png


favicon-32x32.png


favicon-96x96.png


favicon-16x16.png


favicon-32x32.png


favicon-96x96.png


Infographics

The following notional exhibits demonstrate a system for Plural infographics.

The first set renders a circle graph module in a variety of colorways, from light to dark. We look at graphs using our Plural blues, as well as a full-color treatment with numerous color codes.

The remaining exhibits express our brand's stylized treatment of simple standalone infographics.

Color

Our color system solves challenges specific to the nature of the Plural as a platform and CLI. Plural colors are designed to work in light and dark modes for example.

Our base is plrl blk.
Blue is our key color.

Additional colors are used for code highlighting, illustrations and infographics.

~plural-colors-vector-source.svg
● plrl blk #000b11 ● plrl blk #000b11 ● plrl blu blk #111323 ● plrl blu blk #111323 ● plrl tone medium #c9cdd1 ● plrl tone medium #c9cdd1 ● plrl tone light #ebebed ● plrl wht #ffffff ● plrl blu drk03 #001b4c ● plrl blu drk02 #002068 ● plrl blu drk01 #001b8c ● plrl blu #0022b2 ● plrl blu light01 #3351f2 ● plrl blu light02 #e1ebff ● plrl blu alt drk03 #002933 ● plrl blu alt drk02 #004659 ● plrl blu alt drk01 #006e96 ● plrl blu alt #0090c4 ● plrl blu alt light01 #00c9ff ● plrl blu alt light02 #c0f6ff ● plrl green dark03 #002d15 ● plrl green dark02 #004422 ● plrl green dark01 #006032 ● plrl green #008e47 ● plrl green light01 #00ed76 ● plrl green light02 #ccffe5 ● plrl teal dark03 #003321 ● plrl teal dark02 #009362 ● plrl teal dark01 #00b57d ● plrl teal #00e5a3 ● plrl teal light01 #00ffb0 ● plrl teal light02 #ccffee ● plrl orange dark03 #331c00 ● plrl orange dark02 #b76800 ● plrl orange dark01 #e88900 ● plrl orange #ef9300 ● plrl orange light01 #ff9d00 ● plrl orange light02 #ffeacc ● plrl purple dark03 #290033 ● plrl purple dark02 #650077 ● plrl purple dark01 #830096 ● plrl purple #960ea5 ● plrl purple light01 #df00ff ● plrl purple light02 #f7ccff ● plrl red dark03 #300006 ● plrl red dark02 #7f0009 ● plrl red dark01 #b52d31 ● plrl red #dd2c39 ● plrl red light01 #ff2756 ● plrl red light02 #ffd9df ● plrl tone light #ebebed ● plrl wht #ffffff ● plrl blu spectrum 01 #000b11 ● plrl blu spectrum 02 #0f1325 ● plrl blu spectrum 03 #001b4c ● plrl blu spectrum 04 #002068 ● plrl blu spectrum 05 #0023b9 ● plrl blu spectrum 06 #183eb7 ● plrl blu spectrum 07 #007cba ● plrl blu spectrum 08 #00b5e5 ● plrl blu spectrum 09 #00cfff ● plrl blu spectrum 10 #88f9ff ● plrl blu spectrum 11 #bbffff ● plrl blu spectrum 12 #e3fffe

We conclude with a color animation study. Below is a looping animation involving the combination of four Plural logos, in four Plural colors, blended using the multiply mode, ultimately forming our Plural black. Hover over the animation to expand the layers.

Cards

Plural cards give curious attention to our logomark, using card backs to reveal the knockout shape.

An alternative concept uses card-backs to highlight key applications that plural supports.

Plural_Exhibits_●●●_Business_Cards_02_Back-Product-Scroll.png

Open Graph

Our open-graph concept considers how blog posts and Plural app homepages will be key.

Plural_Exhibits_●●●_OG_03_iMessage_Group-Chat.png





Open-graph art for key apps on Plural:

OG_01a
OG_01b
OG_01c
OG_01d





For airflow, rabbitmq, luigi and linkerd, we pick up each app's brand color.

Our OG art begins as a square. Our square is designed to be cropped to a variety of aspect ratios across the social web. For example, Facebook will crop our square in this way:



 

Social: Twitter


Plural_Exhibits_●●●_Digital_Twitter_Pinned-Tweet


Plural_Exhibits_●●●_Digital_Twitter

Social: Instagram


Plural_Exhibits_●●●_Insta-Grid_On-Mobile-Basics

Misc Exhibits