dentity
style guide
intro
What is a style guide?
A visual language guidebook for IDENTITY. This guide provides a comprehensive set of principles on how to manage visual elements on the website along with brand guidelines for the wordmark.
Goals
Since IDENTITY is a living website, this document acts as a reference for future development. The goal of this document is to keep the site visually consistent so it can easily comprehended by users.
wordmark
grid system Get the proportions right when using the wordmark.
1x = 8.129 px by 8.129 px
38.5x 2x .5x
6x
10x
2x 6.25x
32.25x
.5x
38.5x 2x .5x
6x
10x
2x 6.25x
32.25x
.5x
color palette
RGB
R 236 G 103 B 53
RGB
R 90 G 91 B 90
RGB
R0 G0 B0
RGB
R 255 G 255 B 255
CMYK
C0 M 70.31 Y 82.03 K0
CMYK
C 58.96 M 47.99 Y 48.04 K 39.37
CMYK
C 91.25 M 78.76 Y 61.98 K 97.47
CMYK
C M Y K
HEX COLOR CODE
#EC6635
HEX COLOR CODE
#5A5B5A
HEX COLOR CODE
#000000
HEX COLOR CODE
#FFFFFF
0 0 0 0
color usage Stick to the primary color palette when possible.
dentity
dentity
dentity
dentity
color palette
RGB
R 43 G 86 B 160
#2B559F HEX COLOR CODE
RGB
R 171 G 189 B 79
#AABD4E HEX COLOR CODE
RGB
R 128 G 34 B 109
#7F216C HEX COLOR CODE
RGB
R 214 G 86 B 114
#D55671 HEX COLOR CODE
RGB
R 82 G 164 B 172
#51A4AC HEX COLOR CODE
color usage Use the secondary color palette when needed.
dentity
dentity
dentity
dentity
dentity
dentity
dentity
dentity
dentity
dentity
typeface Fredoka One Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rs Tt Uu Vv Ww Yy Zz 123456789 #@!&^%()?/> <+=-$~|
This typeface is only for the wordmark.
usage guidelines The wordmark is primarily used horizontally.
dentity
do Rotate it 90 degrees when it is needed vertically. Try to keep appropiate proportions.
usage guidelines Isolate icon when using the wordmark.
donâ&#x20AC;&#x2122;t Rotate wordmark nor single characters.
website
color palette RGB HEX COLOR CODE
R 236 G 103 B 53 #EC6635
RGB HEX COLOR CODE
R 90 G 91 B 90 #5A5B5A
RGB
R 224 G 225 B 224 #DFE1DF
RGB
HEX COLOR CODE
R0 G0 B0 #000000
OPACITY 100%
RGB HEX COLOR CODE OPACITY 15%
HEX COLOR CODE
R 255 G 255 B 255 #FFFFFF
color palette/ tabs Primary contacts
HCJFS summary
RGB
RGB
R 43 G 86 B 160
R 171 G 189 B 79
Health information
RGB
R 128 G 34 B 109
Referrals+ appointments
RGB
R 214 G 86 B 114
#2B559F HEX COLOR CODE
#AABD4E HEX COLOR CODE
#7F216C HEX COLOR CODE
#D55671 HEX COLOR CODE
OPACITY: 100%
OPACITY: 100%
OPACITY: 100%
OPACITY: 100%
OPACITY: 15%
OPACITY: 15%
OPACITY: 15%
OPACITY: 15%
Completed visits
RGB
R 82 G 164 B 172
#51A4AC HEX COLOR CODE
OPACITY: 15%
typeface This typeface style is mainly used in content, titles and unselected buttons.
Lato (regular) Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rs Tt Uu Vv Ww Yy Zz 123456789 #@!&^%()?/> <+=-$~|
Use example: Lato italic 16 pt, headlines-tab color, content-black. Date
Therapy type
Primary diagnosis
Location
06/22/17
Type
Diagnosis
Location
typeface This typeface style is mainly used in titles and selected buttons.
Lato (black) Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rs Tt Uu Vv Ww Yy Zz 123456789 #@!&^%()?/> <+=-$~|
Use example: Lato black 21 pt, tab color.
OPEN REFERRALS MISSED APPOINTMENTS
typeface This typeface style is mainly used in disclaimers.
Lato (regular-italic) Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rs Tt Uu Vv Ww Yy Zz 123456789 #@!&^%()?/> <+=-$~|
Use example: Lato italic 14 pt, gray.
*These reï¬&#x201A;ect the last 10 Therapy Appointments.
typeface/ tracking+kerning TrackingConsistent letter-spacing in a group of characters. <
<
KerningSpace in between individual characters.
PRIMARY CONTACTS PRIMARY CONTACTS PRIMARY CONTACTS Primary contacts
*Overall disclaimer
HCJFS summary
Section titles: Tracking 75
Tracking 50 Tracking 25
Tab titles: Tracking 0
HCJFS summary Disclaimers: Tracking 0
Content: Tracking 0 Diagnosis, Diagnosis, Diagnosis
RY
All text: Give enough room to individual characters.
All text: No matter the size of the text, always keep the letter-spacing.
typeface/ tracking+kerning Tracking should be only applied to certain all caps content. Kerning should always be consistent across content on the website by not manipulating original typefaceâ&#x20AC;&#x2122;s properties.
<
<
Section titles: Tracking 75
PRIMARY CONTACTS MEDICAID THURSDAY, JUNE 29 2017
Dropdown titles: Tracking 50
In-section content: Tracking 0
do
typeface/ tracking+kerning
don’t
Allow letter-spacing alters the typeface’s proportions. Keeping the right letter-spacing increases readability.
PRIMARY CONTACTS PRIMARY CONTACTS PRIMARY CONTACTS PRIMARY CONTACTS PRIMARYCONTACTS P R I M A R Y
C O N T A C T S
primary grid system 738 px
86 px
542 px
dentity
Welcome, John Doe | HCJFS
!
ALLERGIES
|
ACCOUNT
| LOGOUT
CURRENTLY HOSPITALIZED
|
AWOL
86 px 28 px
< BACK TO SEARCH
92 px
Caroline Lee
Primary contacts
HCJFS summary
Health information
?
1014 px
PRIMARY CONTACTS *Overall disclaimer IDENTITY is only CCHMC recorded data intended for HCJFS, etc.
Date of birth
02/20/2001
HAMILTON COUNTY JOB AND FAMILY SERVICES
Medical record #
9001892
PLACEMENT AND COURT
SACWIS person ID
90018921
HEALTH CARE
SACWIS case ID
90018921
Provider ID
90018921
Placement
Angela Lopez
Last updated on June 26, 2017 at 6:30 am.
347 px
Completed visits
57 px 32 px
Female - 16 years old Legal status PPLA Placement type Placement type here
Referrals + appointments
46 px
759 px
82 px
933 px
primary navigation Each tab houses a section. When hovering and selecting, the color changes on title and tab indicator accordingly. Tab indicators grow to the side in relation to the title length.
Tab indicators: Width: depending on text lenght. Height: 5.725 px.
120 px Primary contacts
HCJFS summary
Health information
Referrals + appointments
Completed visits
Primary contacts
HCJFS summary
Health information
Referrals + appointments
Completed visits
Primary contacts
HCJFS summary
Health information
Referrals + appointments
Completed visits
Primary contacts
HCJFS summary
Health information
Referrals + appointments
Completed visits
Primary contacts
HCJFS summary
Health information
Referrals + appointments
Completed visits
Tab titles: Lato black/regular 18 pt, gray/tab color.
primary grid system Each section should maintain the same proportions, style and spacing.
Carrot: Must be aligned with the center of text.
PRIMARY CONTACTS *Overall disclaimer IDENTITY is only CCHMC recorded data intended for HCJFS, etc.
10 px
HAMILTON COUNTY JOB AND FAMILY SERVICES PLACEMENT AND COURT HEALTH CARE
8 px 18 px
secondary navigation Secondary navigation lives within each of the main sections. It helps to organize different groups of content.
Carrot: Width: 7.8 px Height: 10 px.
Dropdown buttons: Lato black 21 pt, all caps, tab color. Carrot: Rotates 90 degrees when clicked.
HAMILTON COUNTY JOB AND FAMILY SERVICES PLACEMENT AND COURT HEALTH CARE Cincinnati Childrenâ&#x20AC;&#x2122;s Hospital Medical Center
(100) 123 4567 Primary Care Provider Mary Greiner (100) 123 7890
Divider: 1 pt, light gray. Content titles: Lato black 21 pt, tab color. Content: Lato regular 16 pt, black.
key components/ snapshot The snapshot format can be replicated for future pop up confirmation messages.
Case name: Lato black 30 pt, gray. Content: Lato black/regular 16 pt, gray.
Faded out background: Light gray, 75% opacity.
Snapshot background: White, light drop shadow.
Caroline Lee Female - 16 years old Legal status PPLA ? Placement Type Placement type here Date of birth
02/20/2001
Medical record #
9001892
SACWIS person ID
90018921
SACWIS case ID
90018921
Provider ID
90018921
Placement
Angela Lopez
Last updated on June 26, 2017 at 6:30 am. CONTINUE < BACK TO RESULTS
Question mark icon: 3.5 by 3.8 px, orange.
Dividers: 1 pt, gray.
Button text: Lato regular, 14pt white/orange, all caps.
key components/ sidebar The side bar should be always visible after selecting a case.
Case name: Lato regular 26pt, gray.
Caroline Lee Female - 16 years old ?
Legal status PPLA Placement type Placement type here
Date of birth
02/20/2001
Medical record #
9001892
SACWIS person ID
90018921
SACWIS case ID
90018921
Provider ID
90018921
Placement
Angela Lopez
Snapshot content: Lato regular 14pt, gray.
Divider: 1 pt,gray. Disclaimers: Lato italic 14 pt, gray.
Last updated on June 26, 2017 at 6:30 am.
Drop shadow: Light gray, 75%.
key components/ alert banner The alert banner always goes on the top right corner, below the main header.
Alert icon: 10 by 12 px, white color.
Dropdown buttons: Lato black 14pt, orange, all caps.
!
ALLERGIES
|
CURRENTLY HOSPITALIZED Admission date MM/DD/YY
Dividers: 1 pt, gray.
Reason Reason for hospitalization Location Hospital address, building and phone number
|
AWOL
Subtitles: Lato black 12pt, orange. Content: Lato regular 12pt, black.
key components/ lists Lists live within the dropdown buttons in each section. They could be collapsible or static depending on the content.
PT / OT / SPEECH THERAPY VISITS Expand for additional diagnoses.
Date
Therapy Type
Primary Diagnosis
Location
06/22/17
Type
Diagnosis
Location
01/25/17
Type
Diagnosis
Location
06/13/16
Type
Diagnosis
Location
01/29/16
Type
Diagnosis
Location
11/18/15
Type
Diagnosis
Location
10/04/15
Type
Diagnosis
Location
06/15/15
Type
Diagnosis
Location
05/01/15
Type
Diagnosis
Location
01/11/15
Type
Diagnosis
Location
11/05/14
Type
Diagnosis
Location
*These reďŹ&#x201A;ect the last 10 Therapy Appointments.
Content: Lato regular 16pt black (content)
List dividers: alternate: - no background line (always first) - colored background line (tab color, opacity 15%)
key components/ lists As for the list dividers, width depends on the text lenght, whereas height is fixed.
Collapsed
11/05/14
Width: Varies according to content length.
Type
02/10/17
Expanded
01/25/17
Asthma
Diagnosis
Neurologist
LIB ED
Diagnoses
Location
Howard Wang
22 px
22 px
Treated 72 px
Diagnosis, Diagnosis, Diagnosis
Placement Agency
First Last
Address 1456 Childrenâ&#x20AC;&#x2122;s Way, Cincinnati OH 45219
72 px
Columns: Each list can have either two, three or four columns.
key components/ buttons Call-to-action buttons always have high-contrast backgrounds that make them stand out. They always live in a box.
Big button: Lato regular 20pt, all caps, white and orange background.
300 px
SEARCH
48 px
Small button: Lato regular 12pt, all caps, white and orange background.
215 px
CONTINUE
36 px
key components/ buttons Supporting buttons are visually subtler and usually have light backgrounds. They could either live or not inside boxes.
Button in box: Lato black 14 pt, all caps, orange and white background.
186 px
< BACK TO SEARCH
< BACK TO RESULTS
48 px
Label: Lato regular 14pt, all caps, orange, no background.
keep in mind As the website evolves, try to be consistent with colors, dimensions and proportions. This will help users become comfortable navigating through the website without worrying about learning new navigation patterns.