DATASCIENCEPRO
Design Manual
Data Science Pro | DESIGN MANUAL
Logotype
Typography
Components
Horizontal
Typefaces
Form elements
Epigraph
Styles
Section icons
Use
Activity icons
Grid system
Card anatomy
Palette
Desktop
Card states
Colors
Laptop
Card identity
Accessibility
Tablet
Card collection
Light color scheme
Smartphone
Dark color scheme
Logotype | HORIZONTAL
DATASCIENCEPRO
Brand mark
Logotype
Logotype | EPIGRAPH
DATASCIENCEPRO
Logotype | USE
DATASCIENCEPRO
DATASCIENCEPRO
DATASCIENCEPRO
DATASCIENCEPRO
DATASCIENCEPRO
DATASCIENCEPRO
Palette | COLORS
Text
R 13
Crossroads
G 16
B 28
R 201
G0
Atlas
B 119
R 37
People
G 193
B 201
R 135
G 102
B 172
Palette | ACCESSIBILITY
Text
INTENSITY
Crossroads
WCAG 2.0 AA
WCAG 2.0 AAA
Large
Small
Large
Small
100%
○
○
○
○
95%
○
○
○
90%
○
○
80%
○
70%
INTENSITY
Atlas
WCAG 2.0 AA
WCAG 2.0 AAA
Large
Small
Large
Small
100%
○
○
○
○
○
95%
○
○
○
○
○
90%
○
○
○
○
○
80%
○
○
○
○
○
70%
60%
○
○
○
○
50%
○
○
○
40%
○
○
30%
○
20%
INTENSITY
People
WCAG 2.0 AA
WCAG 2.0 AAA
Large
Small
Large
Small
100%
○
○
○
○
○
95%
○
○
○
○
○
90%
○
○
○
○
○
80%
○
○
○
○
○
70%
60%
○
○
○
○
○
50%
○
○
○
○
○
40%
○
○
○
○
○
30%
○
○
○
○
○
20%
10%
○
○
○
○
5%
○
○
○
0%
○
○
○
INTENSITY
WCAG 2.0 AA
WCAG 2.0 AAA
Large
Small
Large
Small
100%
○
○
○
○
○
95%
○
○
○
○
○
○
90%
○
○
○
○
○
○
○
80%
○
○
○
○
○
○
○
○
70%
○
○
○
○
60%
○
○
○
○
60%
○
○
○
○
○
50%
○
○
○
○
50%
○
○
○
○
○
○
40%
○
○
○
○
40%
○
○
○
○
○
○
○
30%
○
○
○
○
30%
○
○
○
○
○
○
○
○
20%
○
○
○
○
20%
○
○
○
○
10%
○
○
○
○
10%
○
○
○
○
10%
○
○
○
○
○
5%
○
○
○
○
5%
○
○
○
○
5%
○
○
○
○
○
0%
○
○
○
○
0%
○
○
○
○
0%
○
○
○
○
Palette | LIGHT COLOR SCHEME
PURPLE
AQUA
GRAY
distribution: 5%
distribution: 5%
distribution: 5%
value: people
value: atlas
value: background
hex: #8766ac
hex: #25c1c9
hex: #565f6e
BORDEAUX
WHITE
LIGHT GRAY
DARK GRAY
distribution: 5%
distribution: 45%
distribution: 20%
distribution: 15%
value: crossroads
value: text
value: text
value: background
hex: #c90077
hex: #ffffff
hex: #f2f3f5
hex: #0d101c
Palette | DARK COLOR SCHEME
PURPLE
AQUA
GRAY
distribution: 5%
distribution: 10%
distribution: 20%
value: people
value: atlas
value: background
hex: #8766ac
hex: #25c1c9
hex: #565f6e
BORDEAUX
WHITE
LIGHT GRAY
DARK GRAY
distribution: 5%
distribution: 10%
distribution: 10%
distribution: 40%
value: crossroads
value: text
value: text
value: background
hex: #c90077
hex: #ffffff
hex: #f2f3f5
hex: #0d101c
Typography | TYPEFACES
The quick brown fox
jumps over the lazy dog
01234567890
Lato Black, for headings and interface elements
The quick brown fox
jumps over the lazy dog
0123456789
Lato Regular, for system messages
and interface elements
But I must explain to you how all this mistaken idea of denouncing of a
pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great
explorer of the truth, the master-builder of human happiness.
Merriweather Regular, Bold and Italic for body copy
But I must explain to you how all this mistaken idea of
denouncing of a pleasure and praising pain was born and I
will give you a complete account of the system, and expound
the actual teachings of the great explorer of the truth.
Hack Regular for code
Typography | STYLES
Heading 1
But I must explain to you how all this
Lato Black, 36/39pt
mistaken idea of denouncing of a pleasure
Heading 2
Lato Black, 26/26pt
and praising pain was born and I will give
“
You can have data without information, but
you cannot have information without data.
you a complete account of the system, and
– Daniel Keys Moran
expound the actual teachings of the great
explorer of the truth, the master-builder of
Heading 3
human happiness.
Unordered list
Lato Black, 22/26pt
This text has emphasis
Heading 4
Lato Black, 18/26pt
HEADING 5
This text has strong emphasis
Link
Focus
Lato Black, 16/26pt, all-caps
Merriweather regular, 16/26pt
Heading 6
Lato Black, 16/26pt
Active
Visited
Ordered list
Item
1. First item
Another item
2. Second item
A further item
3. Third item
Grid | DESKTOP
row width
columns
column width
column gutter
baseline
1186pt
12
75pt
26pt
13pt
Grid | LAPTOP
row width
columns
column width
column gutter
baseline
958pt
12
56pt
26pt
13pt
Grid | TABLET
row width
columns
column width
column gutter
baseline
712pt
9
56pt
26pt
13pt
Grid | SMARTPHONE
row width
columns
column width
column gutter
baseline
294pt
6
39pt
12pt
12pt
Components | FORM ELEMENTS
Field with label
Placeholder value
Focused field
Field with error
Invalid input
Please make sense of this mess it arcu a consectetur cum
nec cubilia feugiat condimentum condimentum ac ac
parturient vestibulum etiam conubia hac parturient
Buttons
Filled field
BUTTON
BUTTON
BUTTON
BUTTON
Correct value
idle
Disabled field
hover
active
disabled
Primary buttons
Read-only value
BUTTON
idle
BUTTON
hover
BUTTON
active
BUTTON
disabled
Components | FORM ELEMENTS
Combo box
Datepicker from
dd/mm/yyyy
One of many values
File input
path/to/file.extension
Textarea
Please be concise, or else!
Radio buttons
UPLOAD
to
dd/mm/yyyy
Checkboxes
Only one value
Multiple values
Focused
Focused
Selected
Selected
Unselected
Also selected
Disabled
Disabled
Components | SECTION ICONS
Crossroads
GROW as a Data Scientist
Atlas
LEARN about Data Science
People
MEET the Community
eLearning Platform
Encyclopedia
Members
Virtual Lab
Expert articles
Community managers
Examining Center
University courses & paths
Community admins
DS Competence Benchmark
WORK as a Data Scientist
Challenges
Job Center
ASK for Consultancy / Support
Organizations
LOOK at Data Scientists
MP
Career profiles
Interviews
My profile
TALK with the Community
Live Discussion
Components | ACTIVITY ICONS 1
ARTICLES
COURSE
VIRTUAL LAB
CHALLENGE
MY STUFF
Write an article
Insert a file
Insert a file
Provide a challenge
Define A Course
Add to favourites
Go to chapter
Go to experiments
Contact chorally
Manage My Articles
Print article
Go to exercise
Go to other resources
Ask to an admin
Manage My Challenges
Share article
See last projects
Send a message
Consult other manager
Manage My Discussions
Search article
Send a message
Look at similar projects
Look at similar course
Go to videos
Manage My Favorites
Components | ACTIVITY ICONS 2
COMMUNITY
JOB POST
ORGANISATION
ATLAS COURSE
/MEMBER
DESCRIPTION
Contact XY
Go to website
Get a certification as DS
Contact XY
Download the application form
Visit the website
Ask for information
Know more about DS
Ask for a consultancy
Apply for the position
Get driving directions
Get in touch with students
Get in touch with DS
Go to community
Go to company website
ATLAS CAREER PROFILE
MANAGER
managers guidelines
Go to entire program
DISCUSSION
Discover other profiles
Look for common connection
Ask info
Get recommended books
ATLAS ITEM
Post a comment
Insert a new discussion
Receive a notification
when someone replies
Add to favourite
Explore other
master programs
Print the item
Explore other job posting
Components | CARD ANATOMY
39
Card identity | 4pt border
primary color
Card icon| 39+39pt
background primary color
foregroud contrast color
13
Tag | primary color
Lato black 14/26pt
13
39
#tag | 12 Feb 2016
Forrester report: graph
databases market
Giants like Google and Facebook pioneered
Card body| content
39
the graph database revolution, and other
Date | gray
Lato regular 13/26pt
Heading | dark gray
Lato black 21/26pt
123 Views
are using graph databases.
39
123 Views
Card title should ideally span
no more than three lines
to mantain proportions.
Body copy | dark gray
Merriweather regular 13/26pt
enterprises -Walmart, Cisco, Pitney Bowes-
Card footer | additional
metadata & actions
gray 13/26pt
#tag
Fold | gray
39x39pt
Components | CARD STATES
#tag
#tag
#tag
#tag
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
123 Views
123 Views
123 Views
123 Views
Rest | fold triangle on the bottom right corner, color gray
Hover & Focus | fold triangle reversed, color gray
Selected | white on primary color
Disabled | primary and body color turned to gray, no fold
Components | CARD IDENTITIES
#news
#marketplace
#literature
#people
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
Card title should
ideally span no more
than three lines.
123 Views
123 Views
123 Views
123 Views
Components | CARD COLLECTION | CAROUSEL VIEW
Section title
Section title | Lato black
32/39pt
But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising
pain was born and I will give you a complete account of the system, and expound the actual
Section description | dark gray
Merriweather regular 16/26pt
measure should be between
45 and 75 characters, or 20/30ems
Switch view |
changes list between
carousel and grid view
teachings of the great explorer of the truth, the master-builder of human happiness.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
123 Views
See all [courses]
Pager | shows up when cards
can’t fit in a single line
within the viewport
See all link| aligned
to the bottom right
of the section
Navigation link |
shows the next
card grouping
of this collection
Components | CARD COLLECTION | GRID VIEW
Section title
But I must explain to you how all this mistaken idea of denouncing of a pleasure and praising
pain was born and I will give you a complete account of the system, and expound the actual
teachings of the great explorer of the truth, the master-builder of human happiness.
#collection
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
123 Views
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#another_collection
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
123 Views
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
#news | 12 feb 2016
Card title should
ideally span no more
than three lines.
Components | COMMUNITY BADGE
LEVEL
LEVEL
6
7
COMMUNITY
BADGE
4
1
3
ARTICLES
level 3
3 more until next level
CHALLENGES
level 1
1 more until next level
DISCUSSIONS
level 2
1 more until next level
LEVEL
0
COMMUNITY
BADGE
4
1
3
1
VIRTUAL LABS
level 3
3 more until next level
CHALLENGES
level 1
1 more until next level
JOB POSITIONS
level 2
1 more until next level
EVENTS
level 1
1 more until next level
COMMUNITY
BADGE
0
0
0
ARTICLES
level 0
1 more until next level
CHALLENGES
level 0
1 more until next level
DISCUSSIONS
level 0
1 more until next level