Watershed_BrandGuidelines_Exploration

Watershed Bio Brand Guidelines 07.15.2024

Welcome to

Watershed Bio

Watershed Bio Brand Guidelines

Watershed is the complete solution for biological

data analysis, discovery, and collaboration. Our

platform gives every lab the power of a dedicated

computational core in one integrated environment,

purpose-built for biology.

2

Mission & Core Values


Our Mission defines what we are working toward as a

company, and our Core Values define how we get there.

Core Values serve as a common understanding of what

to expect from each other and from ourselves. Core

Values create the framework for decision-making and

interaction at every level of our organization.

Empathy: Have a deep understanding of the feelings, thoughts,

and experiences of our users, with their different needs and

backgrounds, and of our coworkers, with their different skill sets.

Responsibility: Have ownership over our work, and be proactive

with our work instead of needing to be reminded about it.

Candor: Be proactively honest and transparent to enforce a

culture of candor. Candor is essential for building trust with clients.

Efficiency: Minimize the waste of resources and time. Reduce the

number of iterations required to complete our work by minimizing

technical debt, planning out work, and balancing tradeoffs in

short-term and long-term project goals.

3

1.0

Logo

1.1 Logo

1.2 Identity Lockup

1.3

1.4

Clear Space

Logo Usage

Contents

2.0

Colors

2.1 Color Palette

2.3

Color & Logo


3.0

Typography

4.0

Brand Visuals

2.2 Gradients

3.1 Typography

4.1

Brand Attributes

4.3

Icon Patterns

4.2

Icon Elements

4.4

Photography

5.0

Platform Cohesion

5.1

Illustrations

5.3

Iconography

4

5.2

Platform UI

5.4

Visual Examples

1.1 Logo

1.2 Identity Lockup

1.3

1.4

Clear Space

Logo Usage


5

1 . 1

Logo

The Watershed logo is

comprised of a logotype

and our signature W icon.


6

Icon

#8D63CE

141 99 206

32 52 0 19

Logotype

#0F091A

15 9 26

42 65 0 90

1 . 2

Identity Lockup

Primary

Watershed utilizes both a primary

and secondary identity lockup.


Secondary

7

1 . 3

Clear Space

Ensure clear space guidelines are

followed when using the Watershed logo.

Note: If icon is used as a pattern or

design element, clear space guidelines

can be ignored. All other uses must

adhere to 1/4 icon width of clear space.

x - height


1/4 icon width

8

1 . 4

Logo Usage

9Watershed Bio Brand Guidelines

Don’t distort or warp the logo in any way.

02

Don’t overlap icon and logotype. Icon and

logotype can be used as separate elements.

Don’t change the logo’s color, outside

of Watershed’s main color palette.

Don’t outline the full logo. Can outline

the icon at bigger display sizes.

Colors

2.1 Color Palette

2.2

Gradients

2.3

Color & Logo


10

2 . 1

Color Palette

Primary Colors

Purple has always been an integral

color to the Watershed brand.

Watershed Purple should be used

sparingly, highlighting only the most

important aspects of a design/page.

Avoid using 100% white or black when

working with type. Instead opt for a

Neutral or Dark Gray.

Watershed Purple

Deep Violet


#8151C6

129 81 198

27 46 0 22

Type Colors

#0F091A

15 9 26

4 7 0 90

Neutral Gray

Dark Gray

#F8F9FA

248 249 250

1 0 0 2

#212529

33 37 41

3 2 0 48

11

2 . 2

Gradients

Gradients can be created

using Watershed’s core colors

and used in small quantities

throughout design materials.

Core Color Gradients

#F6EEFF

0

#E6DAF7

1

#CAB4E9

2

#AB8ADA

3

#9267CE

4

#8151C6

5

#7945C4

6

#6837AD

7

#5C2F9C

8

#4F288A

9


#f8f9fa

0

#f1f3f5

1

#e9ecef

2

#dee2e6

3

#ced4da

4

#adb5bd

5

#868e96

6

#495057

7

#343a40

8

#212529

9

Examples

12

2 . 3

Color & Logo

01

Please refer to the guide on

this page when using the

Watershed logo on different

colored backgrounds.


02 03

13

03

Typography

3.1 Typography


14

3 . 1

Typography

Inter is the primary typeface

used throughout Watershed’s

brand materials and UI

design system.

Inter

Fonts

Regular

Extra Light


AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqR

rSsTtUuVvWwXxYyZz0123456789!@#$

%^&*()+=?><

Bold

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQq

RrSsTtUuVvWwXxYyZz0123456789!@#$

%^&*()+=?><

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRr

SsTtUuVvWwXxYyZz0123456789!@#$

%^&*()+=?><

Italic

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqR

rSsTtUuVvWwXxYyZz0123456789!@#$

%^&*()+=?><

Example

Ready for you

Watershed moment?

The biocomputing platform by bioinformaticians, for bioinformaticians.

Headlines are commonly set in Inter Regular

or Bold. Subheadings in Regular or Medium

and Body Copy in Regular or Light.

15

04

Brand Visuals

4.1

4.2

4.3

4.4

Brand Attributes

Icon Elements

Icon Patterns

Photography


16

4 . 1

Brand Attributes

Watershed is a modern scientific

platform that emphasizes both

aesthetics and function.

Visual designs reflect the brands

core attributes: Solid, Symbiotic,

Smooth and Simple.

Solid

A reliable platform

and solution.


Symbiotic

Emphasis on a mutually beneficial

relationship within an ecosystem

(Watershed community).

Smooth

Minimal friction (high flexibility)

