Toggle Menu

Cyberinfrastructure for Network Science Style Guide

Logos

Want a light (white version) logo? Download this sheet.

Approved Colors for Scimaps

HEX: #33820DRGB: 51, 130, 13Web Color: OliveGreenDisc ID: 1Disc Name: Biology
HEX: #07D46DRGB: 7, 212, 109Web Color: EmeraldDisc ID: 2Disc Name: Biotechnology
HEX: #D30706RGB: 211, 7, 6Web Color: RedDisc ID: 3Disc Name: Medical Specialities
HEX: #55D4D2RGB: 85, 212, 210Web Color: SkyblueDisc ID: 4Disc Name: Chemical, Mechanical, & Civil Engineering
HEX: #0707D2RGB: 7, 7, 210Web Color: BlueDisc ID: 5Disc Name: Chemistry
HEX: #9B180FRGB: 155, 24, 15Web Color: MahoganyDisc ID:< 6/span>Disc Name: Earth Sciences
HEX: #D372D2RGB: 211, 114, 210Web Color: LavenderDisc ID: 7Disc Name: Electrical Engineering & Computer Science
HEX: #D39827RGB: 211, 152, 39Web Color: DandelionDisc ID: 8Disc Name: Brain Research
HEX: #D3D46DRGB: 211, 212, 109Web Color: CanaryDisc ID: 9Disc Name: Humanities
HEX: #8D1B18 RGB: 141, 27, 24Web Color: BrickRedDisc ID: 10Disc Name: Infectious Diseases
HEX: #8E1BCERGB: 142, 27, 206Web Color: MulberryDisc ID: 11Disc Name: Math & Physics
HEX: #D36E44RGB: 211, 110, 68Web Color: PeachDisc ID: 12Disc Name: Health Professionals
HEX: #D3D406RGB: 211, 212, 6Web Color: YellowDisc ID: 12Disc Name: Social Sciences
HEX: #000000RGB: 0, 0, 0Web Color: BlackDisc ID: 13Disc Name: Multidisciplinary
HEX: #A9A9A9RGB: 169, 169, 169Web Color: DarkGrayDisc Name: Unclassified
HEX: #FFFFFFRGB: 255, 255, 255Web Color: White

Typography

H1

Ex. This is a headline

h1 {
    font-size: 32px;
}

H2

Ex. This is a subheader

h2 {
    font-size: 25px;
}

Body

Ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris iaculis, urna vitae rhoncus scelerisque, ipsum odio fermentum risus, ut blandit ante nisl eu ante. Maecenas nec nunc sollicitudin, semper ante at, gravida urna. Etiam vehicula lorem a erat faucibus posuere.

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

Labels

Ex. Filter Label by Grants

.labels {
    font-weight: 600; 
    font-size: 16px;
}

Axis Text

Ex. 0M | 2M | 4M | 6M | 8M | 10M | 12M

.axis-text { 
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

Legend

Legend Button

.legend-container button:hover {
    background-color: #d8d8d8;
}

.legend-container button {
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    background: #eaeaea;
    color: rgba(0,0,0,0.87);
    border: .5px solid #afafaf;
    border-radius: 2px;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Legend Label

Nodes

.legend-item-label {
    color: rgba(0,0,0,0.87);
    font-size: 18px;
    font-weight: 600;
}

Legend Sub Label

Number of Grants

.legend-sub-title {
    font-size: 14px;
}

Legend Axis Label Numbers

19

13

1

.legend-label-number {
    font-size: 13px;
    text-align: right;
}

Example Visualizations