Embed Size (px)
Citation preview
Brand GuidelinesV 1.0
UPDATED FEb 8 2019
01. Logo
02. Color
03. Typography
04. Product Branding
05. Illustrations
06. Icons
07. Charts & Diagrams
08. Photography
09. More Elements
Table of Contents
3
8
14
18
22
25
28
34
37
Logo01.
The Basics
The primary Synthego mark can be used on it's own or with it's accompanying type lockup. Here are some general rules to follow when using it.
• Don't alter, rotate or modify the logo.
• Don't use the logo in colors other than black, white or the brand grey shades.
• Don't change the spacing between the logo and it's type lockup.
• Don't use the type lockup without the mark.
• Give the logo adequate space.
MARK WITH TYPE LOCKUP
MARK
4
LOgO
Spacing and Sizing
Give the logo space from other elements in layouts; the clear space around the logo should be at least half it's height. It should be larger than .25 cm in print and 12px in digital applications.
MINIMUM HEIgHT .25 CM OR 12PX
X
X/2
X
X/2
5
LOgO
Color
The logo should usually be displayed only in black or white, but can also be shown using any of the Synthego greys. It may be placed on other colors, gradients and photos but not have any other colors or gradients applied to it.
6
LOgO
Incorrect Usage
Change spacingDo not
Apply effectsDo not
OutlineDo not
Rotate or tiltDo not
Apply drop shadowsDo not
Apply colors or gradients other than the brand greys
Do notDistort or stretchDo not
Use the type lockup without the mark accompanying it
Do notChange the sizing of the mark relative to the type lockup
Do not
Change the typeface used with the mark
Do not
Synthego
7
LOgO
Color02.
Primary
Adenine Green and Cytosine Blue are the primary colors of the Synthego brand. They make up the gradients that follow and should be used for most applications. The three step colors in-between: Mostly Green, Half Teal and Essentially Blue should be used sparingly or only as needed.
In addition to being the primary color, Adenine Green is associated with CRISPRevolution products while Cytosine Blue is associated with Cell Engineering products. See more in the Product Branding section.
Adenine Green #20D340
R32 g211 b64
C70 M0 Y100 K0
PANTONE 802 C
Mostly Green #18D36b
R24 g211 b107
C69 M0 Y81 K0
PANTONE 7479 C
Half Teal #10D297
R16 g210 b151
C68 M0 Y58 K0
PANTONE 2240 C
Essentially Blue #08D2C2
R8 g210 b194
C66 M0 Y34 K0
PANTONE 2239 C
Cytosine Blue #00D1ED
R0 g209 b237
C63 M0 Y9 K0
PANTONE 311 C
9
COLOR
9
COLOR
Secondary
The secondary colors serve as backup when you need to make an element stand out or distinguish more elements in diagrams and charts. They should be used very sparingly. Phosphate Orange and Thymine Red also serve as UI colors for warnings and errors.
Morning Blue
Dawn Blue
Dusk Purple
Night Purple
Thymine Red
Phosphate Orange
#1EADF2
R30 g173 b242
#3C89F6
R60 g137 b246
#5964Fb
R89 g100 b251
#7740FF
R119 g64 b255
#F07700
R240 g119 b0
#b71C1C
R183 g28 b28
C67 M16 Y0 K0
PANTONE 306 C
C70 M45 Y0 K0
PANTONE 2727 C
C73 M65 Y0 K0
PANTONE 2130 C
C70 M73 Y0 K0
PANTONE 2665 C
C2 M65 Y100 K0
PANTONE 716 C
C19 M100 Y100 K11
PANTONE 2350 C
10
COLOR
10
COLOR
Greys
Black #000000
R0 g0 b0
Grey 900 #00151A
R0 g21 b26
C84 M67 Y63 K78
PANTONE 5393 C
Grey 700 #243b40
R36 g59 b64
C83 M61 Y58 K50
PANTONE 7546 C
Grey 500 #667377
R102 g115 b119
C63 M46 Y45 K13
PANTONE 444 C
Grey 800 #001F26
R0 g31 b38
C88 M67 Y61 K72
PANTONE 296 C
Grey 600 #48565A
R72 g86 b90
C72 M55 Y52 K29
PANTONE 445 C
Grey 400 #859093
R133 g144 b147
C51 M36 Y37 K2
PANTONE 430 C
Grey 300 #A3ADb0
R163 g173 b176
C38 M25 Y26 K0
PANTONE 429 C
Grey 200 #C2CACC
R194 g202 b204
C24 M14 Y16 K0
PANTONE 428 C
Grey 100 #E0E7E9
R224 g231 b233
C11 M5 Y6 K0
PANTONE 7541 C
Grey 50 #F4F9FA
R244 g249 b250
C3 M0 Y1 K0
PANTONE 9062 C
White #FFFFFF
R255 g255 b255
C0 M0 Y0 K0
C60 M40 Y40 K100
PANTONE bLACK 6 C
11
COLOR
Gradients
There are three gradients for the Synthego brand created using colors from the primary palette. The primary gradient for all general applications, the CRISPRevolution gradient for CRISPRevolution product applications and the Engineered Cell gradient for Engineered Cell product applications. Gradients should always be applied at a 45° angle.
Primary Gradient
CRISPRevolution Gradient Engineered Cells Gradient
ADENINE gREEN
CYTOSINE bLUE
45°
ADENINE gREEN
HALF TEAL
45°
HALF TEAL
CYTOSINE bLUE
45°
12
COLOR
12
COLOR
A C G TADENINE gREEN CYTOSINE bLUE gREY 800 THYMINE RED
10% OPACITY 10% OPACITY 5% OPACITY 5% OPACITY
Nucleotides
For applications that require color coding for nucleotides use the following brand colors and opacities as needed.
13
COLOR
Knockout
Cell Pool
Functio
nal CRIS
PR KO
Cells w
ith G
uaran
teed
Prote
in K
nockout.
TgAggAgCAgCggCCATCAgCCAgCTgCTgTATCTTgggg
AgACCTCAACgAgCTCCTgATgAggAgCAgCggCCATCAg
CCAgCTgCTgTATCTTggggAgACCTCAACgAgCTCCTgA
TgAggAgCAgCggCCATCAgCCAgCTgCTgTATCTTgggg
AgACCTCAACgAgCTCCTgATgAggAgCAgCggCCATCAg
CCAgCTgCTgTATCTTggggAgACCTCAACgAgCTCCTgA
Typography
Full Sta
ck
Genome
Engineerin
g03.
Eleva
te and si
mplif
y your
experience in
genera
ting
a knockout.
With a m
oney-back
guara
ntee on high editin
g
efficiency
combined w
ith su
perior g
uide
design, y
ou can now st
art yo
ur CRISP
R project
with co
mplete confidence
. We w
ill also
send
you w
ith a lis
t of r
ecommended PCR Prim
ers
and links
to our e
xperim
ental pro
toco
ls, to
help ensure
the su
ccess
of your e
xperim
ent.
Primary
Runda is the primary typeface of the Synthego brand. The Bold weight should always be used for titles and headings, do not use any other weight for main titles. Runda should also be used for most UI elements, buttons, labels, etc.
Runda
Bold
Medium
Normal
Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Take full advantage of CRISPR with sequence verified knockout clones
Take Full Advantage of CRISPR with Sequence Verified Knockout Clones
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
bOLD
USAgE NOTES
MEDIUM
NORMAL
LIgHT
Do not use sentence case for headings Do use title case
15
TYPOgRAPHY
Body Copy
Open Sans is the Synthego body copy typeface. It should only be used for longer blocks of text.
Open Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
bOLD
bOLD ITALIC
REgULAR
ITALIC
CRISPR is a powerful research tool, but learning and perfecting the revolutionary technology takes time.
Synthego’s Knockout Cell Pool takes the complexity out of CRISPR with the first-ever solution that provides guaranteed results in more than 700 human cell lines. In as few as four weeks, your engineered cell pool arrives with guaranteed 50% or better knockout of your gene.
Our knockout cell lines can achieve higher than 90% KO frequency and enable you to directly study gene function or easily isolate clonal cell lines.
Spend your time making discoveries, not optimizing genome engineering. All the benefits of CRISPR, one click away.
16
TYPOgRAPHY
Monospaced
Roboto Mono is the Synthego monospaced typeface. It should be used whenever whenever a monospaced typeface is needed, such as referencing nucleotides or code snippets. It can also be used as a small heading for sections, labels and more. When used as a heading it should always be regular weight, all caps and tracked out.
RObOTO MONO
ABCDEFGHIJKLMNOPQRSTUVWXYZ
AbCDEFgHIJKLMNOPQRSTUVWXYZ
bOLD
REgULAR TGAGGAGCAGCGGCCATCAG CCAGCTGCTGTATCTTGGGG AGACCTCAACGAGCTCCTGA
gUIDE SEQUENCES
USAgE NOTES
FULL STACK gENOME ENgINEERINgNot enough tracking
F U L L S T A C K g E N O M E E N g I N E E R I N gToo much tracking
Full Stack genome EngineeringDo not use lowercase letters, only all caps
FULL STACK GENOME ENGINEERINGDo not use bold for title and label treatments
FULL STACK gENOME ENgINEERINgJust right tracking
17
TYPOgRAPHY
Product Branding04.
Overview
Synthego products are grouped into families that contain related products: Engineered Cells and CRISPRevolution Kits. Bioinformatics Tools, being distinct in that they are software, have a different style.
PRODUCT FAMILIES
PRODUCTS & TOOLS
Engineered Cells
Gene Knockout Kit CRISPR Design ToolKnockout Cell Pool
Synthetic sgRNA Kit ICE AnalysisKnockout Cell Clone
Synthetic cr:tracrRNA KitAdvanced Cells
CRISPR Screening Libraries
Advanced RNA
CRISPRevolution Kits Bioinformatics Tools
19
PRODUCT bRANDINg
Family Usage
Product family icons should follow the same rules as the main Synthego mark when used (see Logo: Incorrect Usage) including only using the brand greys and not applying gradients. Variants that are not contained in a shape are provided for certain use cases, particularly when the icon needs to be on a dark background.
Consider using variants on dark backgrounds Apply shades of grey as needed Do not apply any gradients
UNCONTAINED VARIANTS
20
PRODUCT bRANDINg
Icon Anatomy
Product icons should be a consistent style of soft folded paper placed in a circle of the product's family gradient. The mark should extend outside the circle in at least one place. Icons should be designed on a grid of 72 units and the shapes of the mark should usually be 10 units thick. A one color variant should be provided only for use when the full color icon will not work such as monochrome screens or one-color printing.
PRODUCT FAMILY gRADIENT
MARK EXTENDS OUTSIDE CIRCLE
ONE COLOR VARIANT
SOFT SHADOWS
72X
10X
21
PRODUCT bRANDINg
Illustrations05.
The Stack
The "Stack" illustration is used to represent Synthego's "Full Stack Genome Engineering": Design, Edit, Analyze process.
OVERLAPPINg STACKS CAN bE USED AS A bACKgROUND PATTERN
23
ILLUSTRATIONS
Anatomy
One illustration style used throughout Synthego branding are abstract isometric forms used to represent products or concepts. Don't feel limited to this style for all use cases.
50% OPAQUE gRADIENT TO TRANSPARENT
CONSISTENT STROKE WIDTH
3D WIREFRAME STYLE
ISOMETRIC PROJECTION
24
ILLUSTRATIONS
Icons06.
UI Icons
For icons used in user interfaces choose from the Material Design Icons set at: materialdesignicons.com.
26
ICONS
Accent Icons
For icons used to accent marketing materials choose from the Orion Icon Set at: orioniconlibrary.com. Only use line icons with a 4px stroke on a 64px grid and squared corners and caps. Custom icons should match in style.
ICONS FROM THE ORION SET
CUSTOM ICONS IN MATCHINg STYLE
27
ICONS
Charts & Diagrams07.
Chart Anatomy
There is a good deal of data that needs to be represented in many materials. Follow these guidelines with creating them:
• Size and align charts consistently whenever possible so any two charts could potentially be placed side-by-side.
• Use components and styling from existing charts to ensure consistency.
• Only use brand colors for charts, if possible.
• If a chart relates to a specific product family use brand colors leaning towards that family.
• Always create charts as vectors.
• Create an alternate version of the chart that will work on dark backgrounds.
0
Wild Type Knockout Score
100
80
60
40
20
Knockout Cell Pool
100 101 102 103 104
Wild TypeNegative Control
Genotypic Knockout Protein Knockout
Kn
ock
ou
t S
core
(%
)
CONSISTENT SIZINg bETWEEN CHARTS
CHART RELATES TO CELLS SO CYTOSINE bLUE IS USED
CONSISTENT STROKES AND FONTS ON AXES
29
CHARTS & DIAgRAMS
Chart Examples
0
80
60
40
20
No sgRNA
sgRNA 1
sgRNA 2
Ind
el F
req
uen
cy (
%)
0
100
80
60
40
20
Ed
it F
req
uen
cy (
%)
WT C
lones
KI Clo
nes
NHEJ Only
Clones
sgRNA 1
sgRNA 2
Kn
ock
ou
t S
core
(%
)
0
100
80
60
40
20
160 180140 2000 20 40 60 80 100 120
Condition
“Optimized” Protocol7%
Synthego Protocol72%
Ind
el F
req
uen
cy (
%)
Vendor I
cr:tra
crRNA
Vendor D
cr:tra
crRNA
Synth
ego
cr:tra
crRNA
0
60
50
40
30
20
10
Syn
theg
o c
r:tr
acrR
NA
Ind
el F
req
uen
cy (
%)
Other Vendor cr:tracrRNA Indel Frequency (%)
Vendor D
Vendor I
0
100
80
60
40
20
1000 20 40 60 80
Ind
el F
req
uen
cy (
%)
0
100
80
60
40
20
DYRK4 PSTK TYRO3
sgRNA 1
sgRNA 2
sgRNA 3
Multi
plex
sgRNA 1
sgRNA 2
sgRNA 3
Multi
plex
sgRNA 1
sgRNA 2
sgRNA 3
Multi
plex
Mu
ltip
lex
Ind
el F
req
uen
cy (
%)
Singleplex Indel Frequency (%)
0
100
80
60
40
20
1000 20 40 60 80
Ind
el F
req
uen
cy (
%)
0
100
80
60
40
20
Target #1
Target #2
Target #3
Target #4
1000.1 1 10
RNP Concentration (µM)
Syn
theg
o s
gR
NA
Ind
el F
req
uen
cy (
%)
Other Vendor cr:tracrRNA Indel Frequency (%)
Vendor D
Vendor I
0
100
80
60
40
20
1000 20 40 60 80
30
CHARTS & DIAgRAMS
Diagrams
Diagrams explaining processes and concepts should be as simple and clear as possible, without extraneous decoration. Follow these guidelines with creating them:
• Avoid using overly complex illustrations, simplify wherever possible.
• Use components and styling from existing diagrams to ensure consistency.
• Only use brand colors as much as possible.
• Always create diagrams as vectors.
2. RNP FormationCas9 and sgRNA form a ribonucleoprotein (RNP).
Cas9
sgRNA RNPCas9 sgRNA crRNA:tracrRNA
1. Components of CRISPR-Cas9Cas9 protein and guide RNA, either single guide RNA (sgRNA) or crRNA:tracrRNA.
5'
3'
~20 nt
gRNA Target Sequence
crRNA
tracrRNA
Linker Loop
5'
5'
3'
3'
~20 nt
gRNA Target Sequence
crRNA
tracrRNAOR
3. Cas9-Mediated Double-Strand BreakCas9 cleaves targeted DNA sequence and causes a double-strand break (DSB).
5'3'
3'NCC
NGG 5'
DSB
Cas9
sgRNA 5'
3'
PAMTarget DNA
3'
5'
4a. NHEJ RepairNon-homologous repair pathway that leads to an insertion or
deletion of nucleotides, potentially resulting in a gene knockout.
Insertion
5'
3'
3'
5'
Deletion
5'
3'
3'
5'
OR
4b. Homology-Directed RepairAddition of a donor DNA repair template with a new sequence
flanked by homology arms leads to a gene knock-in.
Knock-In Sequence
Homology Arms
Donor DNATemplate
5'
3'
3'
5'
Knock-In Sequence
5'
3'
3'
5'
31
CHARTS & DIAgRAMS
Diagram Do's and Dont's
Do not use non-brand colors and styles inconsistent with other diagrams.
Avoid complexity in elements of the diagram.
Avoid complexity in elements of the diagram.
Avoid introducing new styles of elements, when they already exist in other diagrams.
Correct usage of brand colors and styles such as arrows, scissors and DNA
Simplify where possible.
Simplify where possible.
Reuse styles and elements as much as possible.
Cas9
gRNA
Target & Cleavage
Transcription
Homing gRNA Locus
Genomic DNA
Guide Sequence PAM Scaffold
Cells Electroporation/Nucleofection Reagent
Add to RNPs(gRNA/Cas9)
Nucleofector Electroporator
+
OR
Before Electric Pulse Electric pulse causes pores to formin membrane, RNPs enter cell
Pores seal withRNPs inside cell
ApplyElectrical
Pulse
Repair
+
+
++
++
+
+
+
+
+
+
+
+
+
- -
-
-
-
-
-
- -
-
-
-
- - -
-
dCas9 Activator Gene Expressed
Promoter
dCas9 Inhibitor Gene Silenced
CRISPRi
CRISPRa
Promoter
AGGCGTATATGTTGTGAGCCTCACT
1. Design & Synthesize gRNA
KO Cell Pools2. Transfect Cells to Generate KO Cell Pool 3. Analyze Editing & KO E�ciency
4. Assays GenerateClonalCell Lines
Cells with aMix of Indels
Cell Culture
RNPgRNA
gRNA
Cas9
or
Design & Synthesize gRNA1 Transfect Cells to Generate KO Cell Pool2 Analyze Editing & KO Efficiency3 Conduct Assays4
ATGTCGTAGCGCCGTCGTGAGCTCCGCTGCGAGCTAAGCTGCGATCTGCGAGCCCCTATACTA
gRNA
Cas9
gRNA RNP
Cell Culture
Cell with a MixOf Indels
Assays Generate Clonal Cell Lines
OR
32
CHARTS & DIAgRAMS
Diagram Examples
Design & Synthesize gRNA1 Transfect Cells to Generate KO Cell Pool2
Isolate Single Cells &Expand Clones5 Genotype Clones6 Choose & Expand
Desired Clones7 Assays or Storage9
Analyze Editing & KO Efficiency3 Conduct Assays4
ATGTCGTAGCGCCGTCGTGAGCTCCGCTGCGAGCTAAGCTGCGATCTGCGAGCCCCTATACTA
gRNA
Cas9
gRNA RNP
Cell Culture
Cell with a MixOf Indels
Assays Generate Clonal Cell Lines
OR
Validate Clones8
e.g. FACS, RT-qPCR, ELISA Western blot
Assays Store at -80°C
OR
Chemically Modified sgRNAs
cr:tracrRNA
High Percentage of Wild Type
High Efficiency Indels
High Probability of Fragment Deletions
Single gRNAs
Random Indels,Some Wild Type
Multiplexed gRNAs Highest Probability of Gene Knockout
High Percentage of Wildtype
Intr
od
uct
ion
of
gR
NA
2. RNP FormationCas9 and sgRNA form a ribonucleoprotein (RNP).
Cas9
sgRNA RNPCas9 sgRNA crRNA:tracrRNA
1. Components of CRISPR-Cas9Cas9 protein and guide RNA, either single guide RNA (sgRNA) or crRNA:tracrRNA.
5'
3'
~20 nt
gRNA Target Sequence
crRNA
tracrRNA
Linker Loop
5'
5'
3'
3'
~20 nt
gRNA Target Sequence
crRNA
tracrRNAOR
3. Cas9-Mediated Double-Strand BreakCas9 cleaves targeted DNA sequence and causes a double-strand break (DSB).
5'3'
3'NCC
NGG 5'
DSB
Cas9
sgRNA 5'
3'
PAMTarget DNA
3'
5'
4a. NHEJ RepairNon-homologous repair pathway that leads to an insertion or
deletion of nucleotides, potentially resulting in a gene knockout.
Insertion
5'
3'
3'
5'
Deletion
5'
3'
3'
5'
OR
4b. Homology-Directed RepairAddition of a donor DNA repair template with a new sequence
flanked by homology arms leads to a gene knock-in.
Knock-In Sequence
Homology Arms
Donor DNATemplate
5'
3'
3'
5'
Knock-In Sequence
5'
3'
3'
5'
Microscope
MicroinjectorMicroinjection
Plate
MicroinjectionNeedle
Nucleus
Cytoplasm
RNPs(gRNA/Cas9)
RNPs(gRNA/Cas9)
LipofectionReagent
RNPs
Endocytosis
Release RNPs
Liposome
Add Cells
+ + =
Nucleus
Cytoplasm
Altered gene spread by normal inheritance
50% chance of passing altered gene via normal inheritance
WTAltered allele
Altered allele
Altered WT
Altered gene spread by gene drive
>50% chance of passing altered gene via gene drive
WTDrive
Altered allele
Drive WT HDR Repair Drive + altered allelecopied into WT
gRNA
Cas9
33
CHARTS & DIAgRAMS
08.Photography
Style
Keep photographs in a consistent style, for the most part they should follow these guidelines.
• Use black and white photos with high contrast.
• Use photos featuring people when possible.
• Apply gradient overlays to ensure text on top of photos remains readable.
• Feather edges of photos to integrate them into layouts.
gREY 900
gREY 900 TO TRANSPARENT gRADIENT
DESATURATED 50% OPACITY
LUMINOSITY bLEND MODE
35
PHOTOgRAPHY
Examples
36
PHOTOgRAPHY
More Elements09.
Genome Engineer Badge
The genome engineer badge identifies Synthego customers and team as awesome genome engineers. It is mostly commonly used on the back of t-shirts but can be found and used elsewhere. The only guideline for it's use:
• Only use the official genome engineer badge
38
MORE ELEMENTS
38
MORE ELEMENTS