when interacting with Watershed.

Simple

A focus on essential elements

in complexity.

17

4 . 2

Icon Elements

The W icon can be taken apart and used

to create further design elements. These

can either be under the category of

recognizable shapes including targets/

graphs/sliders etc or combined to create

more abstract shapes.

Recognizable


Abstract

Bioinfx Biology Bridging

the gap

Freedom

to grow

Above is an example guide on how

individual icon pieces could be

abstracted and given meaning.

This is, however, open to further

interpretation and artistic license.

18

4 . 3

Icon Patterns

Pieces of the W icon may

also be used to create

repeating patters.


19

4 . 4

Photography

Pillars

Photography of the Watershed

team, tech and research is

important to the brand and

should be used frequently

through-out marketing and

design materials.

Stock photography may also

be used when no internal

images are available.

Community

Highlight our team and

life science community.


Photography should be black

and white with a slight purple

overlay. See specs below:

#4F288A

20% Opacity Overlay

Note: One of Watershed’s

brand attributes is “Smooth.”

As such avoid any sharp or

angular corners when

working with photography.

Technology

Emphasize Watershed’s

infrastructure and webbased

platform.

02

Science

Include data visualizations

and visual references to

scientific research.

20

05

Platform Cohesion

5.1

5.2

5.3

5.4

Illustrations

Platform UI

Iconography

Visual Examples


21

5 . 1

Illustrations

The Watershed platform is

represented by clean shapes and

delicate outlines. Showcasing our

analytic capabilities without

directly needing to reveal our UI.

Single Cell RNA-Seq

Bulk ATAC-Seq

WGCNA

TCGA

Tabula Sapiens

Isoform Analysis

Grouping

Sample

Readout

Fold Enrichment

Gene List

APOC1 CPHA2 TP53 KRT19 KRAS EGFR ···

Threshold

...

Custom

Terminal

Computing Resources

CPU

from watershed import *

from plotnine import ggplot, aes, geom_bar

import polars

genome = load_genome( "hg38" )

fastqs = load_sequence( "cd47_project_fq" )

metadata = load_data( "metadata" )

alignment = star_solo(genome, fastqs)

deg = edgeR(alignment, metadata)

(ggplot(deg.files("sig_results"), aes( "Sample", "fold_enrichment")) + geom_bar())


Memory

Single Cell RNA-Seq

Bulk ATAC-Seq

WGCNA

TCGA

Grouping

Readout

Sample

Fold Enrichment

Gene List


Tabula Sapiens

Threshold

Isoform Analysis

...

Custom

Terminal

Computing Resources

CPU

Memory



import polars







22

5 . 2

Platform UI

UI Examples

Elements from our UI design

system are used within our wider

branding. Creating a cohesive

Watershed experience whether

visiting the website, interacting

with us on socials or working

within the platform.

Primary

Ghost


Button Hierarchy & Hover State

Default Hover Active Disabled

Primary Secondary Ghost Label 1 Label 2

23

ÉÈÇÅÇÃÆÂÁÀÄ

IED

¾¼=>=#!"º)¨:²!=®:=&!:Å¾:¤% +#>:

¨ (%®:+ :"$ =:"ºº$+%¤:(=:=&!:

ž+¤%!: !">¤+>#«

'%#&$"!

°+%ž:()%:²&$$:¼=®º=>%>(:$+ !"!¨:

Ã››¹Ÿ¸œœ¹ÃÁŸ¹ÃÁ¿¥»Á³Ÿ¬»Á¯

,+#)(

§=:¤%%$=º:¼& (=®:+¼=> :º$%" %:

²=$$=ž:()+ :¤% +#>:º!=¼% ·

?&=(=>%:

96543720/1.4-

˜ ¡("!(:¤!"ž+>#:+>:()%::::::

'%#&$"!:ž%+#)(–:ž+():•º”:

(!=±%–:!=&>¤%¤:¼"º –:">¤:

!=&>¤%¤:“=+> ª

˜ §)%:¤%²"&$(:¼=!>%!:!"¤+& :+ :

º”: &(:"!+% :¤%º%>¤+>#:=>:

®%("º)=!ª

˜ ‘=$$=ž:()%: º%¼ :=>:()+ :º"#%:

²=!:¼& (=®:º”:!% &+!%®%>(

DORNM

\[:X:\[YW

rweŠd

\b:X:\bYW

ƒ‚€cwd

\\:X:\\YW

xtwnwcro

\^:X:\bYW

jcafiecYd

\b:X:\^YW

5 . 4

Visual Examples

Examples using

Watershed brand visuals

including: logos, icons

and platform illustrations.


Single Cell RNA-Seq

Bulk ATAC-Seq

WGCNA

TCGA

Tabula Sapiens

Isoform Analysis

...

Custom

Terminal

Computing Resources

CPU

Memory



import polars






Grouping

Sample

Gene List

Threshold


Readout

Fold Enrichment


Single Cell RNA-Seq

Bulk ATAC-Seq

WGCNA

TCGA

Tabula Sapiens

Isoform Analysis

...

Custom

Terminal

Computing Resources

CPU

Memory



import polars






Grouping

Sample

Gene List

Threshold


Readout

Fold Enrichment


25

For more information about Watershed’s brand

guidelines and design system please contact:

Siobhan Keegan (Marketing Designer)

Siobhan.keegan@watershed.bio

Watershed Bio Brand Guidelines 07.15.2024

Watershed_BrandGuidelines_Exploration

Transform your PDFs into Flipbooks and boost your revenue!

Delete template?

Save as template ?