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